\n
\n \n \n
\n \n ,\n
\n \n {title} \n {subTitle} \n
\n \n {!button3 && button1 ? : ''}\n {!button3 && button2 ? : ''}\n {button3 ? : ''}\n \n
\n \n
\n \n setMinimized(false)}>\n \n
\n\n \n \n
: null}\n \n
\n
\n
\n
\n );\n },\n);\n\nexport {Step1};\n","import React from 'react';\nimport {observer} from 'mobx-react-lite';\nimport {Step1} from './Step1';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\n\ninterface WelcomeProps {\n store: CurrentPageStore;\n}\n\nconst Welcome: React.FC{t('select-option-start')}.
\n \n
\n {t('seo-assistant-description')}\n
\n \n
\n
\n
\n \n
\n \n \n {t('blank-page')}\n
\n {t('create-scratch')}
\n onStartFromScratchClick()}>\n {t('start-scratch-button')}\n
\n \n \n
\n \n {t('from-url')}\n
\n {t('upload-from-url')}
\n \n
\n \n
\n \n
\n \n
\n Try out the most Powerful SEO AI Writer
\n Generate a full article from a keyword or topic in just a few clicks.
\n \n
\n \n \n \n trigger}>\n \n \n \n trigger}>\n \n \n \n trigger}>\n \n \n \n \n \n {/* */}\n {/*
:\n \n
\n \n
\n \n }\n \n Click here to AI Generate a Hero Image\n
\n \n
\n {aiInProgress ?\n \n
\n \n
\n setIsOpenAiWriterDrawer(true)}>\n \n
: null} */}\n {/* {!showAiBanner && !currentPage.isTaActive ?\n \n
\n {`New AI writer (alpha)`}
\n setIsOpenAiContentToolsDrawer(true)}>\n \n
: null} */}\n\n\n {!newPage && <>\n \n
\n Need help writing?
\n Try AI Content Writer
\n \n {\n setActivePermission(value);\n onPermissionChange(email, value, false);\n }}\n suffixIcon={
\n );\n};\n\n\n","import React, {useState} from 'react';\nimport {Modal} from '@/components/common-components/components/modal';\nimport {CommonInput} from '@/components/common-components/components';\nimport {Button as V2Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Select, notification, Divider} from 'antd';\nimport {CaretDownFilled} from '@ant-design/icons';\nimport {observer} from 'mobx-react-lite';\n\n\n// Stylesheets\nimport styles from './style.module.scss';\nimport {useStore} from '@/store/root-store';\nimport {User} from './user';\nimport {useTranslation} from 'next-i18next';\nimport {SCA_PAGE_SHARED} from '@/constants/events';\nimport styled from 'styled-components';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {emailReg} from '@/constants/regex';\nconst {Option} = Select;\n\nconst ShareModal: React.FC = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {content, shareDialog, pagePermissions},\n },\n } = useStore('');\n const [email, setEmail] = useState\n {avatar} \n
\n \n
\n {!isOwner ? {email}
\nOwner
}\n \n {(email?.length && email?.match(emailReg)) ? null : !email?.length ? null : Please enter a valid email address }\n
\n\n \n - \n
- \n
\n \n {\n pagePermissions.users?.sort().map(user => {\n return (\n - \n
\n \n );\n })\n }\n
\n
:\n \n
\n \n \n \n\n {currentPage.aiTooltip.urlValue &&
\n {currentPage.aiTooltip.textValue}
\n{currentPage.aiTooltip.urlValue}
}\n\n \n \n \n {\n e.stopPropagation();\n currentPage.setAiTooltip({...currentPage.aiTooltip, isLinkEdit: true});\n }}/>\n {currentPage.aiTooltip.isLink && onLinkRemove()}/>}\n
\n \n
}\n \n e.stopPropagation()}\n onChange={e => currentPage.setAiTooltip({\n ...currentPage.aiTooltip,\n textValue: e.target.value,\n })}\n type='text'\n value={currentPage.aiTooltip.textValue}\n placeholder='Add text'\n className={styles.urlInput}\n />\n e.stopPropagation()}\n onChange={e => currentPage.setAiTooltip({\n ...currentPage.aiTooltip,\n urlValue: e.target.value,\n })}\n type='text'\n value={currentPage.aiTooltip.urlValue}\n style={{marginBottom: '0px'}}\n className={styles.urlInput}\n placeholder='Paste a link'\n />\n
\n Text
\n\n currentPage.setAiTooltip({...currentPage.aiTooltip, isLinkEdit: false})} className={styles.inputControlls} style={{paddingLeft: 14}}>\n Cancel\n \n \n \n Apply\n \n \n
\n \n {UNSPLASH_ACCESS_KEY ? onAddImage(imageUrl)}\n /> : null}\n
\n\n );\n};\n","import {useStore} from '@/store/root-store';\nimport styles from '../../style.module.scss';\nimport {observer} from 'mobx-react';\nimport {Unsplash} from './Unsplash';\nimport styled from 'styled-components';\nimport {Radio, RadioChangeEvent} from 'antd';\n\ninterface Props {\n onChange: (editorState: any) => any;\n}\n\nexport const FreeStockTab = observer(({onChange}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentType, setContentType} = currentPage;\n\n const onContentTypeChange = (e: RadioChangeEvent) => {\n setContentType(e.target.value);\n };\n\n return (\n <>\n \n \n\n
\n \n );\n});\n\nconst RadioStyled = styled(Radio)`\n .ant-radio-checked .ant-radio-inner {\n background-color: #7f4ead !important;\n border-color: #7f4ead !important;\n\n &::after {\n background-color: #fff !important;\n }\n }\n`;\n","import {useEffect, useRef, useState} from 'react';\nimport styled from 'styled-components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck} from '@fortawesome/pro-solid-svg-icons';\nimport {copyIconWhite, viewImageCheck2} from '@/utils/icons';\nimport {Col, Spin} from 'antd';\nimport {SkeletonRingLoader} from '@/components/common-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {insertImage} from '@/utils/editor-scripts';\nimport {LoadingOutlined} from '@ant-design/icons';\n\n\nexport const ImageComponent = observer(({data, idx, setImagesList, onChange, store, historyCopyStatus, setShowSelectedHistoryImage, setShowHistoryImage, rootElement, setImagesAddedCount, imagesAddedCount}) => {\n const ref = useRef(null);\n const observer = useRef(null);\n const antIcon = \n Add Image\n
\n Click on the image to add it to editor.
\n\n Content type:\n \n To Article \n As Hero \n \n
\n onMouseLeave()} onMouseOver={() => setElemIdx(idx)}>\n {data?.loading && \n imgOnLoad(data?.id)}\n />\n \n \n \n \n \n \n
\n ;\n});\n\n\nconst ColCardImage = styled.img<{hide?: boolean}>`\n display: ${p => p?.hide ? 'none' : ''};\n width: 100%;\n border-radius: 12px;\n cursor: pointer;\n background-color: #000000;\n`;\n\nconst ColCardContainer = styled.div<{hide?: boolean}>`\n display: ${p => p?.hide ? 'none' : ''};\n position: relative;\n cursor: pointer;\n\n .overlay {\n display: ${p => p?.hide ? 'none' : ''};\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0);\n }\n\n /* Style for the button Article Btn */\n .add-to-atricle-btn {\n display: ${p => p?.hide ? 'none' : ''};\n position: absolute;\n top: 28%;\n left: 74%;\n transform: translate(-50%, -50%);\n background-color: rgba(255, 255, 255, 0.3);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n opacity: 0; /* Initially hidden */\n width: 80px;\n height: 28px;\n font-size: 10px;\n line-height: 10px;\n font-weight: 400;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* Black transparent overlay */\n &::before {\n display: ${p => p?.hide ? 'none' : ''};\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background-color: rgba(0, 0, 0, 0);\n }\n\n /* Show the button on hover */\n &:hover .add-to-atricle-btn {\n display: ${p => p?.hide ? 'none' : ''};\n opacity: 1;\n }\n\n .add-to-atricle-btn:hover {\n display: ${p => p?.hide ? 'none' : ''};\n background-color: rgba(255, 255, 255, 0.2);\n }\n\n &:hover::before {\n display: ${p => p?.hide ? 'none' : ''};\n background-color: rgba(0, 0, 0, 0.8);\n }\n\n /* Style for the button Copy Btn */\n .copy-button {\n display: ${p => p?.hide ? 'none' : ''};\n position: absolute;\n top: 72%;\n left: 26%;\n transform: translate(-50%, -50%);\n background-color: rgba(255, 255, 255, 0.3);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n opacity: 0;\n width: 80px;\n height: 28px;\n font-size: 10px;\n line-height: 10px;\n font-weight: 400;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* Show the button on hover */\n &:hover .copy-button {\n display: ${p => p?.hide ? 'none' : ''};\n opacity: 1;\n }\n\n .copy-button:hover {\n display: ${p => p?.hide ? 'none' : ''};\n background-color: rgba(255, 255, 255, 0.2);\n }\n\n /* Style for the button Article Btn */\n .add-as-hero-btn {\n display: ${p => p?.hide ? 'none' : ''};\n position: absolute;\n top: 28%;\n left: 26%;\n transform: translate(-50%, -50%);\n background-color: rgba(255, 255, 255, 0.3);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n opacity: 0;\n width: 80px;\n height: 28px;\n font-size: 10px;\n line-height: 10px;\n font-weight: 400;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* Black transparent overlay */\n &::before {\n display: ${p => p?.hide ? 'none' : ''};\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 12px;\n background-color: rgba(0, 0, 0, 0);\n transition: background-color 0.3s ease;\n }\n\n /* Show the button on hover */\n &:hover .add-as-hero-btn {\n display: ${p => p?.hide ? 'none' : ''};\n opacity: 1;\n }\n\n .add-as-hero-btn:hover {\n display: ${p => p?.hide ? 'none' : ''};\n background-color: rgba(255, 255, 255, 0.2);\n }\n\n &:hover::before {\n display: ${p => p?.hide ? 'none' : ''};\n background-color: rgba(0, 0, 0, 0.8);\n }\n\n /* Style for the button Copy Btn */\n .view-button {\n display: ${p => p?.hide ? 'none' : ''};\n position: absolute;\n top: 72%;\n left: 74%;\n transform: translate(-50%, -50%);\n background-color: rgba(255, 255, 255, 0.3);\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n opacity: 0;\n width: 80px;\n height: 28px;\n font-size: 10px;\n line-height: 10px;\n font-weight: 400;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* Show the button on hover */\n &:hover .view-button {\n display: ${p => p?.hide ? 'none' : ''};\n opacity: 1;\n }\n\n .view-button:hover {\n display: ${p => p?.hide ? 'none' : ''};\n background-color: rgba(255, 255, 255, 0.2);\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {useState, useEffect, useRef} from 'react';\nimport {Card, Col, Row} from 'antd';\nimport {SkeletonRingLoader} from '@/components/common-components';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {ImageComponent} from './imageComponent';\n\ninterface Props {\n historyCopyStatus?: any;\n onChange: (editorState: any) => any;\n store: CurrentPageStore;\n buttonTitle: any;\n setShowSelectedHistoryImage: any;\n setShowHistoryImage: any;\n}\n\nexport const ImageListComponent = observer(({onChange, store, historyCopyStatus, buttonTitle, setShowSelectedHistoryImage, setShowHistoryImage}: Props) => {\n const {\n contentOptimizer: {\n aiOutline: {\n dummyImages,\n templatesHistory,\n },\n },\n } = useStore('');\n const ref = useRef(null);\n const [imagesAddedCount, setImagesAddedCount] = useState(20);\n const [imagesDummy, setImagesDummy] = useState([]);\n const [imagesList, setImagesList] = useState([]);\n\n useEffect(() => {\n const initialImagesLoad = templatesHistory?.slice(0, imagesAddedCount).map(item => {\n return {...item, loading: true};\n }) || [];\n setImagesList(initialImagesLoad);\n }, [templatesHistory?.length]);\n\n useEffect(() => {\n setImagesDummy(dummyImages);\n }, [dummyImages?.length]);\n\n return <>\n {data?.inputs[0]?.fieldValue}
\n Generating 4 images
}\n{val.title}
\n \n ))\n }\n {imagesList?.map((item, idx) => History
\n {historyLoading ? \n
}\n \n 
\n
}\n {!isScaPublicPage() && Optimize Content in Google Docs
\n & Get SEO Analysis on any site.
\n \n & Get SEO Analysis on any site.
\n \n Get Chrome Extension\n \n
\n Get Chrome Extension\n \n \n Paragraph was copied to clipboard\n
}\n\n \n Edit Alt Tag \n Alt tag (optional) \n setAltText(e?.target?.value)} />\n \n setShowEditAltModal(false)}>Cancel \n {\n handleUpdateAlt();\n setShowEditAltModal(false);\n }}>Save changes \n \n
\n \n ;\n});\n\nconst Title = styled.div`\n color: #121212;\n font-size: 24px;\n font-weight: 600;\n margin-bottom: 16px;\n`;\n\nconst InputTitle = styled.div`\n color: #121212;\n font-size: 12px;\n margin-bottom: 7px;\n`;\n\nconst InputStyled = styled(Input)`\n width: 100%;\n height: 38px;\n background: #FFFFFF;\n border: 1px solid #D2D2D2;\n border-radius: 8px;\n`;\n\nconst ButtonsWrapper = styled.div`\n width: 100%;\n display: flex;\n justify-content: end;\n align-items: center;\n margin-top: 19px;\n`;\n\nconst ButtonStyled = styled(Button)`\n margin: 0px !important;\n background: #2D6CCA;\n\n &:hover {\n background: #2D6CCA !important;\n opacity: 0.8;\n }\n &:focus {\n background: #2D6CCA !important;\n opacity: 0.8;\n }\n`;\n\nconst CancelButton = styled.div`\n width: fit-content;\n color: #4E5156;\n font-weight: 500;\n cursor: pointer;\n margin-right: 31px;\n`;\n","import {Select} from 'antd';\nimport {EditorState, RichUtils} from 'draft-js';\nimport styles from './style.module.scss';\nimport {CaretDownOutlined} from '@ant-design/icons';\nimport {useTranslation} from 'next-i18next';\nconst {Option} = Select;\n\ninterface Props {\n blockTypeEnhancement: (e: any) => void;\n editorState: EditorState;\n}\n\nexport const Header = ({blockTypeEnhancement, editorState}: Props) => {\n const {t} = useTranslation('common');\n\n const handleSelect = (value: string) => {\n blockTypeEnhancement(value);\n };\n\n return (\n \n }>\n \n \n \n \n \n \n \n \n
\n );\n};\n","import {Button, Tooltip} from 'antd';\n\nimport {EditorState, RichUtils} from 'draft-js';\nimport classNames from 'classnames';\n\nimport styles from './style.module.scss';\nimport {UnorderedListOutlined} from '@ant-design/icons';\n\ninterface Props {\n blockTypeEnhancement: (e: any) => void;\n editorState: EditorState;\n}\n\nexport const UnorderedList = ({blockTypeEnhancement, editorState}: Props) => {\n return (\n \n \n {\n e.preventDefault();\n blockTypeEnhancement('unordered-list-item');\n }}\n className={classNames(styles.button, {[styles.active]: RichUtils.getCurrentBlockType(editorState) === 'unordered-list-item'})}\n >\n \n
\n );\n};\n","import {Button, Tooltip} from 'antd';\n\nimport styles from './style.module.scss';\nimport {BoldOutlined} from '@ant-design/icons';\nimport {EditorState} from 'draft-js';\nimport classNames from 'classnames';\n\ninterface Props {\n inlineStyleEnhancement: (e: any) => void;\n editorState: EditorState;\n}\n\nexport const Bold = ({inlineStyleEnhancement, editorState}: Props) => {\n return (\n \n \n {\n e.preventDefault(); inlineStyleEnhancement('BOLD');\n }}\n className={classNames(styles.button, {[styles.active]: editorState.getCurrentInlineStyle().toJS().includes('BOLD')} )}\n >\n \n
\n );\n};\n","import {Button, Tooltip} from 'antd';\n\nimport styles from './style.module.scss';\nimport {ItalicOutlined} from '@ant-design/icons';\nimport {EditorState} from 'draft-js';\nimport classNames from 'classnames';\n\ninterface Props {\n inlineStyleEnhancement: (e: any) => void;\n editorState: EditorState;\n}\n\nexport const Italic = ({inlineStyleEnhancement, editorState}: Props) => {\n return (\n \n \n {\n e.preventDefault(); inlineStyleEnhancement('ITALIC');\n }}\n className={classNames(styles.button, {[styles.active]: editorState.getCurrentInlineStyle().toJS().includes('ITALIC')} )}\n >\n \n
\n );\n};\n","import {Button, Tooltip} from 'antd';\n\nimport styles from './style.module.scss';\nimport {UnderlineOutlined} from '@ant-design/icons';\nimport {EditorState} from 'draft-js';\nimport classNames from 'classnames';\n\ninterface Props {\n inlineStyleEnhancement: (e: any) => void;\n editorState: EditorState;\n}\n\nexport const Underline = ({inlineStyleEnhancement, editorState}: Props) => {\n return (\n \n \n {\n e.preventDefault(); inlineStyleEnhancement('UNDERLINE');\n }}\n className={classNames(styles.button, {[styles.active]: editorState.getCurrentInlineStyle().toJS().includes('UNDERLINE')} )}\n >\n \n
\n );\n};\n","import {Button, Tooltip} from 'antd';\n\nimport {EditorState, RichUtils} from 'draft-js';\nimport classNames from 'classnames';\n\nimport styles from './style.module.scss';\nimport {OrderedListOutlined} from '@ant-design/icons';\n\ninterface Props {\n blockTypeEnhancement: (e: any) => void;\n editorState: EditorState;\n}\n\nexport const OrderedList = ({blockTypeEnhancement, editorState}: Props) => {\n return (\n \n \n {\n e.preventDefault();\n blockTypeEnhancement('ordered-list-item');\n }}\n className={classNames(styles.button, {[styles.active]: RichUtils.getCurrentBlockType(editorState) === 'ordered-list-item'})}\n >\n \n
\n );\n};\n","import {Button, Tooltip} from 'antd';\n\nimport {EditorState, RichUtils} from 'draft-js';\nimport classNames from 'classnames';\n\nimport styles from './style.module.scss';\nimport {CodeOutlined} from '@ant-design/icons';\n\ninterface Props {\n blockTypeEnhancement: (e: any) => void;\n editorState: EditorState;\n}\n\nexport const Code = ({blockTypeEnhancement, editorState}: Props) => {\n return (\n \n \n {\n e.preventDefault();\n blockTypeEnhancement('code-block');\n }}\n className={classNames(styles.button, {[styles.active]: RichUtils.getCurrentBlockType(editorState) === 'code-block'})}\n >\n \n
\n );\n};\n","import {useState, useRef, useEffect} from 'react';\nimport {Button, Tooltip} from 'antd';\nimport styles from './style.module.scss';\nimport {LinkOutlined} from '@ant-design/icons';\nimport {EditorState, Modifier, SelectionState} from 'draft-js';\nimport classNames from 'classnames';\nimport {Input, Button as ButtonV2} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {createCompositeDecorators} from '../../decorators';\n\n\ninterface Props {\n updateText: (state: EditorState) => void;\n}\n\nexport const Anchor = observer(({updateText}: Props) => {\n const {contentOptimizer: {currentPage: {currentEditorState, focusTermsClassNames}}} = useStore('');\n const [showNewUrlEditor, setShowNewUrlEditor] = useState(false);\n const [editorValues, setEditorValues] = useState({\n urlValue: '',\n textValue: '',\n });\n const [selectionRange, setSelectionRange] = useState({customSelection: null});\n\n const dateRef = useRef(null);\n\n // Close anchor form popup by clicking anywhere on the screen\n useEffect(() => {\n function handleClickOutside(event) {\n if (dateRef.current && !dateRef.current.contains(event.target)) {\n setShowNewUrlEditor(false);\n setEditorValues({\n urlValue: '',\n textValue: '',\n });\n }\n }\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [dateRef]);\n\n\n // Dettect if right combination of key is pressed to open anchor form popup\n document.onkeydown = e => {\n if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() == 'k' || e.metaKey && e.shiftKey && e.key.toLowerCase() == 'k') {\n iconClicked(e);\n }\n };\n\n // This will generate text to insert inline on current cursor location\n const insertText = customSelection => {\n const decorator = createCompositeDecorators(focusTermsClassNames);\n const currentContent = currentEditorState.getCurrentContent();\n\n const urlPattern = /^((http|https):\\/\\/)/;\n\n const formatUrl = urlPattern.test(editorValues.urlValue) ? editorValues.urlValue : `http://${editorValues.urlValue}`;\n\n const newContentWithEntity = currentContent.createEntity(\n 'LINK',\n 'MUTABLE',\n {url: formatUrl},\n );\n\n const entityKey = newContentWithEntity.getLastCreatedEntityKey();\n\n const newNewContent = Modifier.replaceText(\n currentContent,\n customSelection,\n editorValues.textValue,\n null,\n entityKey,\n );\n\n const withLinkText = EditorState.createWithContent(\n newNewContent,\n decorator,\n );\n\n const withProperCursor = EditorState.forceSelection(\n withLinkText,\n withLinkText.getCurrentContent().getSelectionAfter(),\n );\n\n\n return withProperCursor;\n };\n\n // This will add generated text (with link or without) into our text\n const sendTextToEditor = () => {\n const contentState = insertText(selectionRange.customSelection);\n updateText(contentState);\n setShowNewUrlEditor(false);\n setEditorValues({\n urlValue: '',\n textValue: '',\n });\n };\n\n\n const promptForLink = () => {\n const selection = currentEditorState.getSelection();\n const currentContent = currentEditorState.getCurrentContent();\n const startKey = selection.getStartKey();\n const startOffset = selection.getStartOffset();\n const blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);\n const linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);\n const prevOffset = startOffset - 1;\n\n const characterList = blockWithLinkAtBeginning.getCharacterList();\n const prevChar = characterList.get(prevOffset);\n const nextChar = characterList.get(startOffset);\n\n // Get block for current selection\n const anchorKey = selection.getAnchorKey();\n const currentBlock = currentContent.getBlockForKey(anchorKey);\n\n let selectedText;\n let customSelection = selection;\n\n const noEntityCase = () => {\n const start = selection.getAnchorOffset() < selection.getFocusOffset() ? selection.getAnchorOffset() : selection.getFocusOffset();\n const end = selection.getFocusOffset() > selection.getAnchorOffset() ? selection.getFocusOffset() : selection.getAnchorOffset();\n\n setSelectionRange({customSelection});\n selectedText = currentBlock.getText().slice(start, end);\n };\n\n if (!prevChar || !nextChar) {\n noEntityCase();\n } else {\n const prevEntity = prevChar?.getEntity();\n const nextEntity = nextChar?.getEntity();\n\n const entity = prevEntity === nextEntity && prevEntity;\n\n if (entity) {\n let finalPrevOffset = prevOffset;\n let finalNextOffset = startOffset;\n\n while (finalPrevOffset > 0) {\n finalPrevOffset--;\n const char = characterList.get(finalPrevOffset);\n if (char.getEntity() !== entity) {\n finalPrevOffset++;\n break;\n }\n }\n\n const blockLength = blockWithLinkAtBeginning.getLength();\n while (finalNextOffset < blockLength) {\n finalNextOffset++;\n\n const char = characterList.get(finalNextOffset);\n if (char?.getEntity() !== entity) {\n break;\n }\n }\n\n selectedText = currentBlock.getText().slice(finalPrevOffset, finalNextOffset);\n\n customSelection = new SelectionState({\n anchorKey: anchorKey, // key of block\n anchorOffset: finalPrevOffset,\n focusKey: anchorKey,\n focusOffset: finalNextOffset, // key of block\n hasFocus: true,\n // isBackward: false // isBackward = (focusOffset < anchorOffset)\n });\n\n\n setSelectionRange({customSelection: customSelection});\n } else {\n noEntityCase();\n }\n }\n\n\n let url = '';\n\n if (linkKey) {\n const linkInstance = currentContent.getEntity(linkKey);\n url = linkInstance.getData().url;\n url = url.startsWith('//') ? url.slice(2) : url;\n }\n\n\n setShowNewUrlEditor(true);\n setEditorValues({\n urlValue: url,\n textValue: selectedText,\n });\n };\n\n\n // This is called when we click anchor icon in toolbar\n const iconClicked = (e?: any) => {\n e.preventDefault();\n promptForLink();\n };\n\n return (\n \n \n iconClicked(e)}\n className={classNames(styles.button, {[styles.active]: currentEditorState.getCurrentInlineStyle().toJS().includes('LINK')} )}\n >\n \n {showNewUrlEditor &&
\n );\n});\n","import {Button, Tooltip} from 'antd';\nimport styles from './style.module.scss';\nimport {EditorState, SelectionState} from 'draft-js';\nimport classNames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faUnlink} from '@fortawesome/pro-regular-svg-icons';\n\n\ninterface Props {\n editorState: EditorState;\n entityTypeEnhancement: (selection, entityKey) => void;\n}\n\nexport const AnchorRemove = ({editorState, entityTypeEnhancement}: Props) => {\n const removeLink = (e?: any) => {\n e.preventDefault();\n const selection = editorState.getSelection();\n const currentContent = editorState.getCurrentContent();\n const startKey = selection.getStartKey();\n const startOffset = selection.getStartOffset();\n const blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);\n\n const prevOffset = startOffset - 1;\n const characterList = blockWithLinkAtBeginning.getCharacterList();\n const prevChar = characterList.get(prevOffset);\n const nextChar = characterList.get(startOffset);\n const anchorKey = selection.getAnchorKey();\n\n\n let updatedSelection;\n\n\n if (!prevChar || !nextChar) {\n return;\n } else {\n const prevEntity = prevChar?.getEntity();\n const nextEntity = nextChar?.getEntity();\n\n const entity = prevEntity === nextEntity && prevEntity;\n\n if (entity) {\n let finalPrevOffset = prevOffset;\n let finalNextOffset = startOffset;\n\n while (finalPrevOffset > 0) {\n finalPrevOffset--;\n const char = characterList.get(finalPrevOffset);\n if (char.getEntity() !== entity) {\n finalPrevOffset++;\n break;\n }\n }\n\n const blockLength = blockWithLinkAtBeginning.getLength();\n while (finalNextOffset < blockLength) {\n finalNextOffset++;\n\n const char = characterList.get(finalNextOffset);\n if (char?.getEntity() !== entity) {\n break;\n }\n }\n\n updatedSelection = new SelectionState({\n anchorKey: anchorKey, // key of block\n anchorOffset: finalPrevOffset,\n focusKey: anchorKey,\n focusOffset: finalNextOffset, // key of block\n hasFocus: true,\n // isBackward: false // isBackward = (focusOffset < anchorOffset)\n });\n\n if (!updatedSelection.isCollapsed()) {\n entityTypeEnhancement(updatedSelection, null);\n }\n } else {\n entityTypeEnhancement(selection, null);\n }\n }\n };\n\n return (\n \n
}\n \n e.stopPropagation()}\n onChange={e => setEditorValues({\n ...editorValues,\n textValue: e.target.value,\n })}\n type='text'\n value={editorValues.textValue}\n placeholder='Add text'\n className={styles.urlInput}\n />\n e.stopPropagation()}\n onChange={e => setEditorValues({\n ...editorValues,\n urlValue: e.target.value,\n })}\n type='text'\n value={editorValues.urlValue}\n style={{marginBottom: '0px'}}\n className={styles.urlInput}\n placeholder='Paste a link'\n />\n
\n Text
\n\n \n \n Apply\n \n \n
\n \n \n removeLink(e)}\n className={classNames(styles.button, {[styles.active]: editorState.getCurrentInlineStyle().toJS().includes('LINK')} )}\n >\n \n
\n );\n};\n","import {Button} from '@/components/common-components/v2/Button';\nimport {faImage} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport styles from '../../style.module.scss';\nimport styled from 'styled-components';\n\n\ninterface Props {\n openDrawer: (value: boolean) => void;\n}\n\nexport const AddImage = ({openDrawer}: Props) => {\n const onAddImage = () => {\n openDrawer(true);\n };\n\n return \n {\n // setDisableBtn(false);\n if (RequiredFileType.split(',').includes(data?.file?.type)) {\n setIsError('');\n handleImageChange(data.file);\n } else {\n setIsError('Wrong file format selected!');\n }\n }}\n onDrop={ e => {\n // setDisableBtn(false);\n const getFile = e.dataTransfer.files?.length ? e.dataTransfer.files[0] : null;\n if (RequiredFileType.split(',').includes(getFile?.type)) {\n setIsError('');\n handleImageChange(getFile);\n } else {\n setIsError('Wrong file format selected!');\n }\n } }\n >\n }\n {isError.length > 1 && \n e.stopPropagation()}\n onChange={(e: any) =>\n setEditorValues({\n ...editorValues,\n altValue: e.target.value,\n })\n }\n type='text'\n value={editorValues.altValue}\n placeholder=''\n className={styles.urlInput}\n />\n \n \n \n \n Cancel \n \n Add to article\n \n \n
\n );\n});\n\n\nconst InputWraper = styled.div`\n margin-top: 10px;\n background-color: rgba(249, 249, 251, 1) !important;\n border-radius: 9px;\n .ant-input {\n background-color: transparent !important;\n border: none !important;\n margin-bottom: 0 !important;\n padding: 20px 8px 20px 11px !important;\n }\n .ant-input:focus,\n .ant-input-focused {\n box-shadow: none !important;\n }\n p {\n align-items: center;\n display: flex;\n padding: 0 17px 0 10px;\n border-left: 2px solid #c9c7c7;\n margin: 9px 0 7px 0;\n color: blue;\n cursor: pointer;\n }\n`;\n\nconst Pwrapper = styled.div`\n text-align: initial;\n margin: 18px 0 0 8px;\n font-weight: 400;\n display: flex;\n justify-content: end;\n span {\n color: blue;\n }\n .ant-btn[disabled]{\n background-color: #2d6cca80 !important;\n span{\n color: white !important;\n }\n }\n\n`;\n\nconst AtributeWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n .ant-input {\n width: 143px !important;\n }\n`;\n\nconst CancelBtn = styled(Button)`\n background-color: transparent;\n color: black !important;\n height: 38px;\n border-radius: 9px;\n border: 1px solid lightgray !important;\n &:hover{\n background-color:white !important;\n color:black;\n border: 1px solid lightgray;\n\n }\n span{\n color: black;\n }\n`;\n\nconst AddBtn = styled(Button)`\n margin-left: 15px;\n background-color: #2D6CCA;\n height: 38px;\n border-radius: 9px;\n span {\n color: white;\n }\n &:hover {\n background-color: #2D6CCA !important;\n }\n &:active {\n background-color: #2D6CCA !important;\n }\n &:focused {\n background-color: #2D6CCA !important;\n }\n`;\n\nconst StyleDragger = styled(Dragger)<{isError?: any}>`\nbackground-color: white !important;\nheight: 152px !important;\nborder-radius: 10px !important;\nborder-color: ${p=> p.isError?.length > 1 ? 'red' : ''} !important;\n.dragInner{\n p{\n text-align: center;\n font-size: 12px;\n span{\n color: #2D6CCA;\n }\n }\n svg{\n height: 36px;\n color: #4E5156;\n }\n}\n&:hover{\nborder-color: ${p=> p.isError?.length > 1 ? 'red' : '#d9d9d9'} !important;\n}\n`;\n","/* eslint-disable @next/next/no-img-element */\nimport React, {useState} from 'react';\nimport {Button} from 'antd';\nimport styles from './style.module.scss';\nimport {AtomicBlockUtils, EditorState} from 'draft-js';\nimport {Input} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\n\ninterface Props {\n updateText: (state: EditorState) => void;\n editorState: any;\n setShowNewUrlEditor:any;\n}\n\nexport const UploadURL = observer(({setShowNewUrlEditor, updateText, editorState}: Props) => {\n const {\n contentOptimizer: {\n currentPage: {currentEditorState},\n },\n } = useStore('');\n const imgRegex = /.(gif|png|apng|jpg|jpeg|tiff|webp|psd|indd|svg|bmp|xcf)((\\?|\\/).*)?$/;\n const [editorValues, setEditorValues] = useState({\n urlValue: '',\n altValue: '',\n height: 0,\n width: 0,\n });\n\n const imageFormat = url => editorValues.urlValue && !(imgRegex.test(url) && /^((http|https):\\/\\/)/.test(url));\n // Close anchor form popup by clicking anywhere on the screen\n\n const insertText = () => {\n const currentContent = currentEditorState.getCurrentContent();\n let imageUrl = '';\n const urlPattern = /^((http|https):\\/\\/)/;\n const formatUrl = urlPattern.test(editorValues.urlValue) ? editorValues.urlValue : `http://${editorValues.urlValue}`;\n imageUrl = formatUrl;\n if (imageUrl) {\n const contentStateWithEntity = currentContent.createEntity(\n 'customImage',\n 'IMMUTABLE',\n {src: imageUrl, alt: editorValues.altValue, height: editorValues.height ? `${editorValues.height}%` : '100%', width: editorValues.width ? `${editorValues.width}%` : '100%'},\n );\n const entityKey = contentStateWithEntity.getLastCreatedEntityKey();\n const newEditorState = EditorState.set(editorState, {\n currentContent: contentStateWithEntity,\n });\n return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');\n }\n return editorState;\n };\n\n const sendTextToEditor = () => {\n const imageUrl = editorValues.urlValue;\n if (imageUrl) {\n const contentState = insertText();\n updateText(contentState);\n setEditorValues({\n urlValue: '',\n altValue: '',\n height: 0,\n width: 0,\n });\n setShowNewUrlEditor(false);\n }\n };\n\n const ele = document.getElementById('numberHeight');\n ele?.addEventListener('keydown', function(e) {\n const keyCode = e.which || e.keyCode;\n if (keyCode === 69 || keyCode === 187 || keyCode === 189) {\n e.preventDefault();\n }\n });\n\n const closeModal = () => {\n setEditorValues({\n urlValue: '',\n altValue: '',\n height: 0,\n width: 0,\n });\n setShowNewUrlEditor(false);\n };\n\n return (<>\n Image source
\n {image ?\n\n
\n
:\n \n
\n {imgFile?.name}
\n \n
\n
\n \n Drag & Drop image here
or Click to browse\n
{isError}
}\nAlt tag (optional)
\n\n \n e.stopPropagation()}\n onChange={(e: any) =>\n setEditorValues({\n ...editorValues,\n width: e.target.value < 101 && e.target.value !== 'e' ? e.target.value : e.target.value !== 'e' ? editorValues.width : 0,\n })\n }\n type='number'\n value={editorValues.width}\n placeholder=''\n max={100}\n min={0}\n className={styles.urlInput}\n id='numberHeight'\n />\n \n
\n Width (optional)
\n\n \n e.stopPropagation()}\n onChange={(e: any) =>\n setEditorValues({\n ...editorValues,\n height: e.target.value < 101 && e.target.value !== 'e' ? e.target.value : e.target.value !== 'e' ? editorValues.height : 0,\n })\n }\n type='number'\n value={editorValues.height}\n placeholder=''\n className={styles.urlInput}\n max={100}\n min={0}\n id='numberHeight'\n />\n \n
\n Height (optional)
\nImage source
\nInvalid image URL!
}\nAlt tag (optional)
\n\n \n e.stopPropagation()}\n onChange={(e: any) =>\n setEditorValues({\n ...editorValues,\n width: e.target.value < 101 && e.target.value !== 'e' ? e.target.value : e.target.value !== 'e' ? editorValues.width : 0,\n })\n }\n type='number'\n value={editorValues.width}\n placeholder=''\n max={100}\n min={0}\n className={styles.urlInput}\n id='numberHeight'\n />\n \n
\n Width (optional)
\n\n \n e.stopPropagation()}\n onChange={(e: any) =>\n setEditorValues({\n ...editorValues,\n height: e.target.value < 101 && e.target.value !== 'e' ? e.target.value : e.target.value !== 'e' ? editorValues.height : 0,\n })\n }\n type='number'\n value={editorValues.height}\n placeholder=''\n className={styles.urlInput}\n max={100}\n min={0}\n id='numberHeight'\n />\n \n
\n Height (optional)
\n\n \n iconClicked(e)}\n className={classNames(styles.button, {\n [styles.active]: currentEditorState\n .getCurrentInlineStyle()\n .toJS()\n .includes('LINK'),\n })}\n >\n \n {showNewUrlEditor && (\n \n \n \n \n \n \n \n \n \n \n \n )}\n
\n );\n});\n\nconst FileBtn = styled(Button)`\n padding: 4px 6px 6px 6px;\n svg {\n height: 17px;\n color: gray;\n }\n`;\n\n\nconst StyledTabs = styled(Tabs)`\n .ant-tabs-ink-bar {\n background: rgba(45, 108, 202, 1); \n height: 5px !important;\n border-radius: 3px 3px 0px 0px;\n }\n .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n color: rgba(18, 18, 18, 1);\n }\n .ant-tabs-tab:hover {\n color: rgba(18, 18, 18, 1);\n }\n .ant-tabs-nav{\n margin-bottom: 5px !important;\n }\n`;\nconst StyledInputContainer = styled.div`\n .cloudIcon {\n height: 36px !important;\n }\n .trashIcon {\n width: 14px !important;\n height: 16px !important;\n cursor: pointer;\n &:hover{\n color: red;\n }\n }\n .styledImage {\n width: 38px !important;\n height: 38px !important;\n border-radius: 6px;\n }\n .imageContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 38px !important;\n height: 38px !important;\n border-radius: 6px; \n border: 2px solid;\n border-color: white;\n overflow: hidden;\n }\n`;\nconst Popup = styled.div`\n width: 376px !important;\n`;\n","/* eslint-disable @next/next/no-img-element */\nimport React, {useEffect, useRef, useState} from 'react';\nimport {Button, Tooltip} from 'antd';\nimport {EditorState} from 'draft-js';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faRectangleCode} from '@fortawesome/pro-regular-svg-icons';\nimport {AtomicBlockUtils} from 'draft-js';\nimport {Textarea} from '@/components/common-components/components/form/input/input';\nimport {LargeBadge} from '@/components/common-components/components/badge';\n\ninterface Props {\n updateText: (state: EditorState) => void;\n editorState: any;\n}\n\nexport const InsertIframe = observer(({updateText, editorState}: Props) => {\n const {\n contentOptimizer: {\n currentPage: {currentEditorState},\n },\n } = useStore('');\n const [showIframeEditor, setShowIframeEditor] = useState(false);\n const [url, setUrl] = useState('');\n const dateRef = useRef(null);\n\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (\n dateRef.current &&\n !dateRef.current.parentElement.contains(event.target)\n ) {\n setShowIframeEditor(false);\n }\n }\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [dateRef]);\n\n\n const iconClicked = (e?: any) => {\n e.preventDefault();\n setShowIframeEditor(true);\n };\n\n const ele = document.getElementById('numberHeight');\n ele?.addEventListener('keydown', function(e) {\n const keyCode = e.which || e.keyCode;\n if (keyCode === 69 || keyCode === 187 || keyCode === 189) {\n e.preventDefault();\n }\n });\n\n const insertText = contentData => {\n const currentContent = currentEditorState.getCurrentContent();\n if (contentData) {\n const contentStateWithEntity = currentContent.createEntity(\n 'iframe',\n 'IMMUTABLE',\n {\n content: contentData,\n },\n );\n const entityKey = contentStateWithEntity.getLastCreatedEntityKey();\n const newEditorState = EditorState.set(editorState, {\n currentContent: contentStateWithEntity,\n });\n return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');\n }\n\n return editorState;\n };\n\n const sendTextToEditor = async () => {\n const urlPattern = /^((http|https):\\/\\/)/;\n const iframeUrl = urlPattern.test(url) ? url : `http://${url}`;\n const iframeRegex = /Upload image
\n\n \n iconClicked(e)}\n >\n \n {showIframeEditor && (\n \n \n )}\n
\n );\n});\n\nconst FileBtn = styled(Button)`\ndisplay: flex;\nalign-items: center;\n padding: 4px 6px 6px 6px;\n svg {\n height: 17px;\n color: gray;\n }\n`;\n\nconst StyledPopup = styled.div`\n width: 490px !important;\n height: 235px;\n background: #fff;\n border: 1px solid #D2D2D2;\n border-radius: 5px;\n box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);\n display: flex;\n padding: 10px 10px 20px;\n position: absolute;\n width: 330px;\n z-index: 2;\n p {\n color: rgb(78, 81, 86);\n }\n\n .inputContainer {\n margin-left: 10px;\n margin-right: 10px;\n text-align: initial;\n width: 100%;\n\n svg {\n height: 12px;\n }\n\n .textLabel {\n color: #121212 !important;\n font-size: 12px;\n font-weight: 400;\n margin-bottom: 5px !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n margin-top: 10px !important;\n text-align: left;\n }\n\n p {\n margin-bottom: 0;\n margin-left: 0;\n margin-right: 0;\n margin-top: 10px;\n }\n }\n`;\n\nconst StyledUrlContainer = styled(Textarea)`\n width: 460px;\n height: 130px;\n border-radius: 8px;\n border: 1px solid #D2D2D2;\n padding: 10px 13px;\n text-align: left;\n line-height: 1.5;\n display: flex;\n align-items: flex-start;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n background-color: #FFFFFF;\n color: #121212;\n`;\nconst InsertButton = styled(Button)`\n background-color: #2D6CCA;\n padding: 5px 15px;\n border-radius: 6px;\n color: #FFFFFF;\n\n &:hover {\n background-color: #1E5BB8;\n color: #FFFFFF;\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(45, 108, 202, 0.5);\n }\n\n &:disabled {\n background-color: #A6C1E6;\n color: #FFFFFF;\n cursor: not-allowed;\n }\n`;\n\nconst CancelButton = styled(Button)`\n background-color: #F2F2F5;\n color: #4E5156;\n padding: 5px 15px;\n border-radius: 6px;\n\n &:hover {\n background-color: #E0E0E5;\n color: #4E5156;\n border: 1px solid transparent;\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(242, 242, 245, 0.5);\n border: 1px solid transparent;\n }\n`;\n","import React, {useCallback} from 'react';\nimport {EditorState, RichUtils} from 'draft-js';\nimport styles from '../style.module.scss';\nimport {Button, Tooltip, Select} from 'antd';\nimport {Button as V2Button} from '@/components/common-components/v2/Button';\nimport {Header} from './Header';\nimport {UnorderedList} from './UnorderedList';\nimport {CaretDownOutlined, RedoOutlined, UndoOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react-lite';\nimport {useStore} from '@/store/root-store';\nimport {Bold} from './Bold';\nimport {Italic} from './Italic';\nimport {Underline} from './Underline';\nimport {OrderedList} from './OrderedList';\nimport {Code} from './Code';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faChevronRight} from '@fortawesome/pro-light-svg-icons';\nimport {Anchor} from './Anchor';\nimport classNames from 'classnames';\nimport styled from 'styled-components';\nimport {AnchorRemove} from './AnchorRemove';\nimport {debounce, isNil} from 'lodash';\nimport {AddImage} from './AddImage/AddImage';\nimport {faWandMagicSparkles} from '@fortawesome/pro-duotone-svg-icons';\nimport {toJS} from 'mobx';\nimport {UploadImage} from './UploadImage';\nimport {InsertIframe} from './insertIframe';\n// import TableGrid from './TableGrid';\n\n\nexport const Toolkit: React.FC = observer(() => {\n const {contentOptimizer:\n {aiOutline: {\n setIsOpenAiWriterDrawer,\n setAiTemplate,\n aiTemplatesController,\n setAiWriter,\n }, currentPage: {\n showAiBanner,\n isTaActive,\n setIsSideBarHidden,\n setIsUnspashDrawerOpen,\n isSideBarHidden,\n aiTooltip,\n analytics,\n setAiTooltip,\n editContent,\n focusTermsClassNames,\n isExportingPage,\n setCurrentEditorState,\n currentEditorState,\n setZoomLevel,\n zoomLevel,\n newPage,\n currentStep,\n isPublic,\n updatingFolder,\n }}} = useStore('');\n const {settings: {customer: {profile: {isLinkgraph}}}} = useStore('');\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n editContent(state, isNewDecorations);\n\n if (aiTooltip.show) {\n setAiTooltip({...aiTooltip, show: false, isLinkEdit: false});\n }\n }, 2000);\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const onEditorChange = (editorState: EditorState, isNewDecorations: boolean = false) => {\n setCurrentEditorState(editorState);\n\n // We are comparing current editor state with udpated one to make sure the flow only triggers once there is an actual content change (adding removing of words, formatting, linkjng etc.)\n debouncedUpdate(editorState, analytics?.focusTerms, focusTermsClassNames, isNewDecorations);\n };\n\n const blockTypeEnhancement = (block: string) => {\n onEditorChange(RichUtils.toggleBlockType(currentEditorState, block), true);\n };\n\n const inlineStyleEnhancement = (style: string) => {\n onEditorChange(RichUtils.toggleInlineStyle(currentEditorState, style), true);\n };\n\n const entityTypeEnhancement = (selection: any, entityKey: string) => {\n onEditorChange(RichUtils.toggleLink(currentEditorState, selection, entityKey), true);\n };\n\n const updateText = (newState: EditorState) => {\n onEditorChange(newState, true);\n };\n\n const undo = () => {\n onEditorChange(EditorState.undo(currentEditorState), true);\n };\n\n const redo = () => {\n onEditorChange(EditorState.redo(currentEditorState), true);\n };\n\n return (\n \n setUrl(e.target.value)}> \n
\n iFrame URL
\n\n sendTextToEditor()}>Insert iFrame \n setShowIframeEditor(false)}>Cancel \n
\n \n
\n\n );\n});\n\nconst SelectStyled = styled(Select)`\n font-size: 12px;\n .ant-select-selector {\n border: 0 !important;\n }\n`;\n","import {useState, useEffect, useRef} from 'react';\nimport styles from '../../style.module.scss';\nimport {TargetKeywordsType} from '@/store/content-optimizer/TargetKeywordsModel';\nimport {CaretDownOutlined} from '@ant-design/icons';\nimport {\n Form,\n Typography,\n Progress,\n Popover,\n Row,\n Col,\n Tooltip,\n} from 'antd';\nimport {Button, CommonInput, SkeletonHorizontalLoaderGray} from '@/components/common-components/components';\nimport isEmpty from 'lodash/isEmpty';\nimport {Globe} from 'react-feather';\nimport Flag from '@/components/common-components/components/flag';\nimport {useTranslation} from 'next-i18next';\nimport {CurrentPageStore, targetKeywords} from '@/store/content-optimizer/currentPage';\nimport {getProgressColor, getInverseProgressColor} from '@/utils/colors';\nimport {useStore} from '@/store/root-store';\nimport debounce from 'lodash/debounce';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowLeft, faGlobe, faInfoCircle, faMapMarkerAlt, faPen, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport classNames from 'classnames';\nimport {formatNumber} from '@/utils/number';\nimport {\n // faChartBar,\n faCheck, faSearch, faTrash} from '@fortawesome/pro-regular-svg-icons';\nimport {observer} from 'mobx-react-lite';\nimport {SCA_PAGE_UPDATE_KEYWORD_LOCATION} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {faLocationDot} from '@fortawesome/pro-solid-svg-icons';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../EditorSection/content-editor/utils';\n\n\ninterface Props {\n kw: TargetKeywordsType;\n idx: number;\n store: CurrentPageStore;\n keywordsFormProps?: targetKeywords;\n editKeywords: (keywords: string[]) => Promise\n \n \n \n \n \n \n \n setZoomLevel(value)} suffixIcon={50% \n 75% \n 90% \n 100% \n 120% \n 150% \n 200% \n \n \n \n {isLinkgraph && }\n {/*
\n \n \n {\n setIsOpenAiWriterDrawer(true);\n setAiWriter({\n showForm: true,\n templateUsed: 'new-ai-writer',\n templateIcon: 'hand-write-icon-color.svg',\n templateName: 'Complete SEO Article',\n templateDesc: 'Generate a full article from just a keyword (topic) or customize the article based on your ranking goals.',\n isStandaloneTool: false,\n });\n setAiTemplate({\n ...toJS(aiTemplatesController ?? []),\n isUseMask: true,\n });\n }}>\n }\n\n \n \n\n
\n setIsSideBarHidden(!isSideBarHidden)}>\n
\n \n {isKwNameEdit ? <>\n \n :\n <>\n \n {t('keyword-difficulty')} - {`${t('score-from')} \n ${t('how-difficulty-rank')} \n ${t('organic-search-results')} \n ${t('authoritativeness')} \n ${t('first-page-google')}`}\n
\n }\n >\n {kw.serpTaskStatus && kw.serpTaskStatus === 'SUCCESS' ?\n \n
\n {kw.serpTaskStatus && kw.serpTaskStatus === 'FAILURE' ?\n \n
\n {!isPublic &&\n \n\n Precise Location:{kw.location ? kw.location : kw.countryCode ? getSpecificCountryByCode(kw.countryCode.toUpperCase())?.name : 'Worldwide'}}\n placement={'top'}\n overlayInnerStyle={{backgroundColor: '#121212', borderRadius: 5, width: 'max-content'}}>\n \n\n\n {/* \n {kw.locationId ? kw.locationId === 2840 ? 'United States' : kw.location : kw.countryCode ? countries[kw.countryCode]?.name ? countries[kw.countryCode]?.name : kw.countryCode : (<> kwClickHandler(kw.keyword)} icon={faExternalLinkSquare} className={styles.keywordDrawerIcon} /> : null} */}\n
\n\n \n \n \n
\n isPublic ? {} : kwClickHandler(kw.keyword)}>{kw.keyword}
\n \n \n {/* setIsLocationPopoverVisible(visible)}\n visible={showLocationSelector}\n content={\n
}\n\n\n kwClickHandler(kw.keyword)}>\n \n
*/}\n\n \n {isEditDefaultLocation && <>\n {\n e.stopPropagation();\n setIsEditDefaultLocation(false);\n }}/>\n SELECT DEFAULT LOCATION\n }\n \n \n
\n }\n >\n \n searchForLocation(e.target.value)}\n className={styles.customInput}\n inputType='text'\n variant='transparent'\n placeholder={'Search for location'} />\n {!isEditDefaultLocation && \n }\n
\n \n \n \n \n \n
\n <>\n \n Worldwide )}\n \n
\n {`Default location. `}{!isEditDefaultLocation && {\n e.stopPropagation();\n setIsEditDefaultLocation(true);\n }}>Change?}\n \n \n {\n // if this location in list matches either default or current kw location, disable onClickEvent\n if (isEditDefaultLocation && (store.content.locationId || store.content.countryCode) || !isEditDefaultLocation) {\n locationSelected('', null, null, '');\n }\n }}>\n Worldwide \n {isEditDefaultLocation && !store.content.locationId || !isEditDefaultLocation && !kw.locationId && !kw.countryCode ? {\n // if this location in list matches either default or current kw location, disable onClickEvent\n if (isEditDefaultLocation && store.content.locationId !== country.locationId || !isEditDefaultLocation && country.locationId === 2840 || country.locationId !== kw.locationId) {\n locationSelected(country.location, country.locationId === 2840 ? null : country.locationId, country.reach, country.locationId === 2840 ? 'US' : country.countryCode);\n }\n }}>\n
;\n }) : {\n // if this location in list matches either default or current kw location, disable onClickEvent\n if (isEditDefaultLocation && (store.content.locationId != 2840) || !isEditDefaultLocation) {\n locationSelected('', null, null, 'US');\n }\n }}>\n
\n\n Default location.
: null}\n \nDefault location.
: null}\n \n {\n e.stopPropagation();\n openLocationSelector();\n }}>\n
\n \n {/* eslint-disable-next-line */}\n {kw.serpTaskStatus && kw.serpTaskStatus === 'SUCCESS' || kw.serpTaskStatus === 'FAILURE' ?\n {\n setShowLocationSelector(false);\n setIsKwNameEdit(true);\n form.setFieldsValue(kw);\n }}>\n
: null}\n\n removeTargetKeywords()}>\n
\n {t('failed-to-load')}
:\n\n \n {/* \n {t('search-volume')} - {t('global-monthly')}
*/}\n {/* {t('search-volume-keyword')}
*/}\n
\n }\n >\n\n {kw.serpTaskStatus && kw.serpTaskStatus === 'SUCCESS' ?\n */}\n {/* {t('search-volume-keyword')}
*/}\n
\n Location\n SV\n
\n {store.content.countryCode && store.content.countryCode != '' && <>\n \n \n \n
:\n \n \n SV: {searchVolumeFormatter(kw?.sv)}\n \n
\n\n \n \n
: \n \n {t('kd')}: {kw?.kd ?? '-'}\n \n
\n \n \n
:\n \n \n {t('cpc')}: {costPerClickFormatter(kw?.cpc)}\n \n
\n\n \n {!isPublic && currentPage.feTargetKeywords?.length >= 15 ? \n :\n !isPublic &&
\n\n\n \n\n :\n <>\n \n
\n \n
\n \n \n
\n \n {(isAddingNewKw || !currentPage.feTargetKeywords?.length) ?\n <>\n
\n\n setIsAddingNewKw(true)}>\n
\n }\n }\n {currentPage?.feTargetKeywords &&\n // if we want to reverse we want to update index count below as well\n // currentPage?.feTargetKeywords?.reverse()?.map((kw, index)\n currentPage?.feTargetKeywords?.map((kw, index) => (\n \n \n
\n \n
\n Add keyword
\n \n
\n {t('quota')}
\n {numberWithCommas(quotaUtilization?.ca?.allowedFocusTerms?.consumed)} / {numberWithCommas(quotaUtilization?.ca?.allowedFocusTerms?.total)}
\n Loading target keywords...
: null} */}\n \n );\n});\n","import {useState} from 'react';\nimport styles from '../../style.module.scss';\nimport {formatNumber} from '@/utils/number';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SuggestedKeywordType} from '@/store/content-optimizer/SuggestedKeywordsModel';\nimport {\n Tooltip,\n} from 'antd';\nimport {observer} from 'mobx-react';\n\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_ADD_KEYWORD_SUGGESTION} from '@/constants/events';\nimport {useStore} from '@/store/root-store';\n\ninterface Props {\n kw: SuggestedKeywordType;\n store: CurrentPageStore;\n getCustomerQuota?: () => {};\n showSidebarPaymentDrawer?: any;\n quotaUtilization?: any;\n}\n\nexport const SuggestedKeywordCard = observer(({kw, store, getCustomerQuota, showSidebarPaymentDrawer, quotaUtilization}: Props) => {\n const {contentOptimizer: {currentPage: {isPublic}}} = useStore('');\n const [isRemoving, setIsRemoving] = useState(false);\n\n\n const addSuggestedKwToTargetKw = async (passedKw: string) => {\n if (!passedKw) return;\n if (!store.feTargetKeywords || store.feTargetKeywords?.length >= 15) return;\n if (store.feTargetKeywords?.filter(kw => kw.keyword === passedKw).length > 0) {\n return;\n }\n\n let stagedForAddingKw;\n\n if (store.content.locationId && store.content.location) {\n stagedForAddingKw = {\n keyword: passedKw,\n countryCode: '',\n locationId: store.content.locationId,\n location: store.content.location,\n };\n } else if (store.content.countryCode) {\n stagedForAddingKw = {\n keyword: passedKw,\n countryCode: store.content.countryCode,\n locationId: null,\n location: null,\n };\n } else if (!store.content.locationId && !store.content.countryCode) {\n stagedForAddingKw = {\n keyword: passedKw,\n countryCode: '',\n locationId: null,\n location: null,\n };\n }\n const formatArray = [...store.feTargetKeywords, stagedForAddingKw];\n\n store.updateFeTargetKeywords(formatArray);\n\n try {\n await store?.editKeywords(stagedForAddingKw, 'add');\n getCustomerQuota();\n } catch (err) {\n if (err?.response?.status === 429) {\n showSidebarPaymentDrawer(null, {title: 'You need more Content Genius focus terms quota to continue', subtitle: '', text: `Current limit: ${quotaUtilization?.ca?.allowedFocusTerms?.total} lookups`});\n }\n return Promise.reject(err);\n }\n\n\n MixPanel.track(SCA_PAGE_ADD_KEYWORD_SUGGESTION, {\n 'suggestedKeyword': passedKw,\n 'description': 'Added new keyword suggestion',\n });\n };\n\n const removeTargetKeyword = (passedKw: string) => {\n store.removeSuggestedKeyword(passedKw);\n };\n\n return \n \n {store.feTargetKeywords?.length >= 15 && \n
;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useRef} from 'react';\nimport {useTranslation} from 'react-i18next';\nimport {isScaPublicPage} from '../../../EditorSection/content-editor/utils';\nimport styles from '../style.module.scss';\nimport {SuggestedKeywordCard} from './SuggestedKeywordCard';\n\n\ninterface Props {\n store: CurrentPageStore;\n getCustomerQuota?: () => {};\n showSidebarPaymentDrawer?: any;\n quotaUtilization?: any;\n}\n\nexport const KeywordSuggestions = observer(({store, getCustomerQuota, showSidebarPaymentDrawer, quotaUtilization}: Props) => {\n const {keywordResearcherV2: {postNewKeywords, keywordDetails: {loadKeywordDetailList, loadKeywordDetails, setDetailsRepolling}}} = useStore('');\n const {t} = useTranslation('common');\n\n const keywordSuggestionsContainer = useRef(null);\n\n useEffect(() => {\n const addHorizontalScroll = e => {\n // If we are scrolling inside suggestions container\n if (keywordSuggestionsContainer.current && keywordSuggestionsContainer.current.contains(e.target)) {\n // Disable vertical scroll for main container\n const topScroll = window.scrollY;\n const leftScroll = window.scrollX;\n window.onscroll = e => {\n e.preventDefault();\n window.scrollTo(leftScroll, topScroll);\n };\n // Scroll suggestions container\n if (e.deltaY > 0) {\n if (e.deltaY > 50) {\n keywordSuggestionsContainer.current.scrollLeft += 30;\n } else {\n keywordSuggestionsContainer.current.scrollLeft += e.deltaY;\n }\n } else {\n if ((e.deltaY * -1) > 50) {\n keywordSuggestionsContainer.current.scrollLeft -= 30;\n } else {\n keywordSuggestionsContainer.current.scrollLeft -= (e.deltaY * -1);\n }\n }\n } else if (keywordSuggestionsContainer.current && !keywordSuggestionsContainer.current.contains(e.target)) {\n // Enable vertical scroll for main container\n window.onscroll = () => {};\n }\n };\n\n document.addEventListener('wheel', addHorizontalScroll);\n\n return () => {\n document.removeEventListener('wheel', addHorizontalScroll);\n };\n }, [keywordSuggestionsContainer]);\n\n\n const getKwSuggestionsMessage = () => {\n if (store.isFetchingSuggestedKw) {\n return t('loading-kw-suggestions');\n }\n\n if (!store.content?.editorText?.length && !store?.feTargetKeywords?.length) {\n return t('start-writing-or-add-target-kw');\n }\n\n if (store.content?.editorText?.length && !store?.feTargetKeywords?.length) {\n return t('add-one-target-keyword');\n }\n\n if (!store.content?.editorText?.length && store?.feTargetKeywords?.length) {\n return t('start-writing-content-to-see-kw-suggestions');\n }\n return t('edit-content-or-add-new-target-kw');\n // return t('could-not-load-target-keywords');\n };\n\n const postAndGetData = async (keyword, countryCode, locationId) => {\n const data = {'name': keyword, 'keywords': [`${keyword}`], 'is_recent_search': true};\n if (locationId) {\n data['location_id'] = locationId;\n } else {\n data['country_code'] = countryCode ? countryCode : '';\n }\n const response = await postNewKeywords(data);\n setDetailsRepolling(true);\n if (response?.id && response?.keywords?.length) {\n loadKeywordDetailList(response.id);\n loadKeywordDetails(response?.id, response?.keywords[0], response?.locationId, response?.countryCode);\n }\n };\n\n const showAllSuggestionsHandler = () => {\n if (isScaPublicPage()) return;\n if (store?.content?.targetKeywords?.length) {\n const keyword = [...store.content.targetKeywords][0]?.keyword;\n\n const countryCode = keyword?.countryCode || '';\n const location = keyword?.locationId || null;\n store.setIsDrawerFromCa(true);\n store.setActiveTargetKw(keyword);\n store.setIsOpenKeywordDrawer(true);\n postAndGetData(keyword, countryCode, location);\n }\n };\n\n\n return {`You've reached the maximum number of 15 target keywords per article.`}
}\n \n {`Search Volume: ${formatNumber(kw.sv)}`}
\n {`Cost per Click: $${Math.round(kw.cpc)}`}\n
\n }>\n \n {`Cost per Click: $${Math.round(kw.cpc)}`}\n
isPublic ? {} : addSuggestedKwToTargetKw(kw.keyword)}>\n
\n isPublic ? {} : addSuggestedKwToTargetKw(kw.keyword)}>\n
\n {kw.keyword}
\n\n {/* {formatNumber(kw.sv)} ‧ ${Math.round(kw.cpc)} */}\n {!isPublic &&\n \n\n {('+')}{('Add')}\n {\n e.stopPropagation();\n setIsRemoving(true);\n removeTargetKeyword(kw.keyword);\n }}>x\n
}\n \n {store.content.kwSuggestions.length ?
;\n});\n","import {faChevronDown} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport React, {\n useState,\n useRef,\n} from 'react';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {TargetKeywords} from './TargetKeywords/TargetKeywords';\nimport styles from './style.module.scss';\nimport classNames from 'classnames';\nimport {KeywordSuggestions} from './KeywordSuggestions/KeywordSuggestions';\nimport {observer} from 'mobx-react';\nimport {\n Tooltip,\n} from 'antd';\nimport {\n faChevronsDown,\n faChevronUp,\n} from '@fortawesome/pro-regular-svg-icons';\n\ninterface Props {\n updateKeywordsRef: () => void;\n}\n\nexport const TargetKeywordsAndSuggestions = observer(({updateKeywordsRef}: Props) => {\n const [isExpanded, setIsExpanded] = useState<'collapsed' | 'expanded' | 'fullExpanded'>('expanded');\n\n const containerRef = useRef(null);\n\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {getCustomerQuota, profile: {quotaUtilization}}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n\n return showAllSuggestionsHandler()}>\n {`All Suggested Keywords (${store.content.kwSuggestions.length}):`}\n
: null}\n \n {store.content.kwSuggestions.length ? store.content.kwSuggestions.map((kw, index) => {\n if (kw.keyword && index < 6) {\n return
\n {getKwSuggestionsMessage()}
}\n\n \n {\n setIsExpanded('expanded');\n setTimeout(() => {\n updateKeywordsRef();\n }, 300);\n }}>\n
\n }\n {isExpanded != 'collapsed' && \n
\n {isExpanded == 'collapsed' && \n
\n\n \n\n
\n \n\n
\n \n copyMetaHandler(idea.metaTitle, idea.metaDesc)} style={{marginTop: 'auto', marginBottom: 'auto', marginLeft: 10, fontSize: 16, cursor: 'pointer'}}/>\n
\n setShowAiMetaResults(false)}> Back to Meta Details
\n \n
\n\n Meta Data {loading &&
\n \n \n AI Generate \n :\n aiMetaDataHandler()} disabled={loading}>AI Generate }\n
\n {aiSuggestionMsg}
\n {metaData.length ?\n setShowAiMetaResults(true)} style={{color: '#2D6CCA', fontSize: 12, cursor: 'pointer', marginRight: 14}}>View all
:\n (!feTargetKeywords?.length && !checkPageTitle(content.title)) ? \n {\n setCustomMetaTitle(e.target.value);\n }} />\n
\n \n
\n Meta Title
{generateSingleMetaIcon('metaTitle', customMetaTitle)}\n \n {\n setCustomMetaDesc(e.target.value);\n }}/>\n
\n\n \n
\n Meta Description
{generateSingleMetaIcon('metaDesc', customMetaDesc)}\n \n \n {`Last sync: ${moment(syncedAt).format('ll')} at ${moment(syncedAt).format('LT')}`}\n \n \n {getSyncedPill(synced)}\n \n
: null}\n {(publishedAtUrl && postStatus !== 'draft') ? \n \n \n
:\n null}\n \n {\n form.resetFields();\n setShowWpFormType({\n syncWp: synchronizeType == 'wp',\n syncShopify: synchronizeType == 'shopify',\n createNewWp: synchronizeType == 'wp' ? false : true,\n createNewShopify: synchronizeType == 'shopify' ? false : true,\n });\n }} checked={synchronizeType == 'wp' ? showWpFormType.syncWp : showWpFormType.syncShopify}>{synchronizeType == 'wp' ? 'WordPress' : 'Shopify'} Synchronize \n {synchronizeType == 'wp' && setShowWpVideo(!showWpVideo)}>\n }\n
\n\n \n value === false) || postingData || creatingPage || creatingBlog} type='default' variant='solid' color='blue' htmlType='submit'>{syncBtnLabel} \n {(creatingPage || creatingBlog || postingData) &&
\n \n \n \n
:\n null}\n {\n setShowDataModal(false);\n setShowAddSiteModal(true);\n setShowIndividualPopover('');\n }}>+ Add site
}\n \n {synchronizeType == 'wp' && \n Post Status \n \n \n {\n setNewBtnLabelOptions({\n ...newBtnLabelOptions,\n action: 'Create',\n status: 'Draft',\n });\n }}>Draft \n {\n setNewBtnLabelOptions({\n ...newBtnLabelOptions,\n action: 'Publish',\n status: '',\n });\n }}>Publish \n \n \n }\n\n \n Post Type \n \n \n {\n setNewBtnLabelOptions({\n ...newBtnLabelOptions,\n ...(synchronizeType == 'shopify' && {status: ''}),\n type: 'Blog Post',\n });\n }}>Blog Post \n {\n setNewBtnLabelOptions({\n ...newBtnLabelOptions,\n ...(synchronizeType == 'shopify' && {status: ''}),\n type: 'Page',\n });\n }}>Page \n \n \n \n\n {synchronizeType == 'shopify' && form.getFieldValue('wpPostType') == 'blog' && \n Blog \n \n setSelectedUser(id)}\n >\n {blogs?.map((blog, i) => )}\n \n \n }\n\n {synchronizeType == 'wp' && \n \n Permalink URL\n {synchronizeType == 'wp' && (Optional) }\n \n \n \n \n }\n\n {synchronizeType == 'wp' ? \n Author \n \n setSelectedUser(id)}\n >\n {selectedWpSiteUsers.map((user, i) => )}\n \n \n : \n \n Author\n \n \n \n \n }\n\n {synchronizeType == 'wp' ? \n Category \n \n \n \n : \n \n Tags\n \n \n \n \n }\n\n {parent?.length ? (\n \n Parent \n \n \n \n \n ) : null}\n AI in progress
Please wait till AI generate the content
: content.wordCount == 0 ? `Empty content can't be ${newBtnLabelOptions?.action == 'Create' ? 'draft' : 'publish'}` : ''}>\n Please wait till AI generate the content
\n {newBtnLabel} \n {(creatingPage || creatingBlog || postingData) &&
\n : null}\n \n
\n \n
\n {`We're unable to sync with your WordPress site.`}
\n Check your configuration {isGHLAccount ? '' : <>or\n openLiveChat()}>\n reach out to support\n }\n
\n \n
\n \n
\n {`We're unable to sync with your Shopify site.`}
\n Check your configuration {isGHLAccount ? '' : <>or\n openLiveChat()}>\n reach out to support\n }\n
\n \n updateUrlHandler(false, keepContentModal.url, keepContentModal?.renderWithbrowser)}>No, keep existing content \n updateUrlHandler(true, keepContentModal.url, keepContentModal?.renderWithbrowser)}>Yes, overwrite content \n
\n {t('updating-url-data')}
\n \n {/* this closes the modal */}\n setShowDownloadConfirmationModal(false)}>{t('cancel')} \n {\n {/* we are passing true as a second param, which will tell the BE that we want to override the content.\n very imporant, do not change to false*/}\n uploadFromUrl(content?.importedFromUrl || '', true, renderWithbrowser);\n setShowDownloadConfirmationModal(false);\n }}>{`Update & Import`} \n
\n\n \n You are about to update the content of URL
\n \n setShowQuickSyncModal(false)}>{t('cancel')} \n {\n publishWpPageHandler();\n setShowQuickSyncModal(false);\n }}>{`Update`} \n
\n\n \n \n \n
\n\n \n \n\n { } : e => {\n onChange(e);\n debouncedChange(e);\n calculateWidth();\n }}\n onBlur={isPublic ? () => { } : e => {\n onChange(e);\n debouncedChangeFocusOut(e);\n calculateWidth();\n }}\n readOnly={isPublic}\n />\n \n\n
\n \n \n
\n\n \n
\n {viewers > 1 && !newPage ?\n {\n if (content?.importedFromUrl) {\n window.open(url, '_blank');\n }\n }}>\n {content?.importedFromUrl ? url : 'Page created from scratch '}\n
\n \n {!newPage &&
\n \n {!isPublic && {renderForm()}} placement={'bottomRight'} trigger={['click']}>\n }\n {!isPublic &&\n \n content.importedFromUrl ? setShowDownloadConfirmationModal(true) : {}}/>\n }\n\n\n {!isPublic ?\n !postingData ? \n {\n if (!content.wpPublishedAtUrl) return;\n setShowQuickSyncModal(true);\n }} style={!content.wpPublishedAtUrl ? {opacity: '50%'} : {}}/>\n : \n \n option.country.toLowerCase().indexOf(input.toLowerCase()) >= 0\n }\n onMouseEnter={()=> \n
}\n\n setEditPageUrl(!editPageUrl)}>\n
\n \n
\n : null}\n \n );\n },\n);\n\nconst EditUrlContainer = styled.div`\n width: 380px;\n height: auto;\n background: #FFFFFF;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n border-radius: 5px;\n padding: 15px 10px;\n \n .ant-form-item {\n margin-bottom: 0 !important;\n margin-top: 8px !important;\n input {\n height: 32px !important;\n }\n }\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\nmargin-top: 10px;\n.ant-checkbox {\n .ant-checkbox-inner {\n border: 1px solid #7f4ead;\n border-radius: 5px;\n }\n\n &:hover {\n .ant-checkbox-inner {\n border: 1px solid #7f4ead;\n }\n }\n\n &.ant-checkbox-checked {\n .ant-checkbox-inner {\n background-color: #7f4ead;\n }\n\n &::after {\n border: 1px solid #7f4ead;\n }\n }\n}\n\n`;\nconst EditUrlModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\nconst EditUrlModalSub = styled.div`\n color: #4E5156;\n`;\n\nconst EditUrlLink = styled.div`\n color: #2e6cca;\n cursor: pointer;\n display: inline-block;\n margin-left: 5px;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst EditUrlModalButtons = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst dropdownColors = {\n grey: {\n color: '#333',\n backgroundColor: '#F9F9FB',\n listItemsBackgroundColor: '#F9F9FB',\n borderColor: '#F9F9FB',\n },\n};\n\n\nconst StyledSelect = styled(Select)<{variant?: string; borderRadius?: string; width?: string; height?: string; marginLeft?: string}>`\n color:${ p => dropdownColors[p.variant].color};\n background-color: ${ p => dropdownColors[p.variant].backgroundColor} !important;\n border-radius: ${ p => p.borderRadius ? p.borderRadius : '5px'} !important;\n .ant-select-selector {\n max-width:180px !important;\n min-width: ${p => p.width ? p.width : '168px'} !important;\n width: ${p => p.width ? p.width : '168px'} !important;\n height: ${p => p.height ? p.height : '38px'} !important;\n border-radius: ${ p => p.borderRadius ? p.borderRadius : '5px'} !important;\n background-color: ${ p => dropdownColors[p.variant].backgroundColor} !important;\n border-color: #E8E8E8 !important;\n padding: 1px 8px 2px 11px !important;\n cursor: pointer !important;\n }\n .ant-select-selection-search {\n padding: 0px !important;\n\n .ant-select-selection-search-input{\n height: 22px !important;\n }\n }\n\n .ant-select-arrow {\n color:${ p => dropdownColors[p.variant].color};\n }\n .ant-select-item-option-selected:not(.ant-select-item-option-disabled){\n background-color: ${ p => dropdownColors[p.variant].backgroundColor} !important;\n border-color: ${ p => dropdownColors[p.variant].borderColor} !important\n }\n .ant-select-selection-item {\n display: flex;\n align-items: center;\n }\n\n`;\n","import {useEffect, useState, useRef} from 'react';\nimport {useRouter} from 'next/router';\nimport {PageHeader, Button, Modal, Spin, Tooltip} from 'antd';\nimport {PAGES_API} from '@/api/content-optimizer';\n// import {BaseApi} from '@/api/base-api';\n// import {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {GoogleOutlined, LoadingOutlined} from '@ant-design/icons';\nimport {TitleEditor} from '../title-editor';\nimport DeleteModal from '@/components/dashboard/pages/landing-page-optimizer/blocks/delete-modal';\nimport classNames from 'classnames';\nimport {observer} from 'mobx-react-lite';\n\nimport {useStore} from '@/store/root-store';\nimport styles from './index.module.scss';\nimport {useTranslation} from 'next-i18next';\nimport {routes} from '@/utils/const';\nimport {\n CommonInput, Button as Btn,\n} from '@/components/common-components/components/index';\nimport {Form} from 'antd';\nimport isURL from 'validator/lib/isURL';\nimport ButtonComponent from '@/components/common-components/components/button-component';\nimport {faArrowLeft, faEllipsisV, faFileArrowDown, faShareNodes} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_CREATE_PAGE, SCA_PAGE_EXPORT_TO_DOCS} from '@/constants/events';\nimport {isNil} from 'lodash';\nimport {Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport styled from 'styled-components';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {notification} from '@/utils/notification-v2';\n\nconst useClickedOnPageHandler = (ref, callback) => {\n useEffect(() => {\n const handleClickOutside = event => {\n event.stopPropagation();\n\n if (ref.current && !ref.current.contains(event.target)) {\n callback();\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [ref]);\n};\n\n\nexport const BreadCrumb = observer(() => {\n const router = useRouter();\n const [isKebabOpen, setIsKebabOpen] = useState(false);\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [exportToDocsLoading, setExportToDocsLoading] = useState(false);\n const {t} = useTranslation('common');\n const [form] = Form.useForm<{ url: string }>();\n const dropdownRef = useRef(null);\n const headerTopRef = useRef(null);\n const antIcon = \n setCollapsedViewers(!collapsedViewers)}>\n \n
\n \n {/*
\n }\n />\n \n {/* {\n shareDialog.openDialog();\n }}> \n \n exportToGoogleDocs()}>\n {exportToDocsLoading ?\n \n {\n e.stopPropagation();\n setIsKebabOpen(!isKebabOpen);\n }}\n className={styles.kebab}\n >\n
\n\n\n \n {\n const googledocLink = await exportToGoogledoc();\n if (googledocLink) {\n MixPanel.track(SCA_PAGE_EXPORT_TO_DOCS, {\n 'googleDocsLink': googledocLink,\n 'pageId': content.uuid,\n 'description': 'Page is exported to google docs',\n });\n\n window.open(googledocLink);\n }\n }}\n className={styles.exportToDocsButton}\n >\n {isExporting ? \n \n }\n
\n \n \n \n \n
*/}\n {/* {\n e.preventDefault();\n onExportEntirePage();\n }}\n >Export to PNG\n
\n \n \n Export to XLS\n
\n exportToGoogleDocs()}>\n Export Content Brief {exportToDocsLoading ?
*/}\n {/* \n \n Export to XLS\n
*/}\n \n \n \n {content.isOwner ? : {t('import-article-new-url')}
\n\n \n
\n \n \n
}\n ;\n});\n","import {useStore} from '@/store/root-store';\nimport {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport parse from 'html-react-parser';\nimport classNames from 'classnames';\nimport {useEffect, useState} from 'react';\nimport {opaqueColor} from '@/utils/colors';\nimport {faArrowDown, faArrowUp, faRotateLeft} from '@fortawesome/pro-solid-svg-icons';\nimport {Button, GrayButton} from '@/components/common-components/v2';\nimport {toJS} from 'mobx';\nimport {Divider} from 'antd';\n\nexport const TextSuggestions = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n content,\n setIsTaActive,\n setFocusTermsForInsertion,\n stagingTaSuggestions,\n taActiveTerm,\n setTaActiveTerm,\n setStagingTaSuggestions,\n isTaActive,\n highlightedNodeId,\n setHighlightedNodeId,\n showOriginalBlockId,\n setShowOriginalBlockId,\n updatingTa,\n clearAllTaData,\n },\n }} = useStore('');\n\n const [totalOccurances, setTotalOccurances] = useState\n
\n ')) {\n return 'p';\n }\n if (text.startsWith('
')) {\n return 'h1';\n }\n if (text.startsWith('')) {\n return 'h2';\n }\n if (text.startsWith('')) {\n return 'h3';\n }\n if (text.startsWith('')) {\n return 'h4';\n }\n if (text.startsWith('')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (taActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (taActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo'| 'acceptAll') => {\n let prepDataArr = toJS(stagingTaSuggestions);\n if (action == 'acceptAll') {\n prepDataArr = prepDataArr?.map(item => ({...item, status: 'accepted'}));\n } else {\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n }\n setStagingTaSuggestions(prepDataArr);\n };\n\n const onDotClickHandler = (order: number) => {\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: order,\n };\n\n setShowOriginalBlockId(null);\n\n setTaActiveTerm(updatedValues);\n };\n\n const checkCurBlockStatus = () => {\n const highlightedNode = document.querySelector(`[data-block-index='${highlightedNodeId}']`);\n let elementStatus = 'default';\n let blockIndex = null;\n\n if (highlightedNode) {\n blockIndex = (highlightedNode as HTMLElement).dataset?.blockIndex;\n\n if (!blockIndex) {\n elementStatus = 'default';\n } else {\n elementStatus = stagingTaSuggestions?.find(item => item.itemIndex == blockIndex)?.status;\n }\n }\n\n if (elementStatus == 'default') {\n return <>\n \n \n onBlockStatusChange('dismiss')}>Dismiss \n ;\n }\n if (elementStatus == 'accepted') {\n return <>\n Accepted\n onBlockStatusChange('undo')} style={{color: '#fff', padding: '5px 15px'}}>Undo \n ;\n }\n if (elementStatus == 'dismissed') {\n return <>\n Dismissed\n onBlockStatusChange('undo')} style={{color: '#fff', padding: '5px 15px'}}>Undo \n ;\n }\n };\n\n const updateImageStyle = html => {\n if (html.includes('figure')) {\n // the following code is setting height and width to 100% in case of initial as this sets defaults and disturb ui\n const newHtml = html.replaceAll('initial', '100%');\n return newHtml;\n } else return html;\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n if (block.isSuggestion) {\n return (\n <>\n term.replaceAll(' ', '-'))), block.status)}>\n {showOriginalBlockId && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {showOriginalBlockId && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(updateImageStyle(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' ')), options)}\n ;\n }\n })}\n\n\n {taActiveTerm?.term ? \n {taActiveTerm?.term} \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(taActiveTerm?.term))?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return onDotClickHandler(idx)}/>;\n if (suggestion.status == 'dismissed') return onDotClickHandler(idx)}/>;\n if (suggestion.status == 'accepted') return onDotClickHandler(idx)}/>;\n })}\n \n {\n if (taActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n }}>\n 0 ? totalOccurances - 1 : 0)}\n onClick={() => {\n if (taActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n }}>\n \n {checkCurBlockStatus()}\n \n \n : null}\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsTaActive(false);\n clearAllTaData();\n setFocusTermsForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n {blocksRenderer(stagingTaSuggestions)}\n\n ;\n});\nconst ButtonsContainer = styled.div`\n display: flex;\n width: fit-content;\n`;\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: auto;\n max-width: 80px;\n margin-right: 10px;\n margin-top: auto;\n margin-bottom: auto;\n // flex-direction: row-reverse;\n`;\n\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n cursor: pointer;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Controller = styled.div`\n position: absolute;\n bottom: 80px;\n width: 900px;\n max-width: 90%;\n padding: 15px 40px;\n margin-left: -40px;\n height: auto;\n background-color: red;\n background: ${opaqueColor('#121212', 96)};\n box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.13);\n border-radius: 12px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Left = styled.div`\n font-weight: 600;\n font-size: 18px;\n color: #fff;\n`;\n\nconst Right = styled.div`\n display: flex;\n flex-wrap: wrap;\n`;\n\nconst Arrow = styled.div<{disabled: boolean}>`\n background: ${p =>!p.disabled ? 'linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%)' : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 40)} 2.81%, ${opaqueColor('#F58069', 40)} 96.58%)`};\n border-radius: 8px;\n width: 32px;\n height: 32px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 900px;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:40px;\n padding-right:40px;\n\n .termsAssistantChanges {\n text-decoration: underline;\n }\n\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n\n .termsAssistantDiffs {\n text-decoration: underline;\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faTriangleExclamation} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n getlinksForInsertion,\n linksAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < getlinksForInsertion?.length; i++) {\n if (!linksAssistantSuggestions?.find(item => item.linksIncluded?.includes(getlinksForInsertion[i]))) {\n prepArr.push(getlinksForInsertion[i]);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(getlinksForInsertion ?? []), ...(linksAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} links` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {Button, Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {faCircleCheck, faCircleX, faCircleDashed, faArrowLeft, faArrowRight} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {toJS} from 'mobx';\nimport {useEffect, useState} from 'react';\n\ninterface SingleTermProps {\n term: any;\n finalTermsList: any;\n setFinalTermsList: any;\n key: any;\n setVisible: any;\n kwUpdate: any;\n}\n\nexport const SingleTerm = observer(({term, finalTermsList, setFinalTermsList, setVisible, kwUpdate}: SingleTermProps) => {\n const [termIndex, setTermIndex] = useState(0);\n const {\n contentOptimizer: {\n currentPage: {\n getstagingLinkSuggestions,\n setStagingLinkSuggestions,\n setLinkActiveTerm,\n linkActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n useEffect(()=>{\n setTermIndex(0);\n }, [kwUpdate, linkActiveTerm]);\n\n const onTermClickHandler = curTerm => {\n const newClass = curTerm?.replaceAll(' ', '-');\n const totalOccurances = document.getElementsByClassName(newClass)?.length;\n const updatedValues = {\n class: curTerm.replaceAll(' ', '-')+`${term[0]?.itemIndex}`,\n term: curTerm,\n order: linkActiveTerm?.order < totalOccurances - 1 ? linkActiveTerm.order : 0,\n itemIndex: term[0].itemIndex,\n };\n\n setLinkActiveTerm(updatedValues);\n };\n\n const acceptLink = (e:any) => {\n e.stopPropagation();\n const newItems = [...term];\n newItems[termIndex].status = 'accepted';\n const updateTerm = finalTermsList.map((val:any)=> val.filter((value:any)=> value.itemIndex == term[termIndex].itemIndex).length > 0 ? newItems : val);\n term?.status !== 'dismissed' && setFinalTermsList([...updateTerm]);\n onBlockStatusChange('accept');\n };\n\n const dismissLink = (e:any) => {\n e.stopPropagation();\n const newItems = [...term];\n newItems[termIndex].status = term[termIndex].status == 'default'? 'dismissed' : 'default';\n const updateTerm = finalTermsList.map((val:any)=> val.filter((value:any)=> value.itemIndex == term[termIndex].itemIndex).length > 0 ? newItems : val);\n setFinalTermsList([...updateTerm]);\n onBlockStatusChange(term[termIndex]?.status == 'dismissed' ? 'dismiss' : 'undo');\n };\n\n const onArrowClickHandler = (e, direction: 'next' | 'prev') => {\n e.stopPropagation();\n const incDec = direction == 'next' ? true : false;\n const updatedValues = {\n class: term[incDec ? termIndex+1 : termIndex-1]?.suggestion[0]?.keyword?.replaceAll(' ', '-')+`${term[incDec ? termIndex+1 : termIndex-1]?.itemIndex}`,\n term: term[incDec ? termIndex+1 : termIndex-1]?.suggestion[0]?.keyword,\n order: direction == 'next' ? linkActiveTerm?.order + 1 : linkActiveTerm?.order - 1,\n itemIndex: term[incDec ? termIndex+1 : termIndex-1]?.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n direction == 'next' ? setTermIndex(termIndex+1) : setTermIndex(termIndex-1);\n };\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions(prepDataArr);\n };\n\n if (!term?.filter((item:any)=> item?.suggestion?.length > 0)) return;\n\n const cardClick = (e:any) => {\n e.preventDefault();\n setVisible(false);\n setTermIndex(0);\n onTermClickHandler(term[0]?.suggestion[0]?.keyword);\n };\n\n const scrollTerms = (e, index) => {\n e.stopPropagation();\n const updatedValues = {\n class: term[index]?.suggestion[0]?.keyword?.replaceAll(' ', '-')+`${term[index]?.itemIndex}`,\n term: term[index]?.suggestion[0]?.keyword,\n order: index < termIndex ? linkActiveTerm?.order - 1 : linkActiveTerm?.order + 1,\n itemIndex: term[index]?.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n setTermIndex(index);\n };\n\n const acceptedStatus = term?.filter((item:any) => item.status == 'accepted')?.length;\n const dismissedStatus = term?.filter((item:any) => item.status == 'dismissed')?.length;\n\n return \n {\n const value = term?.filter((isTerm:any)=> linkActiveTerm?.itemIndex == isTerm?.itemIndex)?.length;\n !( value > 0) && cardClick(e);\n }}>\n 0 ? 'green' : dismissedStatus == term?.length ? 'red' : 'lightgray'}\n icon={acceptedStatus > 0 ? faCircleCheck : dismissedStatus == term?.length ? faCircleX : faCircleDashed} fontSize={14}/>\n {acceptedStatus > 0 ?\n Accepted {acceptedStatus}: {term?.filter((item:any) => item.status == 'accepted').map((val:any)=> val.suggestion[0].keyword).join(', ')} :\n dismissedStatus == term?.length ?\n All Dismissed :\n Review {term?.filter((item:any)=> item?.status !== 'dismissed' && item?.status !== 'accepted')?.length} suggestion }\n \n {term[0]?.title}
\n {term[0].link}
\n \n {(term?.filter((isTerm:any)=> linkActiveTerm?.itemIndex == isTerm?.itemIndex)?.length > 0 && term?.filter((isVal:any)=> linkActiveTerm.term == isVal?.suggestion[0]?.keyword)?.length > 0) &&\n <>\n \n Suggestion {termIndex+1} of {term?.length}
\n {linkActiveTerm?.term}
\n \n \n \n \n \n {term?.length > 1 && \n \n {term?.map((suggestion, idx) => {\n return scrollTerms(e, idx)} color={suggestion.status == 'default' ? '#A3A4A4' : suggestion.status == 'dismissed' ? '#F44343' : '#1FAC47'} key={idx} isActive={highlightedNodeId == suggestion.itemIndex}/>;\n })}\n \n \n \n }\n \n \n }\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: white;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);\n transition: background .3s ease-in;\n // display: flex;\n\n .acceptBtn{\n background-color: rgba(42, 193, 85, 1);\n border: none;\n margin-right: 10px;\n border-radius: 8px;\n color: white;\n }\n .acceptCol{\n color: rgba(42, 193, 85, 1) !important;\n background-color: rgb(42 193 85 / 53%) !important;\n }\n .dismissCol{\n color: red !important;\n background-color: #ff000069 !important;\n }\n .dismissBtn{\n background-color: rgba(242, 242, 245, 1);\n border: none;\n margin-right: 10px;\n border-radius: 8px;\n span{\n color: black;\n }\n }\n .previous, .forward {\n border-radius: 6px;\n background-color: rgba(242, 242, 245, 1);\n height: 32px;\n width: 33px;\n margin-left: 10px;\n .svg{\n margin-left: -5px !important;\n }\n }\n .termName { \n margin: 0px;\n text-overflow: ellipsis;\n overflow: hidden;\n text-wrap: nowrap;\n font-weight: 600;\n font-size: 14px;\n }\n .termLink{\n font-size: 12px;\n color: rgba(45, 108, 202, 1);\n word-break: break-all;\n }\n .termKeyword{\n margin: 0px;\n font-weight: 500;\n text-overflow: ellipsis;\n overflow: hidden;\n text-wrap: nowrap;\n }\n .termsuggestion{\n font-size: 12px;\n color: rgba(78, 81, 86, 1);\n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n }\n`;\n\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin-left: 2%;\n margin-top: 3px;\n}\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\nconst CardTitle = styled.div`\nwidth: 100%;\n`;\n\nconst StatusTitle = styled.span`\nmargin-left: 10px;\nspan{\n color: green;\n}\n`;\n\nconst DividerLine = styled(Divider)`\nbackground-color: lightgray;\nmargin-top: 0;\nmargin-bottom: 12px;\n`;\n\nconst SuggestionCard = styled.div`\nwidth: 100%;\n.actionTerm{\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n margin-bottom: 10px;\n}\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\nimport {toJS} from 'mobx';\n\nexport const LinksList = observer(({kwUpdate, setVisible}:any) => {\n const {\n contentOptimizer: {\n currentPage: {\n getlinksForInsertion,\n setLinkActiveTerm,\n getstagingLinkSuggestions,\n setStagingLinkSuggestions,\n content,\n taLinkSuggestionLoading,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n const [filter, setFilter] = useState([]);\n\n function arrayToObject(givenValue) {\n const expectedValue = {};\n givenValue.forEach(item => {\n // Assuming 'url' is unique for each item\n if (!expectedValue[item.url]) {\n expectedValue[item.url] = {title: item.title, keywords: item.keywords};\n }\n });\n return expectedValue;\n }\n\n const loadLinksData = (linksData:any) => {\n // update staginglinksuggestion to keep a full record for save api\n const expectedData = [];\n for (const outerArray of linksData) {\n for (const innerArray of outerArray) {\n expectedData.push(innerArray.itemIndex);\n }\n }\n const data = getstagingLinkSuggestions?.map((item:any)=>{\n if (expectedData.includes(item.itemIndex)) {\n return item;\n } else {\n return {...item, status: 'default'};\n }\n });\n setStagingLinkSuggestions([...data]);\n // filter duplicate data if any\n const uniqueData = [];\n const seenSet = new Set();\n\n for (const array of linksData) {\n const stringRepresentation = JSON.stringify(array);\n if (!seenSet.has(stringRepresentation)) {\n uniqueData.push(array);\n seenSet.add(stringRepresentation);\n }\n }\n return uniqueData;\n };\n\n useEffect(() => {\n setFinalTermsList([]);\n if (getstagingLinkSuggestions?.length) {\n let suggestionList = [];\n const allLinks = arrayToObject(content?.internalLinkSuggestionsV2?.allLinks.map((link:any)=> link?.url?.endsWith('/') ? {...link} : {...link, url: `${link?.url}/`}));\n const getTerms = (term:any) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(term?.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n };\n const formattedArray = {};\n // create a format and seprate arrays based on link\n getstagingLinkSuggestions?.forEach((term:any)=>{\n if (term.isSuggestion) {\n if (!formattedArray[term?.linksIncluded[0]]) {\n formattedArray[term?.linksIncluded[0]] = [];\n }\n formattedArray[term?.linksIncluded[0]].push(term);\n }\n });\n const resultArray = Object.values(formattedArray).map((arr:any, indx)=>{\n return arr?.map((arrTwo, indexx)=>{\n suggestionList=[];\n getTerms(arrTwo);\n return {display: indx== 0 ? true: false, itemIndex: arrTwo.itemIndex, index: indexx, link: arrTwo?.linksIncluded[0], suggestion: suggestionList?.length ? suggestionList : [], title: allLinks[arrTwo?.linksIncluded[0]]?.title || '', keywords: toJS(allLinks[arrTwo?.linksIncluded[0]]?.keywords), status: arrTwo?.status};\n });\n });\n setFinalTermsList([...resultArray]);\n }\n }, [taLinkSuggestionLoading, getlinksForInsertion, kwUpdate]);\n\n useEffect(()=>{\n let filteredValue = [];\n setFilter([]);\n if (kwUpdate.status) {\n // append data from sourced record when checkbox checked in keyword\n const addData = finalTermsList.filter((item:any)=> item[0].keywords?.includes(kwUpdate.kw));\n filteredValue = [...addData.map((val:any)=> val.map((value:any)=> ({...value, status: 'default'}))), ...filter];\n const returnedData = loadLinksData([...filteredValue]);\n setFilter([...returnedData]);\n } else if (kwUpdate.status == false) {\n // remove data from listed record when checkbox checked in keyword\n const filterMatch = filter?.filter((item:any)=> !item[0]?.keywords?.includes(kwUpdate.kw));\n filteredValue = [...filterMatch];\n const returnedData = loadLinksData([...filteredValue]);\n setFilter([...returnedData]);\n } else {\n filteredValue = [...finalTermsList];\n setFilter([...filteredValue]);\n }\n // open first card whenever data filter\n if (filteredValue?.length) {\n const firstTerm = {...filteredValue[0][0]};\n const updatedValues = {\n class: firstTerm.suggestion[0]?.keyword?.replaceAll(' ', '-') + `${firstTerm.itemIndex}`,\n term: firstTerm.suggestion[0]?.keyword,\n order: 0,\n itemIndex: firstTerm.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n }\n }, [kwUpdate, finalTermsList]);\n\n\n return \n {filter?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Checkbox, Dropdown, Popover, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled, {css, keyframes} from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\nimport {LinksList} from './linksList';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPlus, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport React, {useEffect, useState} from 'react';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const LinkAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsLinkActive,\n setLinksForInsertion,\n editContent,\n stagingLinkSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n updateContentLoadedAt,\n content,\n fetchLinkSuggestions,\n getstagingLinkSuggestions,\n },\n }} = useStore('');\n const {settings: {customer: {getCustomerQuota}}} = useStore('');\n const antIcon =
'));\n }\n\n if (getstagingLinkSuggestions[i].isSuggestion) {\n if (getstagingLinkSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n Show Internal Link Suggestions for following target keywords (does not affect manually provided URLs): \n e.stopPropagation()}>\n {activeKeywordsList?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const addLink = async () => {\n if (inputValue?.length) {\n const allLink = content?.internalLinkSuggestionsV2?.allLinks?.map((item:any)=> item?.url);\n const links = stringToArray(inputValue, keywordNewLineReg, ',');\n const urlWithProtocols = links.map(value => value.startsWith('/') ? value.slice(1) : value);\n setAnyButtonClicked(true);\n await fetchLinkSuggestions([...allLink, ...urlWithProtocols.map((val:any)=> `${new URL(allLink[1]).origin}/${val}`)]);\n getCustomerQuota();\n setAnyButtonClicked(false);\n setVisible(false);\n setUpdated({});\n }\n setInputValue('');\n };\n\n\n const handleInputChange = (e: React.ChangeEvent) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n setInputValue(e?.target?.value);\n }\n };\n\n const popoverContent = (\n \n Add more links you want to get suggestions for: \n \n \n \n \n \n \n );\n\n\n const selectedLink = getstagingLinkSuggestions?.filter((item:any)=> item.status == 'accepted')?.length;\n\n return \n \n \n Links Assistant \n \n \n setVisible(false)}>Keyword: {activeKeywordsList?.filter(kw => kw.active)?.length}/{activeKeywordsList?.length} \n \n \n setVisible(true)}> \n \n \n \n \n
\n Review the suggested link placements to evaluate their fit and relevance within the context of your article.\n
\n {`To finalize and implement the changes, please click on 'Save Changes'.`}\n \n \n \n \n {selectedLink > 0 ? {`${selectedLink} suggestion${selectedLink > 1 ? 's' : ''} accepted`} : <>}\n \n onCancelClickHandler()}>\n {selectedLink > 0 ? 'Discard' : 'Cancel'}\n \n item.status !== 'default')}\n color='green'\n style={{width: '35%', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n Save changes\n {updatingTa ? \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 0px);\n width: 30%;\n // padding-bottom: 20px;\n padding-right: 5%;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n // .ant-checkbox-inner{\n // background-color: #2D6CCA !important;\n // border-color: #2D6CCA !important;\n // }\n`;\n\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\ntext-align: left;\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n padding: 11px;\n display: flex; justify-content: space-between;\n align-items: center;\n border-radius: 14px;\n button{\n width: 63% !important;\n }\n span{\n color:white\n }\n`;\n\nconst LinkSubmitBtns = styled.div`\ndisplay: flex;\nmargin-top: 15px;\n.submitLink{\n margin-left: 0px;\n background-color: #2D6CCA !important;\n color: white;\n &:hover, &:focus, &:active{\n background-color: #2D6CCA !important;\n }\n}\n.dismissLink{\n background-color: #F2F2F5 !important;\n color: black;\n &:hover, &:focus, &:active{\n background-color: #F2F2F5 !important;\n }\n}\n`;\n\n\nconst ButtonStyled = styled.p<{viewSuggestionsOption?: boolean}>`\n background-color: transparent;\n border: 1px solid transparent;\n font-size: 13px;\n cursor: pointer;\n padding: 8px 3px;\n // margin: 0 9px 0 0 !important;\n color: #1890ff;\n &:hover, &:focus {\n background-color: transparent !important;\n }\n span{\n color: #1890ff;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\n\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 337px;\n padding: 12px 20px;\n border-radius: 5px;\n margin-right: 184px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n .header{\n display: flex;\n width: 41%;\n justify-content: space-between;\n font-size: 12px;\n p{\n color: #2D6CCA\n }\n }\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: black;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #6e6e6e;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport parse from 'html-react-parser';\nimport classNames from 'classnames';\nimport {useEffect, useState} from 'react';\nimport {opaqueColor} from '@/utils/colors';\nimport {faRotateLeft} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport {LinkAssistantRightSidebar} from './linkAssistantRightsideBar';\n\nexport const TextSuggestionsLinks = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n content,\n setIsLinkActive,\n setLinksForInsertion,\n getstagingLinkSuggestions,\n linkActiveTerm,\n setLinkActiveTerm,\n setStagingLinkSuggestions,\n isLinkActive,\n highlightedNodeId,\n setHighlightedNodeId,\n showOriginalBlockId,\n setShowOriginalBlockId,\n updatingTa,\n clearAllTaData,\n },\n }} = useStore('');\n\n const [totalOccurances, setTotalOccurances] = useState(document.getElementsByClassName(linkActiveTerm?.class)?.length ?? 0);\n useEffect(() => {\n setTotalOccurances(document.getElementsByClassName(linkActiveTerm?.class || linkActiveTerm?.class)?.length);\n }, [linkActiveTerm?.class, linkActiveTerm?.class]);\n\n const onArrowClickHandler = (direction: 'next' | 'prev') => {\n setTotalOccurances(document.getElementsByClassName(linkActiveTerm.class)?.length ?? 0);\n\n const updatedValues = {\n class: linkActiveTerm.class,\n term: linkActiveTerm.term,\n order: direction == 'next' ? linkActiveTerm.order + 1 : linkActiveTerm.order - 1,\n };\n\n setShowOriginalBlockId(null);\n setLinkActiveTerm(updatedValues);\n };\n\n\n useEffect(() => {\n if (linkActiveTerm) {\n setShowOriginalBlockId(null);\n const nodesWithTerm = document.getElementsByClassName(`${linkActiveTerm.class}`);\n if (nodesWithTerm?.length) {\n const higlightedNode = nodesWithTerm[0];\n if (!higlightedNode) return;\n setHighlightedNodeId(+(higlightedNode as HTMLElement)?.dataset?.blockIndex);\n const elemOffset = (higlightedNode as HTMLElement).offsetTop;\n document.querySelector('.textContainer').scrollTop = elemOffset - ((window.innerHeight - 170) / 2);\n }\n }\n }, [linkActiveTerm?.term, linkActiveTerm?.order, linkActiveTerm?.class, linkActiveTerm]);\n\n\n const blocksRenderer = blocksArray => {\n const options = {\n replace: domNode => {\n if (!domNode.attribs) {\n return;\n }\n },\n };\n\n const typeDettector = (text: string) => {\n if (text.startsWith('')) {\n return 'p';\n }\n if (text.startsWith('
')) {\n return 'h1';\n }\n if (text.startsWith('')) {\n return 'h2';\n }\n if (text.startsWith('')) {\n return 'h3';\n }\n if (text.startsWith('')) {\n return 'h4';\n }\n if (text.startsWith('')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (linkActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (linkActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions([...prepDataArr]);\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n const parser = new DOMParser();\n const doc = parser.parseFromString(block.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n const suggestionList = [];\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n\n if (block.isSuggestion) {\n return (\n <>\n term.keyword?.replaceAll(' ', '-')+`${block?.itemIndex}`)), block.status)}>\n {showOriginalBlockId != null && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n ;\n }\n })}\n\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsLinkActive(false);\n clearAllTaData();\n setLinksForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n \n {blocksRenderer(getstagingLinkSuggestions)}\n ;\n});\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 65%;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:10%;\n padding-right:40px;\n color: rgba(0, 0, 0, 0.85);\n border-right: 1px solid lightgray;\n .linkInsertionChange {\n text-decoration: underline;\n }\n p a{\n color: rgba(0, 0, 0, 0.85);\n }\n .default p span a{\n color: #1890ff;\n }\n .accepted{\n span a{\n text-decoration: underline;\n color: #1FAC47 !important;\n text-decoration-color: #1FAC47 !important;\n\n }\n }\n .dismissed{\n span a{\n text-decoration: underline;\n color: #F44343 !important;\n text-decoration-color: #F44343 !important;\n }\n }\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n img {\n width: 100%;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styles from './content-editor.module.scss';\nimport {EditorSection} from './EditorSection/EditorSection';\n// import {FocusTermsPopups} from './FocusTermsPopups';\nimport {TopSection} from './TopSection/TopSection';\nimport styled from 'styled-components';\nimport {TextSuggestions} from '../RightSidebar/v2-sidebar/Analytics/TermsAssistant/TextSuggestions';\nimport {TextSuggestionsLinks} from '../RightSidebar/v2-sidebar/Analytics/LinkAssistant/TextSuggestionsLinks';\n\n\ninterface Props {\n // allRef: any;\n newPage: any;\n htmlToDraft: any;\n}\n\nexport const LeftSide = observer(({newPage, htmlToDraft}: Props) => {\n const {contentOptimizer} = useStore('');\n const {currentPage} = contentOptimizer;\n const {\n sideBarWidth,\n isSideBarHidden,\n isTaActive,\n isLinkActive,\n } = currentPage;\n\n return \n \n ;\n});\n\n\nconst LeftSideContainer = styled.div<{isNewPage?: boolean; isSideBarHidden?: boolean; sideBarWidth?: string; isLinkSuggestionActive?: boolean}>`\n overflow: hidden;\n text-align: -webkit-center; \n transition: all .3s ease;\n width: 100%;\n max-width: ${p => p.isLinkSuggestionActive ? '100%' : !p.isNewPage ? !p.isSideBarHidden ? `calc(100% - ${p.sideBarWidth} + 15px)` : '100%' : '100%'};\n`;\n","import {WarningOutlined} from '@ant-design/icons';\nimport React from 'react';\nimport styles from './index.module.scss';\n\nexport const Error: React.FC = () => {\n return (\n \n An error has occurred, please try again later.
\n \n );\n};\n","import {FocusTermClusteredType} from '@/store/content-optimizer/currentPage';\nimport {Table} from '@/components/common-components/components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {filterDataInMemory} from '@/utils/filter-data';\nimport styles from './style.module.scss';\nimport {formatLargeNumber} from '@/utils/number';\nimport {ColumnType} from 'antd/es/table';\n\ninterface Props {\n cluster: FocusTermClusteredType;\n isClusterRemoving: boolean;\n}\n\nexport const SingleCluster = observer(({\n cluster,\n isClusterRemoving,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n enum SORT_DIRECTION {\n ascend = 'ascend',\n descend = 'descend'\n }\n\n const [tableData, setTableData] = useState([]);\n const [sortField, setSortField] = useState('requiredCountMin');\n const [sortDirection, setSortDirecion] = useState(SORT_DIRECTION.descend);\n\n\n const removeClusterHandler = (term: string) => {\n if (currentPage.isBulkRemovingCluster) return;\n currentPage.bulkRemoveTerms([term], 'term', cluster.title);\n };\n\n const setTerms = () => {\n const {dataFiltered} = filterDataInMemory(cluster?.focusTerms, '', [], [], 1, cluster?.focusTerms.length, sortField, sortDirection);\n setTableData(dataFiltered);\n };\n\n const handleTableChange = async (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortFieldName} = column || {};\n\n setSortField(sortFieldName);\n setSortDirecion(order);\n if (order) {\n const {dataFiltered} = filterDataInMemory(tableData, '', [], [], 1, tableData.length, sortFieldName, order);\n setTableData(dataFiltered);\n } else {\n setTableData(cluster?.focusTerms);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [cluster]);\n\n type ExtendedColumnsType = ColumnType & {defaultSortOrder?: 'ascend' | 'descend'; sortFieldName?: string};\n\n const tableColumns = (removingTerms: boolean): ExtendedColumnsType[] => {\n return [\n {\n title: 'TOPICAL TERM',\n dataIndex: 'name',\n key: 'name',\n align: 'left' as 'left',\n width: 250,\n render: (_, record) => {\n return \n {record.name}\n {record?.foundIn && record.foundIn.map((item, idx) => {\n return {item} ;\n })}\n {record?.isBranded && {'branded'} }\n ;\n },\n },\n {\n title: 'MSV',\n dataIndex: 'sv',\n key: 'sv',\n align: 'right' as 'right',\n sortFieldName: 'sv',\n width: 60,\n sorter: true,\n render: (_, record) => {\n return {formatLargeNumber(record.sv)};\n },\n },\n {\n title: 'USAGE',\n dataIndex: 'requiredCountMin',\n key: 'requiredCountMin',\n defaultSortOrder: 'descend',\n align: 'right' as 'right',\n width: 60,\n sortFieldName: 'requiredCountMin',\n sorter: true,\n render: (_, record) => {\n return {`${record.usedCount}/${record.idealCountMax}`};\n },\n },\n {\n title: 'REMOVE',\n dataIndex: 'name',\n key: 'name',\n align: 'right' as 'right',\n width: 80,\n render: (_, record) => {\n return removeClusterHandler(record.name)}>\n ;\n },\n },\n\n ];\n };\n\n return \n >;\n}\n\nexport const BulkRemoveTermsModal = observer(({\n isModalOpen,\n setIsModalOpen,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n const [clusteredTerms, setClusteredTerms] = useState([]);\n const [clusterToRemove, setClusterToRemove] = useState('');\n\n const setTerms = () => {\n const clusterTerms = toJS(currentPage?.analytics?.clusters);\n const tempArr = [];\n\n setClusteredTerms(toJS(clusterTerms));\n\n if (currentPage.focusTermsSorter.key) {\n clusterTerms?.forEach((item, id) => {\n let tempCluster = [];\n\n tempCluster = item?.focusTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n\n tempArr.push({\n ...clusterTerms[id],\n focusTerms: tempCluster,\n });\n });\n\n\n setClusteredTerms(tempArr);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n const removeClusterHandler = async (e, clusterTitle: string) => {\n e.preventDefault();\n e.stopPropagation();\n const clusterToRemove = clusteredTerms?.find(cluster => cluster.title === clusterTitle);\n const termsArr = clusterToRemove?.focusTerms?.map(term => term.name);\n setClusterToRemove(clusterTitle);\n try {\n await currentPage.bulkRemoveTerms(termsArr, 'cluster', clusterTitle);\n } catch (e) {\n setClusterToRemove('');\n } finally {\n setClusterToRemove('');\n }\n };\n\n return Bulk Remove Topical Terms \n \n {clusteredTerms?.filter(cluster => cluster.focusTerms?.length > 0)?.map((cluster, idx) => {\n return \n {cluster.title} \n {`(Terms: ${cluster.focusTerms?.length}, MSV: ${formatLargeNumber(cluster.clusterSv)})`} \n }\n extra={ removeClusterHandler(e, cluster.title)}>\n }>\n \n ;\n })}\n \n setIsModalOpen(false)}>Close \n \n \n\n\n ;\n});\n\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 5px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\n\nconst ClusterHeader = styled.div`\n display: flex;\n align-items: baseline;\n`;\nconst ClusterName = styled.div`\n font-weight: 500;\n color: #121212;\n`;\nconst ClusterDesc = styled.div`\n font-size: 12px;\n color: #4E5156;\n margin-left: 5px;\n`;\n\nconst CollapseStyled = styled(Collapse)`\n // background: #fff;\n border: none;\n max-height: calc(75vh - 185px);\n overflow-y: auto;\n\n .ant-collapse-content {\n border-top: 0px solid transparent;\n background-color: #fff;\n }\n\n .ant-collapse-item {\n border-radius: 10px !important;\n margin-bottom: 10px;\n border: 1px solid #E8E8E8;\n background-color: #fff;\n }\n\n .ant-collapse-content-box {\n padding-top: 0px;\n }\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faArrowUpArrowDown, faSliders} from '@fortawesome/pro-regular-svg-icons';\nimport {faFileArrowDown, faFileLines, faFileSpreadsheet} from '@fortawesome/pro-light-svg-icons';\nimport {faPlus, faTrash} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Dropdown, Radio, Tooltip, Spin, Divider, Menu} from 'antd';\nimport {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport {Modal} from '@/components/common-components';\nimport {faGoogle} from '@fortawesome/free-brands-svg-icons';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport {BulkRemoveTermsModal} from '../BulkRemoveTermsModal/BulkRemoveTermsModal';\nimport {toJS} from 'mobx';\nimport {useStore} from '@/store/root-store';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface TopicalProps {\n onViewChange?: Dispatch>;\n onChangeIncludeBranded?: Dispatch>;\n onTermsFilter?: Dispatch>;\n includeBranded: boolean;\n currentView?: 'clusters' | 'completion';\n store: CurrentPageStore;\n onSortTerms?: () => void;\n}\n\n\nexport const TermsDropdownController = observer(({onViewChange, currentView, store, onChangeIncludeBranded, includeBranded, onTermsFilter, onSortTerms}: TopicalProps) => {\n const {Group} = Radio;\n const antIcon = \n e.stopPropagation()}>\n onViewChange(e.target.value)} style={{display: 'flex', flexDirection: 'column'}}>\n Editor settings: \n currentPage?.setHighlights(e.target.checked)}>Enable Terms Highlighting in the Editor \n Terms recommendations: \n onCheckboxClicked(e.target.checked)}>Include Branded Terms \n\n \n {isNotPublic && setShowBulkRemoveTermsModal(true)}> }\n \n ;\n\n return \n setShowExportModal(false)}>\n Export Content Brief \n Export a brief with the SEO and Content data for this article (Meta Data, Word Count, Focus Terms, questions, Link Suggestions, etc.) \n \n setShowExportModal(false)}>Close \n \n window.open(getXlsExportLink(), '_self')}>\n \n downloadFileToTxt()}>\n \n exportToGoogleDocs()} disabled={exportToDocsLoading}>\n {exportToDocsLoading ? \n \n \n \n \n \n {Object.keys(termsFiltersSetup).map((item, idx) => {\n return \n termsFilterHandler(e.target.checked, item)}>\n {getTermsCount(termsFiltersSetup[item].type)}\n \n ;\n })}\n \n \n \n \n {sorters.map((item, index) => (\n handleOnSortChange(item)} key={index}>{item.label} \n ))}\n \n }>\n \n Sort \n \n \n \n\n {store?.isRemovingFocusTerms && \n currentPage.setShowAddFocusTermModal(true)}>\n \n \n \n\n {isNotPublic && setShowExportModal(true)}>\n }\n\n \n \n \n \n \n \n \n \n ;\n});\n\n// TOPICAL TERMS STYLED COMPONENTES\nconst GearIcon = styled.a`\n height: 14px;\n cursor: pointer;\n margin-top: auto;\n margin-bottom: auto;\n display: block;\n`;\nconst GroupTermsContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n`;\n\nconst TermsContainer = styled.div`\n display: flex;\n flex-direction: column;\n background-color: transparent;\n padding: 10px 10px;\n background-color: #2D2F34;\n border-radius: 5px 5px 0 0;\n`;\n\nconst ExportBtn = styled(Button)`\n background: transparent;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: auto;\n margin-right: 0px;\n padding: 7px 10px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst AdjustBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n padding-bottom: 5px;\n cursor: default;\n`;\n\n\nconst TermsViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n padding: 12px 20px;\n border-radius: 17px;\n margin-top: 10px;\n width: 232px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n// margin-left: 3px !important;\n display: flex;\n align-items: flex-start;\n font-weight: 500 !important;\n margin-right: 8px;\n\n .ant-checkbox-inner {\n width: 14px;\n height: 14px;\n padding: 7px;\n border-radius: 4px !important;\n ::after {\n top: 47% !important;\n left: 18.5% !important;\n }\n }\n\n .ant-checkbox {\n padding-right: 0px !important;\n padding-left: 0px !important;\n }\n\n span {\n padding-right: 1px;\n padding-left: 1px;\n font-size: 13px;\n }\n`;\n\nconst PTag = styled.p`\nmargin-left: 10px;\nmargin-bottom: 0px !important;\n`;\n\nconst CheckboxStyledHighlights = styled(CheckboxStyled)`\nmargin-bottom: 4px;\n`;\n\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n margin-bottom:5px;\n`;\n\n\nconst ExportModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n\nconst ExportModalDesc = styled.div`\n color: #4E5156;\n`;\n\nconst ExportModalButtonsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst BulkRemoveTermsBtn = styled.div`\n cursor: pointer;\n margin-top: 6px;\n font-weight: 500;\n`;\nconst TermsFilterContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 103%;\n border-radius: 0px 4px 4px 0px;\n margin-left: -10px;\n padding: 0px 9px 10px 15px;\n`;\n\nconst AddButton = styled.div`\n margin-left: 6px;\n cursor: pointer;\n`;\n\nconst Sort = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n`;\n\nconst SortTxt = styled.span`\n color: var(--Text-gray-light, var(--Gray-light, #E8E8E8));\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {formatLargeNumber} from '@/utils/number';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip, Input as AntdInput} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react-lite';\nimport {ChangeEvent, useState} from 'react';\nimport styled from 'styled-components';\nimport {faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\n\ninterface Props {\n store: CurrentPageStore;\n onFilter: (query: string[]) => void;\n}\nexport const TermsDataController = observer(({\n store,\n onFilter,\n}: Props) => {\n const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n\n const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n return \n \n \n \n {store?.isAnalyzing ? : \n {toJS(store.analytics?.clusters)?.map((cluster, id) => {\n return \n \n Terms in cluster: \n {cluster.focusTerms?.length} \n \n \n Monthly Search Volume: \n {formatLargeNumber(cluster.clusterSv)} \n \n }>\n item.trim() === cluster.title).length > 0}\n onClick={() => handleOnClusterClick(cluster.title)}>{`#${cluster.title} - ${cluster.focusTerms?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n \n ;\n});\n\nconst ClusterTooltipSingleRow = styled.div`\n display: flex;\n justify-content: space-between\n`;\nconst ClusterTooltipLabel = styled.div`\n font-size: 12px;\n font-weight: 400;\n color: #E8E8E8;\n`;\n\nconst ClusterTooltipValue = styled.div`\n font-size: 12px;\n font-weight: 500;\n color: #FFFFFF;\n`;\n\nconst Wrapper = styled.div`\n margin-bottom: 15px;\n border-radius: 8px;\n background: #282B2F;\n box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.02);\n padding: 10px;\n`;\nconst SearchAndSort = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\nconst ClustersWrapper = styled.div`\n display: flex;\n`;\nconst ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n display: flex;\n flex-wrap: wrap;\n\n height: ${p => p.expandedClusters ? 'auto' : '25px'};\n overflow: hidden;\n`;\n\nconst SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n border-radius: 60px;\n padding: 3px 8px;\n width: auto;\n height: 20px;\n font-size: 11px;\n margin-right: 6px;\n margin-bottom: 6px;\n cursor: pointer;\n\n &:hover {\n background-color: #4B4D51 !important;\n }\n`;\n\nconst InputStyled = styled(AntdInput)`\n height: 32px;\n margin-bottom: 5px;\n background: #282B2F;\n border-color: transparent !important;\n .ant-input {\n margin-left: 7px;\n background: #282B2F;\n color: white !important;\n color: var(--Text-gray, var(--Gray, #A3A4A4));\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n }\n .ant-input-affix-wrapper {\n border: none !important;\n }\n &:hover{\n box-shadow: none !important;\n border-color: transparent !important;\n }\n &:focus{\n box-shadow: none !important;\n }\n`;\n","import {useState} from 'react';\nimport {faArrowDown, faCheck, faTrash} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport styles from '../../style.module.scss';\nimport {\n costPerClickFormatter,\n searchVolumeFormatter,\n isScaPublicPage,\n} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/LeftSide/EditorSection/content-editor/utils';\nimport {\n Divider,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport {NextImg} from '@/utils/nextImg';\n\nimport {getTwoGreenPercentageColor} from '@/utils/colors';\nimport classNames from 'classnames';\nimport {useTranslation} from 'next-i18next';\nimport {CurrentPageStore, FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {getDomain, getSiteName} from '@/utils/url';\nimport {isNil} from 'lodash';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport styled from 'styled-components';\nimport {faWikipediaW} from '@fortawesome/free-brands-svg-icons';\n\ninterface Props {\n focusTerm: FocusTermModel;\n i: number;\n store: CurrentPageStore;\n}\n\nexport const SingleTerm = observer(({focusTerm, i, store}: Props) => {\n const {t} = useTranslation('landing-page-optimizer');\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemoving, setIsRemoving] = useState(false);\n\n const antIcon = \n Topical term
\n {focusTerm.name}
\n \n {focusTerm.sv !== undefined && focusTerm.sv !== null && {`SV: ${searchVolumeFormatter(focusTerm.sv)}`}}\n {focusTerm.cpc !== undefined && focusTerm.cpc !== null && {`CPC: ${costPerClickFormatter(focusTerm.cpc)}`}}\n \n {focusTerm?.foundIn && focusTerm?.foundIn.length > 0 ?\n \n Used in \n {focusTerm.foundIn.map((item, i)=> {\n if (focusTerm.foundIn.length === 1) {\n return {`<${item}>`};\n } else {\n if (i === focusTerm.foundIn.length - 1) {\n return <>and {`<${item}>`};\n } else if (i === focusTerm.foundIn.length - 2) {\n return {`<${item}>`} ;\n } else {\n return {`<${item}>`}, ;\n }\n }\n })}\n :\n null}\n {'Current / Recommended # of uses'}
\n \n {store?.content?.targetKewyordsOnlyArr?.includes(focusTerm.name) ?
Target keywords do not have any usage limitations. : null}\n {focusTerm.usedCount}\n of {focusTerm.requiredCountMin}\n {`(Max: ${focusTerm.requiredCountMax || 0})`}\n \n {'Competitors using this term'}
\n \n {focusTerm?.competitors?.results?.map((competitor, index) => (\n \n {competitor.title ?? getSiteName(competitor.hostname)}
\n {competitor.url}\n \n {competitor?.snippets?.map((snippet, idx) => {\n return \n \n {/* {snippet.length > 130 ? snippet.substring(0, 130) + '...' : snippet} */}\n
\n {idx !== (competitor?.snippets?.length - 1) && }>\n \n \n // {`${index + 1}. `}{competitor.hostname}\n ))}\n\n \n {(!isNil(focusTerm?.normalizedScore) || focusTerm?.source) ? \n {focusTerm?.source ?\n {`Keyword source: `}{focusTerm?.source?.join(', ')}
: null}\n {!isNil(focusTerm?.normalizedScore) ? <>\n {`Importance score: `}{focusTerm.normalizedScore}
\n : null\n }\n {isAnyFocusTermLink() ?\n \n Entity References \n \n {focusTerm?.crunchbaseLink ?\n window.open(focusTerm?.crunchbaseLink)} style={{display: 'flex'}}>\n \n Crunchbase\n : ''}\n {focusTerm?.knowledgeGraphLink ?\n window.open(focusTerm?.knowledgeGraphLink)} style={{display: 'flex'}}>\n \n Google\n : ''}\n {focusTerm?.wikipediaLink ?\n window.open(focusTerm?.wikipediaLink)} style={{display: 'flex'}}>\n : ''}\n {focusTerm?.wikidataLink ?\n window.open(focusTerm?.wikidataLink)} style={{display: 'flex'}}>\n \n Wikidata\n : ''}\n \n : ''}\n \n \n }\n >\n\n \n \n {focusTerm.name} \n {focusTerm?.isBranded && {'branded'} }\n {focusTerm?.foundIn && focusTerm.foundIn.map((item, idx) => {\n return {item} ;\n })}\n \n \n {termContainerSetup[focusTerm.status].icon}\n {focusTerm.usedCount} / {focusTerm.requiredCountMin}\n\n \n {\n navigator.clipboard.writeText(focusTerm.name);\n setCopySuccess(true);\n }}>\n \n \n \n\n {!isScaPublicPage() ? {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n {(isRemoving && store.isRemovingFocusTerms) ? \n \n );\n});\n\nconst TermContainer = styled.div`\n margin-right: 5px;\n margin-left: 5px;\n margin-bottom: 9px;\n display: flex;\n max-width: 300px;\n cursor: default;\n\n\n .termControllsContainer {\n position: absolute;\n right: -100%;\n width: 100%;\n height: 100%;\n transition: all .3s ease;\n background: #2D2F34;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n }\n\n &:hover {\n .termControllsContainer {\n right: 0;\n }\n }\n`;\nconst Left = styled.div<{background: string; hoverBackground: string}>`\n padding: 3px 8px;\n background: ${p => p.background};\n width: 100%;\n border-radius: 36px 0 0 36px;\n display: flex;\n flex-wrap: wrap;\n max-width: 260px;\n align-items: center;\n transition: background .2s ease;\n\n &:hover {\n background: ${p => p.hoverBackground};\n }\n`;\nconst TermName = styled.div`\n font-size: 13px;\n color: #fff;\n line-height: 13px;\n`;\nconst BrandedLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n color: #4ebbab;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\nconst FoundInLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\n\nconst Right = styled.div<{border: string}>`\n padding: 5px 7px;\n border: ${p => `2px solid ${p.border}`};\n border-radius: 0 36px 36px 0;\n font-size: 13px;\n display: flex;\n align-items: center;\n line-height: 13px;\n position: relative;\n overflow: hidden;\n min-width: fit-content;\n cursor: pointer;\n \n\n\n`;\n\nconst CopyIcon = styled.div`\n`;\nconst ReferencesTitle = styled.p``;\nconst ReferencesWrapper = styled.div``;\nconst LinksWrapper = styled.div`\ndisplay: flex;\nflex-wrap: wrap;\ngap: 8px;\n`;\nconst SingleLink = styled.div`\ndisplay: flex;\npadding: 3px 6px;\njustify-content: center;\nalign-items: center;\ngap: 4px;\nborder-radius: 6px;\nborder: 1px solid #E8E8E8;\nbackground:#FFF;\ncursor: pointer;\nspan {\n color: #121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n}\n`;\nconst LowerSection = styled.div`\npadding: 10px 21px;\nbackground: #f9f9fb;\n`;\n","import {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {TermsDropdownController} from '../DropdownController/TermsDropdownController';\nimport styled from 'styled-components';\nimport {toJS} from 'mobx';\nimport {TermsDataController} from '../DropdownController/TermsDataController';\nimport {SingleTerm} from './SingleTerm';\nimport {FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {Tooltip} from 'antd';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\n\nexport const TermsDropdowns = observer(() => {\n // const [defaultActiveCluster, setDefaultActiveCluster] = useState(['1']);\n const [includedBranded, setIncludeBranded] = useState(true);\n const [query, setQuery] = useState([]);\n const [termsToShow, setTermsToShow] = useState(['include-more', 'included', 'include-less']);\n const [isCopied, setIsCopied] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const [standardTerms, setStandardTerms] = useState([]);\n\n const setTerms = (queryParam?: string[]) => {\n if (queryParam?.length) {\n setQuery(queryParam);\n } else {\n setQuery([]);\n }\n\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (queryParam?.length) {\n for (let i = 0; i < queryParam.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(queryParam[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n if (currentPage.focusTermsSorter.key === 'leastCount') {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (a.usedCount < b.usedCount) return -1;\n });\n } else {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n }\n\n\n filteredTerms = filteredTerms?.filter(term => termsToShow.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n const filterTermsHandler = (termsToShowParam: string[]) => {\n setTermsToShow(termsToShowParam);\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (query?.length) {\n for (let i = 0; i < query.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(query[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n\n filteredTerms = filteredTerms?.filter(term => termsToShowParam.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n return <>\n \n \n \n \n {standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n }).map((term, idx) => {\n return ;\n })}\n \n {\n if (!visible) {\n setTimeout(() => setIsCopied(false), 300);\n }\n }}>\n {\n if (standardTerms?.length) {\n navigator.clipboard.writeText(standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n })?.map(i => i?.name).join(', '));\n }\n setIsCopied(true);\n }}\n > \n ;\n});\n\nconst TopicalTermsContainer = styled.div`\nbackground-color: #2D2F34;\n \n`;\n\nconst TermsContainer = styled.div<{focusMode?: boolean}>`\n padding-right: 15px;\n padding-bottom: 16px;\n border-radius: 0 0 8px 8px;\n display: flex;\n flex-wrap: wrap;\n max-height: ${p => !p.focusMode ? '476px' : 'calc(100vh - 440px)'};\n overflow-y: auto;\n \n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst CopyButton = styled.button`\n background-color: transparent;\n border: 0px;\n cursor: pointer;\n margin: 6px;\n color: rgb(52, 174, 243);\n`;\n\n","import {observer} from 'mobx-react-lite';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {TermsDropdowns} from './TermsDropdowns';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const FocusTermsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n return currentPage?.analytics?.includedTerms?.length || currentPage?.analytics?.includeMoreTerms?.length || currentPage?.analytics?.includeLessTerms?.length ? (\n \n {/* ;\n});\n\nconst EmptyDataBox = styled.div`\n background: #2d2f34;\n border-radius: 5px;\n box-shadow: 0 4px 21px rgba(0, 0, 0, 0.02);\n display: flex;\n padding: 12px 15px;\n\n .emptyImg {\n display: flex;\n justify-content: center;\n }\n\n .emptyDataTitle {\n color: #a3a4a4;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n margin-left: 17px;\n }\n`;\n\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button} from '@/components/common-components/v2/Button';\n\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faDownLeftAndUpRightToCenter, faFileDownload, faUpRightAndDownLeftFromCenter} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react';\nimport {faCheck, faSyncAlt} from '@fortawesome/pro-regular-svg-icons';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface Props {\n currentView?: 'links' | 'terms';\n store: CurrentPageStore;\n}\n\n\nexport const LinkSuggestionsDropdownController = observer(({currentView, store}: Props) => {\n const [isSynced, setIsSynced] = useState(false);\n const [isSyncing, setIsSyncing] = useState(false);\n const isNotPublic = !isScaPublicPage();\n\n const onLinksSync = async () => {\n try {\n setIsSyncing(true);\n // await store?.getInternalLinkSuggestions(store?.content?.uuid, true);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setIsSynced(true);\n setTimeout(() => {\n setIsSynced(false);\n }, 3000);\n } catch (e) {\n setIsSyncing(false);\n } finally {\n setIsSyncing(false);\n }\n };\n\n const getXlsExportLink = () => {\n const token = getTokenFromCookies();\n if (store?.content?.uuid) {\n const baseUrl = getApiUrl(BaseApi.CA_ENDPOINT, `/api/pages/${store?.content?.uuid}/export-data-to-xls/`);\n const savedKeywordsUrl=`${baseUrl}?&jwt=${token}`;\n return savedKeywordsUrl;\n }\n };\n\n\n return \n \n store.setFocusTermsExpanded(!store.focusTermsExpanded)}>\n {store?.focusTermsExpanded ? 'Default Mode' : 'Focus Mode'} \n \n \n\n {/* \n {currentView === 'links' ? 'Internal' : 'External links'} \n \n\n {currentView === 'links' ? \n Keywords \n : null} */}\n\n {isNotPublic && (currentView === 'links' ? \n : null)}\n\n\n onLinksSync()}>\n \n \n\n ;\n});\n\nconst Container = styled.div<{current: string}>`\n display: flex;\n align-items: center;\n padding: 10px 15px;\n justify-content: ${p => p.current === 'links' ? 'space-between' : 'flex-start'};\n`;\n\n\nconst FocusModeBtn = styled(Button)`\n background: transparent;\n padding: 4px 0px;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: 0px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst FocusModeLabel = styled.span`\n color: #E8E8E8;\n font-size: 12px;\n margin-bottom: -2px;\n`;\n\nconst ExportIcon = styled.a`\n display: flex;\n align-items: center;\n cursor: pointer;\n background: transparent;\n font-size: 12px !important; \n margin-left: auto;\n margin-right: 0px;\n color: #fff;\n padding: 7px 20px;\n height: 28px !important;\n\n &:focus,\n &:hover {\n background: transparent;\n color: #fff;\n }\n`;\n\n\nconst RefetrchBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n margin-right: 0px;\n`;\n","import {InternalLinkType} from '@/store/content-optimizer/CurrentPageModel';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip} from 'antd';\nimport styled from 'styled-components';\nimport {\n faCheck,\n faStar,\n} from '@fortawesome/pro-regular-svg-icons';\nimport {faStar as faStarSolid} from '@fortawesome/pro-solid-svg-icons';\nimport {useEffect, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n link: InternalLinkType;\n customCallback?: () => void;\n}\nexport const SingleSuggestion = observer(({link, customCallback}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemovingTerm, setIsRemovingTerm] = useState(false);\n const [isBookmarked, setIsBookmarked] = useState(link?.isBookmarked);\n const {contentOptimizer: {currentPage: {removeInternalLinkSuggestion, bookmarkInternalLinkSuggestion, content: {uuid}}}} = useStore('');\n\n const antdIcon = \n \n \n \n \n \n \n {link?.title ? link.title : ''}\n \n {isBookmarked ? : null}\n \n\n \n {link?.path}\n \n \n \n \n \n {\n setIsBookmarked(!isBookmarked);\n await bookmarkInternalLinkSuggestion(uuid, link?.url);\n if (typeof customCallback == 'function') customCallback();\n }}>\n \n \n \n \n \n \n \n {\n setIsRemovingTerm(true);\n await removeInternalLinkSuggestion(uuid, link?.url, link?.keywords);\n if (typeof customCallback == 'function') customCallback();\n setIsRemovingTerm(false);\n }}>\n {isRemovingTerm ? : \n \n \n\n ;\n});\n\nconst SingleLinkContainer = styled.div`\n margin-bottom: 12px;\n display: flex;\n justify-content: space-between;\n position: relative;\n\n .actionsMenu {\n display: none;\n font-size: 12px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n cursor: pointer !important;\n position: absolute;\n background: linear-gradient(90deg, #2d2f342b -10.83%, #2d2f34 39.77%);\n padding-left: 30px;\n right: 0;\n }\n\n &:hover {\n .actionsMenu {\n display: flex;\n }\n }\n\n .copyTooltip {\n :global(.ant-tooltip-content) {\n background-color: $color-gray-dark;\n border-radius: 10px !important;\n }\n \n :global(.ant-tooltip-arrow) {\n display: none !important;\n }\n \n :global(.ant-tooltip-inner) {\n border-radius: 10px !important;\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n }\n`;\nconst Right = styled.div`\n width: 90%;\n margin-right: auto;\n`;\nconst Left = styled.div`\n display: flex;\n width: 10%;\n`;\nconst TitleAndStar = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n`;\nconst Title = styled.div`\n cursor: pointer;\n color: #e8e8e8 !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 90%;\n`;\nconst Link = styled.a`\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n color: #34AEF3;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\n\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {SingleSuggestion} from './SingleISugesstion';\nimport styles from '../CommonCitations/style.module.scss';\n\ninterface Props {\n data: any[];\n store?: CurrentPageStore;\n isQueried?: boolean;\n customCallback?: () => void;\n}\n\n\nexport const InternalLinksSuggestions = observer(({data, store, isQueried, customCallback}: Props) => {\n return <>\n \n {data?.length ?\n data?.map((suggestion, id) => (\n \n )) : isQueried ?\n \n No Internal Link Suggestions found that match your search.\n :\n store?.content?.targetKeywords?.length === 0 ?\n \n Please add Target Keywords to get Internal Link Suggestions.\n : \n No Internal Link Suggestions found for these Target Keywords.\n }\n \n\n ;\n});\n\n\nconst DropdownsContainer = styled.div`\n background-color: #2D2F34;\n max-height: 340px;\n overflow-y: auto;\n padding-right: 15px;\n padding-left: 15px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n","\nimport {CommonCitationsType} from '@/store/content-optimizer/CurrentPageModel';\nimport {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n citation: CommonCitationsType;\n}\n\nexport const SingleCitation = observer(({citation}: Props) => {\n const addDefaultSrc = e => {\n e.target.src = '/img/world-wide-web.svg';\n };\n\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)} src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc.length > 90 ?\n \n {citation?.metaDesc.substring(0, 90) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by: \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp.metaDesc.length > 70 ? serp.metaDesc.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 7 && (\n {`+${citation?.serps?.length - 7}`}\n )}\n \n : null}\n\n \n ;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SingleCitation} from './SingleCitation/SingleCitation';\nimport styles from './style.module.scss';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n store: CurrentPageStore;\n}\nexport const CommonCitations = observer(({store}: Props) => {\n return <>\n {store?.analytics?.commonCitations?.length ? \n \n {store?.analytics?.commonCitations.map(citation => {\n return (citation.url || citation.metaDesc) && ;\n })}\n \n :\n !store?.content?.targetKeywords?.length ? \n Please add Target Keywords to get Common Citations.\n : \n No Common Citations found for these Target Keywords.\n }\n ;\n});\n","import {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\n\nexport const SidebarTooltip = observer(props => {\n return \n {props.children}\n ;\n});\n","import {observer} from 'mobx-react';\nimport {ChangeEvent, Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled, {css, keyframes} from 'styled-components';\nimport {Tooltip, Form, Dropdown, Radio} from 'antd';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport Text from 'antd/lib/typography/Text';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {Button as CommonBtn, CommonInput} from '@/components/common-components/components';\nimport {Loader} from '../../../Utils/loader';\nimport {addProtocolToDomain, sanitizeUrl} from '@/utils/url';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPen, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {Button} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {Input} from '@/components/common-components/v2';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\n// import {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\n// import { toJS } from 'mobx';\n// import { LoadingOutlined } from '@ant-design/icons';\n\ninterface Props {\n store: CurrentPageStore;\n currentView?: 'links' | 'terms';\n onViewChange?: Dispatch>;\n visibleKeywords?: any[];\n updateKeywords?: (kwArray) => void;\n onFilter: (query: string[]) => void;\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const SuggestionsDataController = observer(({\n store,\n currentView,\n onViewChange,\n visibleKeywords,\n updateKeywords,\n onFilter,\n viewSuggestionsOption,\n linksDropDownFromSuggestion,\n}: Props) => {\n const [showEditor, setShowEditor] = useState(false);\n const [isCloseClicked, setIsCloseClicked] = useState(false);\n const [form] = Form.useForm();\n const [inputValue, setInputValue] = useState(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n const [submitDisabled, setSubmitDisabled] = useState(true);\n const isNotPublic = !isScaPublicPage();\n\n // const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n const {Group} = Radio;\n useEffect(() => {\n onViewChange(linksDropDownFromSuggestion);\n }, [linksDropDownFromSuggestion]);\n\n\n // const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n const hostnameEditor = \n {\n if (!isCloseClicked) {\n try {\n await store?.updateHostname(inputValue);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setShowEditor(false);\n } catch (e) {\n return Promise.reject(e);\n }\n }\n }}\n initialValues={{\n urlInput: inputValue,\n }}>\n {'Page URL'} \n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n {\n setInputValue(e.target.value);\n if (!e.target.value) {\n setSubmitDisabled(true);\n } else {\n setSubmitDisabled(false);\n }\n }\n }\n placeholder={t('enter-url')} />\n\n \n \n {\n e.preventDefault();\n setInputValue(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n setShowEditor(false);\n }}\n disabled={store?.isUpdatingHostname}\n >\n {store?.isUpdatingHostname ? : t('cancel')}\n \n setIsCloseClicked(false)}\n >\n {store?.isUpdatingHostname ? : 'Update'}\n \n \n\n \n ;\n\n const topMessage = \n {hostnameEditor}\n {isNotPublic && (store?.content?.importedFromUrl || store?.content?.hostname ? <>\n \n Suggestions shown for \n \n {sanitizeUrl(store?.content?.hostname ?? store?.content?.importedFromUrl)}\n \n \n \n setShowEditor(!showEditor)} style={{marginLeft: 'auto'}}>\n \n : <>\n To get Link Suggestions setShowEditor(!showEditor)}>specify a Page URL \n )}\n ;\n\n const viewChangeDropdown = \n e.stopPropagation()}>\n onViewChange(e.target.value)}>\n Internal Link Suggestions \n External Link Suggestions \n \n \n ;\n\n const keywordsDropdown = \n Show Internal Link Suggestions for following target keywords: \n e.stopPropagation()}>\n {visibleKeywords?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const viewControlls = \n \n \n {currentView === 'links' ? 'Internal Links' : 'External links'} \n \n \n\n {currentView === 'links' ? \n Keywords {visibleKeywords?.filter(kw => kw.active)?.length} / {visibleKeywords?.length} \n : null}\n\n ;\n\n const SearchAndSort = \n \n termSearchHandler(e)}/>\n \n {/* \n {store?.isAnalyzing ? : \n {toJS(store.content?.internalLinkSuggestions)?.map((cluster, id) => {\n return \n \n Link Suggestions in cluster: \n {cluster.results?.length} \n \n }>\n item.trim() === cluster.keyword).length > 0}\n onClick={() => handleOnClusterClick(cluster.keyword)}>{`#${cluster.keyword} - ${cluster.results?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n */}\n ;\n\n return \n {topMessage}\n {viewControlls}\n {SearchAndSort}\n ;\n});\n\nconst Wrapper = styled.div`\n margin-bottom: 10px;\n`;\n\nconst EditorContainer = styled.div<{show: boolean}>`\n display: ${p => p.show ? 'block' : 'none'};\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n border-radius: 5px;\n position: absolute;\n top: 20px;\n right: 0;\n padding: 15px 10px;\n width: 300px;\n z-index: 1;\n `;\nconst FormStyled = styled(Form)`\n .ant-form-item {\n margin-bottom: 10px;\n }\n\n .ant-form-item-explain.ant-form-item-explain-error {\n div {\n color: #ff4d4f;\n }\n }\n `;\n\nconst HostnameContainer = styled.div`\n position: relative;\n display: flex;\n font-size: 12px;\n margin-bottom: 10px;\n`;\nconst HostnameLink = styled.a`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 150px);\n margin-left: 5px;\n color: #34AEF3;\n`;\nconst HostnameLinkBtnContainer = styled.div`\n width: 14px;\n height: 14px;\n margin-left: 10px;\n cursor: pointer;\n`;\n\nconst ViewControllsContainer = styled.div`\n display: flex;\n`;\nconst AddNewUrlBtn = styled.div`\n font-size: 12px;\n margin-left: 5px;\n color: #40a9ff !important;\n text-decoration: underline;\n cursor: pointer;\n`;\nconst InputStyeld = styled(CommonInput)`\n `;\nconst ButtonContainer = styled(Form.Item)`\n .ant-form-item-control-input-content {\n display: flex;\n justify-content:flex-end;\n }\n `;\n\nconst CancelButton = styled(CommonBtn)`\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n padding: 5px 15px;\n\n span {\n color: #4E5156 !important;\n }\n\n &:hover, &.active, &.focus {\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n }\n `;\nconst UpdateButton = styled(CommonBtn)`\n padding: 5px 15px;\n margin-left: 10px;\n `;\nconst ViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 255px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\nconst RadioStyled = styled(Radio)`\n .ant-radio-checked .ant-radio-inner {\n background-color: #7f4ead !important;\n border-color: #7f4ead !important;\n\n &::after {\n background-color: #fff !important;\n }\n }\n`;\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst ButtonStyled = styled(Button)<{viewSuggestionsOption?: boolean}>`\n background-color: #323539;\n border: 1px solid transparent;;\n font-size: 13px;\n padding: 8px 14px;\n margin: 0 9px 0 0 !important;\n\n &:hover, &:focus {\n background-color: transparent !important;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 230px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\n\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\n// const ClusterTooltipSingleRow = styled.div`\n// display: flex;\n// justify-content: space-between\n// `;\n// const ClusterTooltipLabel = styled.div`\n// font-size: 12px;\n// font-weight: 400;\n// color: #E8E8E8;\n// `;\n\n// const ClusterTooltipValue = styled.div`\n// font-size: 12px;\n// font-weight: 500;\n// color: #FFFFFF;\n// `;\n\nconst SearchAndSortWraper= styled.div `\n margin-top: 10px;\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\n\n// const ClustersWrapper = styled.div`\n// display: flex;\n// `;\n// const ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n// display: flex;\n// flex-wrap: wrap;\n\n// height: ${p => p.expandedClusters ? 'auto' : '25px'};\n// overflow: hidden;\n// `;\n\n// const SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n// background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n// border-radius: 60px;\n// padding: 3px 8px;\n// width: auto;\n// height: 20px;\n// font-size: 11px;\n// margin-right: 6px;\n// margin-bottom: 6px;\n// cursor: pointer;\n\n// &:hover {\n// background-color: #4B4D51 !important;\n// }\n// `;\n\nconst InputStyled = styled(Input)`\n height: 32px;\n`;\n","import {observer} from 'mobx-react';\nimport React, {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {LinkSuggestionsDropdownController} from '../DropdownController/LinkSuggestionsDropdownController';\nimport {InternalLinksSuggestions} from './InternalLinkSuggestions/InternalLinkSuggestions';\nimport {CommonCitations} from './CommonCitations/CommonCitations';\nimport {useStore} from '@/store/root-store';\nimport {SuggestionsDataController} from '../DropdownController/SuggestionsDataController';\nimport {toJS} from 'mobx';\nimport {Button, Input, Popover, Radio, Spin, Tooltip, Form} from 'antd';\nimport {exportLinkIcon} from '@/utils/icons';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import { SmallBadge } from '@/components/common-components/components/badge';\nimport {Pill} from '@/components/layoutV2/user-menu/styles';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\nimport {notification} from '@/utils/notification-v2';\nimport {apiError} from '@/utils/api';\n\ninterface LinkSuggestionTabPRops {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const LinkSuggestionsTab = observer(({viewSuggestionsOption, linksDropDownFromSuggestion}: LinkSuggestionTabPRops) => {\n const [currentView, setCurrentView] = useState<'links' | 'terms'>('links');\n const [activeKeywordsList, setActiveKeywordsList] = useState([]);\n const [searchQuery, setSearchQuery] = useState([]);\n const [dataArr, setDataArr] = useState([]);\n const [initialDataArr, setInitialDataArr] = useState([]);\n const [isQueried, setIsQueried] = useState(false);\n const [anyButtonClicked, setAnyButtonClicked] = useState(false);\n const antIcon = ) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n if (e.target.value.length) setUrlsError('');\n setInputValue(e?.target?.value);\n }\n };\n\n const addDomainPopoverContent = () => {\n return \n To continue, provide a source of Internal links \n \n \n \n \n \n \n \n Add a domain \n We’ll scan the domain and provide inlinks recommendations \n {selectedOption === 'domain' &&\n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n setDomain(e.target.value)}\n />\n \n }\n \n \n \n \n \n \n \n \n Provide URLs \n Write or paste a list of URLs and we’ll find the best fit for them \n {selectedOption === 'urls' &&\n <>\n \n {urlsError&& {urlsError} }\n \n }\n \n \n \n \n ;\n };\n\n const popoverInnerStyle = {\n width: '500px',\n borderRadius: '10px',\n border: '1px solid #D9D9D9',\n background: 'var(--White, #FFF)',\n boxShadow: '0px 1px 20px 0px rgba(0, 0, 0, 0.19)',\n };\n\n\n return <>\n {\n onDataFilter(kwArr);\n }}\n visibleKeywords={activeKeywordsList}\n onFilter={setLinks}\n viewSuggestionsOption={viewSuggestionsOption}\n />\n \n \n \n \n \n Internal links help search engines understand how your content interrelates.\n \n \n {`Links in of the page: ${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.filter(link => link.isUsed).length ?? 0}/${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.length ?? 0}`}\n \n }>\n \n\n {getMsg(calculateUsagePercentage(toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks))}\n \n \n Add links to content easily with AI
\n {dataArr?.length && (currentView == 'links' || currentView == 'terms') ? {\n (dataArr?.length && (currentView == 'links' || currentView == 'terms')) && postLInkSuggestion(currentView);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
:\n \n \n Launching AI Links Assistant.\n Do not modify your article before this tool is fully loaded\n : ''}>\n {\n setIsVisiblePopover(true);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
\n \n }\n \n {currentView === 'links' ? a.isBookmarked > b.isBookmarked ? -1 : 1)} store={currentPage}/> : }\n \n ;\n});\n\nconst Wrapper = styled.div`\n background-color: #2d2f34;\n border-radius: 5px;\n padding: 0 0 13px 0;\n`;\nconst SuggestionsBannerContainer = styled.div<{percent?: number}>`\n background-color: ${p => p.percent < 75 ? '#F1AA3E1C' : '#1FAC471C'};\n border-radius: 5px;\n padding: 9px 10px;\n font-size: 12px;\n margin: 10px 6px;\n\n .infoBannerIcon {\n width: 15px;\n color: ${p => p.percent < 75 ? '#F1AA3E' : '#1FAC47'};\n margin-right: 5px;\n }\n`;\n\nconst TooltipTitle = styled.div`\n`;\nconst TooltipDescription = styled.div`\n font-size: 12px;\n color: #a3a4a4;\n`;\n\nconst LinksWrapper = styled.div<{anyButtonClicked?: boolean}>`\n\nbackground-image: linear-gradient(to left, rgb(52 174 243 / 9%), rgba(52, 174, 243, 0.42));\ndisplay: flex;\n// justify-content: space-between;\nheight: 35px;\nalign-items: center;\nmargin: 0 7px 20px 7px;\npadding: 0 15px;\nborder-radius: 5px;\np{ \n margin-bottom: 0;\n font-size: 12px;\n &:last-child{\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 30%;\n margin-left: 10px;\n color: #34AEF3;\n cursor: ${props => props.anyButtonClicked ? 'not-allowed' : 'pointer'};\n text-decoration: underline;\n }\n}\n`;\n\nconst StyledPopover = styled(Popover)`\n .ant-popover-inner-content {\n padding: 0px !important;\n }\n`;\n\nconst PopoverContentWrapper = styled.div`\n margin: 6px 4px;\n`;\n\nconst PopoverTitle = styled.p`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin-bottom: 15px !important;\n`;\n\nconst AddDomainSection = styled.div`\n display: flex; \n width: 460px;\n min-height: 50px;\n flex-shrink: 0;\n border-radius: 12px 12px 0px 0px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n padding: 12px 16px;\n`;\n\nconst ProvideUrlsSection = styled.div`\n display: flex;\n width: 460px;\n min-height: 58px;\n flex-shrink: 0;\n border-radius: 0px 0px 12px 12px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n margin-bottom: 15px;\n padding: 12px 16px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n`;\n\nconst AddDomainTitle = styled.div`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 2px;\n`;\n\nconst AddDomainDesc = styled.div`\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 10px;\n`;\n\nconst AddDomainInput = styled(Input)`\n width: 400px;\n height: 32px;\n flex-shrink: 0;\n border-radius: 6px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--White, #FFF);\n`;\n\nconst DomainDetails = styled.div`\n .ant-form-item {\n margin-bottom: 0px !important;\n } \n\n`;\n\nconst ProvideUrlsDetails = styled.div`\n \n`;\n\nconst Dismiss = styled.button`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Body-background, #F2F2F5);\n border: none;\n cursor: pointer;\n`;\n\nconst Update = styled(Button)`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Blue, #2D6CCA);\n color: white;\n min-width: 120px;\n &:hover {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n &:focus {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n`;\n\nconst ErrorMessageForURL = styled.span`\n color: #ff4d4f;\n font-size: 14px;\n line-height: 1.5715;\n`;\n","import {useCallback, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {\n Divider,\n Row,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faFilePlus, faMessageCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useTranslation} from 'next-i18next';\nimport {QuestionModel} from '@/store/content-optimizer/CurrentPageModel';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {debounce, isNil} from 'lodash';\nimport {insertText} from '@/utils/editor-scripts';\nimport {EditorState} from 'draft-js';\n\ninterface Props {\n question: QuestionModel;\n i: number | string;\n}\n\n\nexport const SingleQuestion = observer(({question, i}: Props) => {\n const {contentOptimizer: {\n contentFragment,\n },\n } = useStore('');\n const {contentOptimizer: {currentPage, aiOutline}} = useStore('');\n const [copySuccess, setCopySuccess] = useState(false);\n const [aiCopied, setAiCopied] = useState(false);\n const [creatingPage, setCreatingPage] = useState(false);\n const [isAiGenerating, setIsAiGenerating] = useState(false);\n const {t} = useTranslation('common');\n\n const antIcon = \n {t('question')}
\n {question.keyword ? question.keyword : null}
\n \n {question?.sv !== undefined && question?.sv !== null && {`SV: ${searchVolumeFormatter(question.sv)}`}}\n {question?.cpc !== undefined && question?.cpc !== null && {`CPC: ${costPerClickFormatter(question.cpc)}`}}\n \n {t('number-of-uses')}
\n \n {question?.usedCount ?? ''}\n
\n \n }\n >\n \n \n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n }}>\n \n {question?.keyword ?? ''}\n
\n ;\n});\n","\nimport {Typography, Spin, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleQuestion} from './SingleQuestion';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport {copyToClipboardWithHtmlAndText} from '@/utils/clipboard';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const QuestionsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {t} = useTranslation('common');\n\n const {Title} = Typography;\n const antIcon = \n Questions {currentPage?.isAnalyzing ? <Spin indicator={antIcon} style={{marginRight: '20px'}}/> :\n currentPage?.analytics?.questions?.length ? <span className={styles.totalQuestions}>{`${currentPage?.analytics?.questions?.filter(question => question?.usedCount > 0)?.length}/${currentPage?.analytics?.questions?.length}`}</span> : null}\n <Tooltip\n title={copySuccess ? <span><FontAwesomeIcon icon={faCheck} style={{color: '#2AC155'}}/>{` Copied to clipboard`}</span> : t('copy-to-clipboard')}\n placement='top'\n overlayClassName={styles.copyTooltip}\n onVisibleChange={visible => {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n <div style={{cursor: 'pointer', color: '#34AEF3', marginLeft: 'auto'}}\n onClick={() => {\n let htmlString = '<p></p>';\n let string = '';\n currentPage?.analytics?.questions?.map(question => {\n htmlString += (`<p>${question.keyword}?</p>`);\n string += (`${question.keyword}?`);\n });\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlString, 'text/html');\n const copiedText = doc.body.textContent;\n navigator.clipboard.writeText(copiedText);\n\n // Example usage:\n const htmlContent = htmlString;\n const plainTextContent = string;\n\n copyToClipboardWithHtmlAndText(htmlContent, plainTextContent);\n setCopySuccess(true);\n }}>\n <FontAwesomeIcon icon={faCopy} style={{marginRight: 5}}/> Copy all\n </div>\n </Tooltip>\n \n {currentPage?.analytics?.questions?.length ? \n \n {currentPage?.analytics?.questions?.map((question, i) => {\n return ;\n })}\n \n :\n \n {/* ('');\n const {contentOptimizer: {currentPage: {addFocusTerms, isFocusTermsLoading}}} = useStore('');\n\n const onClose = () => {\n setShowAddFocusTermModal(false);\n setTerms('');\n };\n\n const handleTerms = (e: React.ChangeEvent) =>{\n const value = e.target.value;\n setTerms(value.replaceAll(',', '\\n'));\n };\n\n const handleAddFocusTerms = async () => {\n try {\n await addFocusTerms({terms: stringToArray(terms, keywordNewLineReg, ',' )});\n onClose();\n notification.success('', 'Focus terms added successfully');\n } catch (error) {\n const errorMessage = apiError(error) as string;\n notification.error('', errorMessage || 'Something went wrong please try again');\n }\n };\n\n return (\n \n Add focus terms \n Provide your own terms and get usage recommendations to elevate your writing. \n \n \n \n );\n});\n\nexport default AddFocusTermModal;\n\nconst StyledModal = styled(Modal)`\n .ant-modal-content{\n border-radius: 12px;\n background: var(--White, #FFF);\n }\n`;\n\nconst Title = styled.div`\n color: var(--Text-black, var(--Black, #121212));\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`;\n\nconst Desc = styled.div`\n width: 370px;\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 4px;\n`;\n\nconst TextArea = styled.div`\n margin-top: 22px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 24px;\n\n .cancel-btn {\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n background-color: transparent;\n border: none;\n cursor: pointer;\n }\n\n .add-btn {\n display: flex;\n width: 115px;\n height: 44px;\n /* padding: 13px 60px 14px 30px; */\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 6px;\n background: var(--Green, #2AC155);\n color: white;\n color: var(--White, var(--White, #FFF));\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n }\n .ant-btn[disabled] {\n background: #f5f5f5 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n }\n`;\n","import {useEffect, useState} from 'react';\nimport {\n Tabs as CommonTabs,\n TabPane as CommonTabPane,\n} from '@/components/common-components/components';\nimport {\n Spin,\n} from 'antd';\nimport {\n LoadingOutlined,\n} from '@ant-design/icons';\nimport styles from './style.module.scss';\nimport {useTranslation} from 'next-i18next';\n// import {VideoPopOver} from '@/components/common-components/components/popover';\nimport {FocusTermsTab} from './FocusTermsTab/FocusTermsTab';\nimport {observer} from 'mobx-react';\nimport {LinkSuggestionsTab} from './LinkSuggestionsTab/LinkSuggestionsTab';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {QuestionsTab} from './QuestionsTab/QuestionsTab';\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_FOCUS_TERMS_TAB_OPEN, SCA_PAGE_QUESTIONS_TAB_OPEN, SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN} from '@/constants/events';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\nimport AddFocusTermModal from './DropdownController/AddFocusTermModal';\n\ninterface FocusTermsTabsProps {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\nconst secondAntIcon = onChangeTab(key)}\n >\n \n \n \n {t('topical-terms')}\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedTerms}\n /{currentPage?.analytics?.focusTerms?.length}\n )\n }\n \n \n \n }\n key='1'\n style={{'outline': 'none'}}>\n \n \n \n Questions\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedQuestions}\n /{currentPage?.analytics?.questions?.length}\n )\n }\n \n \n \n }\n key='2'\n style={{'outline': 'none'}}>\n {isNotPublic && \n \n \n Link Suggestions\n \n \n {currentPage?.isFetchingIntLinksSug ?\n () :\n (\n {currentPage?.content?.totalUsedSuggestions}\n /{currentPage?.content?.internalLinkSuggestionsV2?.allLinks?.length}\n )\n }\n \n \n \n }\n key='3'\n style={{'outline': 'none'}}>\n \n \n \n \n );\n});\n\nconst CommonTabsStyled = styled(CommonTabs)`\n .rc-tabs-extra-content {\n background-color: transparent !important;\n border: 1px solid $color-gray-dark-medium;\n border-radius: 5px;\n cursor: pointer;\n font-size: $font-size-12;\n height: 25px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n padding: 0 5px;\n transition: all 0.2s ease-in;\n }\n\n .focusTermsTabTitleValue {\n color: $color-gray-light;\n display: block;\n font-size: $font-size-12;\n font-weight: 400;\n margin-left: 5px;\n\n .ant-spin-spinning {\n height: 10px;\n }\n\n .customSpinner {\n font-size: 12px !important;\n }\n }\n\n .rc-tabs-content-holder {\n background-color: transparent !important;\n padding-top: 15px;\n }\n\n .rc-tabs-nav {\n border-bottom: 1px solid #4E5156;\n }\n .rc-tabs-nav-list {\n justify-content: space-between;\n }\n .rc-tabs-nav-operations {\n display: none !important;\n }\n\n .rc-tabs-tab {\n margin-left: 20px !important;\n\n &:first-child {\n margin-left: 0px !important;\n }\n }\n\n @media screen and (max-width: 1400px) {\n .rc-tabs-tab {\n margin-left: 0px !important;\n margin-right: 15px !important;\n }\n \n }\n\n .rc-tabs-tab-btn {\n padding: 5px 0 !important;\n }\n\n .rc-tabs-ink-bar {\n background-color: #F1AA3E !important;\n border-radius: 2px;\n }\n`;\n\nconst TabsStyled = styled(CommonTabPane)<{expanded: boolean; editorScrolled: boolean}>`\n \n .ant-collapse {\n overflow-y: ${p => p.expanded ? 'auto' : 'inherit'};\n height: ${p => p.expanded ? `calc(100vh - ${p.editorScrolled ? 292 : 300}px)` : 'auto'};\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n }\n`;\n\nconst TabTitleContainer = styled.div<{active: boolean}>`\n\n .tabTitle {\n font-weight: 400;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n\n .tabExtraInfo {\n padding-bottom: 8px;\n\n .tabUsageContainer {\n display: flex;\n\n .usageValue {\n font-size: 18px;\n font-weight: 600;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n .totalValue {\n span {\n font-size: 12px;\n color: #A3A4A4;\n }\n }\n }\n }\n\n`;\n","/* eslint-disable max-len */\n\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {ReactNode} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport styles from './style.module.scss';\n\n\ninterface Props {\n label: string;\n value?: number;\n tooltipLabel?: string | ReactNode;\n showTooltip?: boolean;\n loading?: boolean;\n min?: number;\n max?: number;\n headingData?:{\n h1: number;\n h2: number;\n h3: number;\n h1Min: number;\n h1Max: number;\n h2Min: number;\n h2Max: number;\n h3Min: number;\n h3Max: number;\n };\n linksData?:{\n internalLinks: number;\n externalLinks: number;\n internalLinksMin: number;\n internalLinksMax: number;\n externalLinksMin: number;\n externalLinksMax: number;\n };\n}\n\nexport const SingleMetrics = observer(({label, value, tooltipLabel, showTooltip, loading, min, max, headingData, linksData}:Props) => {\n const secondAntIcon = \n {label === 'Headings:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n \n :\n <>\n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n :\n }\n :\n label === 'Links:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n linksData.internalLinksMax) ? faArrowDown : faCheck} color={(linksData.internalLinks < linksData.internalLinksMin) || (linksData.internalLinks > linksData.internalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '} Internal: {linksData.internalLinks}\n \n {`${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `/` : '/'} ${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `${linksData.internalLinksMin}-${linksData.internalLinksMax}` : ''}`}\n \n \n \n linksData.externalLinksMax) ? faArrowDown : faCheck} color={(linksData.externalLinks < linksData.externalLinksMin) || (linksData.externalLinks > linksData.externalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '}External: {linksData.externalLinks}\n \n {`${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `/` : ''} ${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `${linksData.externalLinksMin}-${linksData.externalLinksMax}` : ''}`}\n \n \n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n :\n <>\n {label} \n {!loading ?\n showTooltip ?\n \n \n max) ? faArrowDown : faCheck} color={(value < min) || (value > max) ? '#FF8536' : '#1FAC47'}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n \n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n cursor: default;\n height: 18px;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1FAC47' : '#F44343'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 2px;\n margin-right: 3px;\n`;\nconst RangeValues = styled.div`\n color: #A3A4A4 !important;\n font-size: 10px;\n display: inline-flex;\n margin-left: 2px;\n\n @media screen and (max-width: 1400px) {\n font-size: 8px;\n }\n`;\nconst StyledLable = styled.p`\n margin-bottom: 0px;\n width: 72px;\n text-align: end;\n margin-right: 5px;\n color: #E8E8E8;\n`;\nconst StyledIcon = styled(FontAwesomeIcon)`\n width: 12px;\n`;\n","/* eslint-disable no-console */\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {isNil} from 'lodash';\nimport {SingleMetrics} from '../SingleMetrics';\nimport {SkeletonHorizontalLoaderGray} from '@/components/common-components';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck, faArrowUpRightFromSquare} from '@fortawesome/pro-regular-svg-icons';\nimport {useState, Dispatch, SetStateAction} from 'react';\nimport {Tabs, Tooltip} from 'antd';\nimport {TabPane} from 'rc-tabs';\nimport {toJS} from 'mobx';\n\ninterface ContentScoreProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const ContentScore = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: ContentScoreProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n isWordCountLoading,\n feTargetKeywords,\n currentEditorState,\n isScoreLoading,\n isFetchingIntLinksSug,\n analytics,\n content: {\n score,\n scoreExtended,\n wordCount,\n suggestedWordCountLimits,\n scoreCounts,\n internalLinkSuggestionsV2,\n },\n },\n }} = useStore('');\n\n const [activeKey, setActiveKey] = useState('internal');\n\n const chartOption={\n grid: {\n top: '0px',\n bottom: '0px',\n },\n series: [{\n min: 0,\n max: 100,\n type: 'gauge',\n axisLine: {\n roundCap: false,\n lineStyle: {\n width: 10,\n color: [\n [0.33, '#f44343'],\n [0.66, '#f1aa3e'],\n [1, '#1ea745'],\n ],\n },\n },\n progress: {\n show: false,\n },\n startAngle: 180,\n radius: '90%',\n endAngle: 0,\n pointer: {\n width: 4,\n icon: 'roundRect',\n length: '25%',\n offsetCenter: [0, '-80%'],\n itemStyle: {\n color: '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n splitLine: {\n distance: -13,\n length: 15,\n lineStyle: {\n color: '#24262a',\n width: 6,\n },\n },\n splitNumber: 3,\n axisLabel: {\n show: false,\n color: 'auto',\n distance: 40,\n fontSize: 20,\n },\n detail: {\n show: false,\n },\n data: [{\n value: score ?? 0,\n }],\n }],\n };\n\n const viewSuggestionHandler = (key: 'links' | 'terms') => {\n setViewSuggestionsOption(true);\n setLinksDropDownFromSuggestion(key);\n setTimeout(() => {\n setViewSuggestionsOption(false);\n }, 1000);\n };\n const scoreLeftPosition = (score?: number) => {\n if (!score || score === 0) return '31%';\n if (score < 100 ) return '27%';\n if (score === 100 ) return '21%';\n };\n const avgTopLeftPosition = (avg?: number, top?: number) => {\n if (!avg && !top) return '25%';\n return '17%';\n };\n\n const shouldShowTooltip = (min?: number, max?: number) => {\n if (isNil(min) || isNil(max)) {\n return false;\n }\n\n return true;\n };\n\n const tooltipMsg = (key: string, min?: number, max?: number, cur?: number) => {\n let msg = '';\n if (cur <= min) msg = `Try to use more ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= max) msg = `Try to use less ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= min && cur <= max) msg = `Good job. You're in the optimal range.`;\n return msg;\n };\n\n const setHeadingsTooltip = (h1value: number, h1Min: number, h1Max: number, h2value: number, h2Min: number, h2Max: number, h3value: number, h3Min: number, h3Max: number) => {\n return \n \n H1 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h1value}/{h1Min}-{h1Max}\n \n
\n \n H2 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h2value}/{h2Min}-{h2Max}\n \n
\n \n H3 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h3value}/{h3Min}-{h3Max}\n \n
\n ;\n };\n const onChangeTab = key => {\n setActiveKey(key);\n };\n\n const openText = scrollToText => {\n const anchorTag = document.querySelector('a[href=\"' + scrollToText + '\"]') as HTMLElement;\n if (anchorTag) {\n anchorTag?.classList.add('animateAnchor');\n anchorTag?.scrollIntoView({behavior: 'smooth', block: 'start'});\n setTimeout(() => {\n anchorTag?.classList.remove('animateAnchor');\n }, 3000);\n }\n };\n\n\n const setLinksTooltip = (internalLinksData, externalLinksData) => {\n return \n onChangeTab(key)}\n >\n \n Recommended:\n {internalLinksData.internalLinksMin} - {internalLinksData.internalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? ()=> viewSuggestionHandler('links') : ()=> {}}>\n {!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {internalLinksData.internalLinksLength}\n internalLinksData.internalLinksMax) ?\n faArrowDown : faCheck}\n color={(internalLinksData.internalLinksLength < internalLinksData.internalLinksMin) ?\n 'red' : (internalLinksData.internalLinksLength > internalLinksData.internalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {internalLinksData?.internalLinks?.map((item, index) => openText(item)}>{item} \n window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n Recommended:\n {externalLinksData.externalLinksMin} - {externalLinksData.externalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? ()=> viewSuggestionHandler('terms') : ()=> {}}>\n {!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {externalLinksData.externalLinksLength}\n externalLinksData.externalLinksMax) ?\n faArrowDown : faCheck}\n color={(externalLinksData.externalLinksLength < externalLinksData.externalLinksMin) ?\n 'red' : (externalLinksData.externalLinksLength > externalLinksData.externalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {externalLinksData?.externalLinks?.map((item, index) => openText(item)}>{item} window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n ;\n };\n\n const countsSetup = [{\n label: 'Word Count:',\n value: wordCount,\n min: suggestedWordCountLimits?.lower,\n max: suggestedWordCountLimits?.upper,\n tooltipLabel: tooltipMsg('words', suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper, wordCount),\n showTooltip: shouldShowTooltip(suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper),\n loading: isWordCountLoading,\n },\n {\n label: 'Paragraphs:',\n value: scoreCounts?.paragraphs,\n min: scoreCounts?.paragraphsMin,\n max: scoreCounts?.paragraphsMax,\n tooltipLabel: tooltipMsg('paragraphs', scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax, scoreCounts?.paragraphs),\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n },\n {\n label: 'Headings:',\n value: scoreCounts?.headings,\n min: scoreCounts?.headingsMin,\n max: scoreCounts?.headingsMax,\n // tooltipLabel: tooltipMsg('headings', scoreCounts?.headingsMin, scoreCounts?.headingsMax, scoreCounts?.headings),\n tooltipLabel: setHeadingsTooltip(scoreCounts?.h1, scoreCounts?.h1Min, scoreCounts?.h1Max, scoreCounts?.h2, scoreCounts?.h2Min, scoreCounts?.h2Max, scoreCounts?.h3, scoreCounts?.h3Min, scoreCounts?.h3Max),\n showTooltip: false,\n loading: isWordCountLoading,\n headingData: {\n h1: scoreCounts?.h1,\n h2: scoreCounts?.h2,\n h3: scoreCounts?.h3,\n h1Min: scoreCounts?.h1Min,\n h1Max: scoreCounts?.h1Max,\n h2Min: scoreCounts?.h2Min,\n h2Max: scoreCounts?.h2Max,\n h3Min: scoreCounts?.h3Min,\n h3Max: scoreCounts?.h3Max,\n },\n },\n {\n label: 'Links:',\n value: 30,\n min: 2,\n max: 12,\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n tooltipLabel: setLinksTooltip(\n {\n internalLinks: toJS(scoreCounts?.internalLinks),\n internalLinksLength: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n },\n {\n externalLinks: toJS(scoreCounts?.externalLinks),\n externalLinksLength: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n externalLinksMin: scoreCounts?.externalLinksMin,\n externalLinksMax: scoreCounts?.externalLinksMax,\n },\n ),\n linksData: {\n internalLinks: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n externalLinks: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n externalLinksMax: scoreCounts?.externalLinksMax,\n externalLinksMin: scoreCounts?.externalLinksMin,\n },\n },\n // {\n // label: 'Images:',\n // value: scoreCounts?.images,\n // min: scoreCounts?.imagesMin,\n // max: scoreCounts?.imagesMax,\n // tooltipLabel: tooltipMsg('images', scoreCounts?.imagesMin, scoreCounts?.imagesMax, scoreCounts?.images),\n // showTooltip: shouldShowTooltip(scoreCounts?.imagesMin, scoreCounts?.imagesMax),\n // loading: isWordCountLoading,\n // },\n ];\n\n const contentProgressMessage = value => {\n if ((feTargetKeywords?.length == 0 || !currentEditorState?.getCurrentContent().hasText()) && value == 0) {\n return <>\n {!isScoreLoading ? \n Add Target Keywords and Start Writing to see how your content ranks\n :\n \n \n \n \n {score ?? 0}/100\n \n \n \n {`Avg: ${scoreExtended?.avg ?? '-'}`}\n \n \n {`Top: ${scoreExtended?.top ?? '-'}`}\n \n \n\n \n \n {countsSetup.map((item, idx) => {\n return ;\n })}\n \n\n \n\n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst RightSection = styled.div`\n\n`;\nconst StyleHeadingsTooltipTitle = styled.div``;\nconst StyledLinksTabs = styled(Tabs)`\ncolor: #4E5156;\nfont-size: 12px;\nfont-weight: 400;\n.ant-tabs-nav {\n margin: 0 0 12px 0;\n \n .ant-tabs-nav-wrap {\n .ant-tabs-nav-list{\n .ant-tabs-tab{\n padding: 4px 0px;\n &:hover{\n color: #121212;\n }\n }\n .ant-tabs-tab-active{\n .ant-tabs-tab-btn {\n color: #121212;\n\n }\n }\n .ant-tabs-ink-bar{\n background: #F1AA3E !important;\n height: 5px;\n border-radius: 2px 2px 0px 0px;\n }\n }\n }\n}\n`;\n\nconst TabsStyled = styled(TabPane)``;\nconst StyledLinksDiv = styled.ul`\nmax-height: 200px;\noverflow-y: auto;\nmargin-left: -15px;\n.linkopen{\n margin-left: 5px !important;\n cursor: pointer;\n &:hover{\n color: #2D6CCA !important;\n }\n}\n::-webkit-scrollbar {\n width: 4px;\n}\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb {\n background: #3E4144;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n`;\n\nconst StyledRecommender = styled.div`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\n`;\nconst StyledRecomentedValue = styled.span`\ncolor: #121212;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 600;\n`;\nconst StyledSuggestionLink = styled.a<{showAsLink}>`\ncolor: ${p=> p.showAsLink ? '#2D6CCA' : '#A3A4A4'};\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\ntext-decoration-line: none;\nmargin-left: 10px;\ncursor: ${p=> p.showAsLink ? 'pointer' : 'default'};\n&:hover{\n color: ${p=> p.showAsLink ? '#5487d4' : '#A3A4A4'};\n text-decoration-line: ${p=> p.showAsLink ? 'underline' : 'none'};\n}\n`;\nconst StyledCurrentValue= styled.p`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\nmargin-bottom: 2px;\nspan{\n color:#121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 600;\n margin-left: 4px;\n}\n`;\nconst StyledLinkItem = styled.span`\ncolor: #000;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 18px;\nmargin-bottom: 2px;\ncursor: pointer !important;\n&:hover{\n text-decoration: underline;\n}\n`;\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\nmargin-left: 6px;\nheight: 10px;\npadding-bottom:1px;\n`;\n\n// const StyledAnchor = styled.a`\n// text-decoration: none;\n// transition: text-decoration 0.2s;\n\n// &:hover {\n// text-decoration: underline;\n// }\n// `;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\n\nexport const WordCount = observer(() => {\n const secondAntIcon = \n Word count:\n {!currentPage?.isWordCountLoading ? <>\n \n = currentPage?.content?.suggestedWordCountLimits?.lower && currentPage?.content?.wordCount <= currentPage?.content?.suggestedWordCountLimits?.upper}/> \n {currentPage?.content?.wordCount} :\n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n height: 18px;\n cursor: default;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1aceb3' : '#ff8436'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 5px;\n margin-right: 5px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {ContentScore} from './ContentScore';\nimport {useTranslation} from 'next-i18next';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {Progress} from 'antd';\nimport {getProgressColor} from '@/utils/colors';\nimport {WordCount} from './WordCount/WordCount';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {Dispatch, SetStateAction} from 'react';\ninterface HeaderSectionProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const HeaderSection = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: HeaderSectionProps) => {\n const {t} = useTranslation('common');\n const {\n contentOptimizer: {\n currentPage: {\n isScoreLoading,\n focusTermsExpanded,\n isTaActive,\n isLinkActive,\n content: {\n score,\n },\n },\n }} = useStore('');\n\n\n return <>\n { (!focusTermsExpanded && (!isTaActive && !isLinkActive)) ? \n \n \n {t('content-score')} \n \n \n \n\n \n \n\n : \n \n {!isScoreLoading ? (score ?? '-') : '-'}} />\n \n \n {t('content-score')} \n \n \n \n \n \n }\n ;\n});\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst MiniTitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n\nconst MiniContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n height: 50px;\n`;\n\nconst ScoreAndWordCount = styled.div`\n display: flex;\n`;\nconst RightSection = styled.div`\n margin-left: 10px;\n`;\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < termsForInsertion?.length; i++) {\n if (!termsAssistantSuggestions?.find(item => item.termIncluded?.includes(termsForInsertion[i].name))) {\n prepArr.push(termsForInsertion[i].name);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(termsForInsertion ?? []), ...(termsAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} terms` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\ninterface SingleTermProps {\n term: any;\n}\n\nexport const SingleTerm = observer(({term}: SingleTermProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n stagingTaSuggestions,\n setTaActiveTerm,\n taActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n const [dots, setDots] = useState({\n total: 0,\n saved: 0,\n dismissed: 0,\n });\n\n useEffect(() => {\n const savedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'accepted');\n const dismissedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'dismissed');\n\n setDots(() => {\n return {\n total: term.placements,\n saved: savedPlacements?.length ?? 0,\n dismissed: dismissedPlacements?.length ?? 0,\n };\n });\n }, [...stagingTaSuggestions]);\n\n\n const generatePlacmenetsInfo = dots => {\n if (dots.saved == 0 && dots.dismissed == 0) return `${dots.total} available placements`;\n\n let response = '';\n if ((dots.total - dots.dismissed - dots.saved) > 0) response = ` ‧ ${dots.total} available`;\n if (dots.dismissed) response = `${dots.dismissed} dismissed ${response}`;\n if (dots.saved) response = `${dots.saved} accepted ${dots.dismissed > 0 ? ` ‧ ` : ``} ${response}`;\n return response;\n };\n\n const onTermClickHandler = curTerm => {\n if (!taActiveTerm?.term || taActiveTerm.term !== curTerm.name) {\n setTaActiveTerm({\n class: curTerm.name.replaceAll(' ', '-'),\n term: curTerm.name,\n order: 0,\n });\n } else {\n const totalOccurances = document.getElementsByClassName(taActiveTerm.class)?.length;\n\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: taActiveTerm.order < totalOccurances - 1 ? taActiveTerm.order + 1 : 0,\n };\n\n setTaActiveTerm(updatedValues);\n }\n };\n\n return onTermClickHandler(term)} className={taActiveTerm?.term == term.name ? 'isActive' : ''}>\n \n {term.name}
\n \n \n {generatePlacmenetsInfo(dots)}\n \n \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name))?.sort(item => item.status == 'accepted' ? -1 : item.status == 'default' ? 0 : 1)?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return ;\n if (suggestion.status == 'dismissed') return ;\n if (suggestion.status == 'accepted') return ;\n })}\n \n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: ${opaqueColor('#4E5156', 30)};\n border-radius: 10px;\n cursor: pointer;\n transition: background .3s ease-in;\n display: flex;\n\n .termName { \n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n`;\n\nconst Data = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst PlacementsInfo = styled.div`\n font-size: 12px;\n color: #A3A4A4 !important;\n`;\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 28%;\n margin-left: 2%;\n margin-top: auto;\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\n\nexport const TermsList = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n\n useEffect(() => {\n setFinalTermsList([]);\n if (termsAssistantSuggestions?.length) {\n for (let i = 0; i < termsForInsertion.length; i++) {\n const termOccurances = termsAssistantSuggestions.filter(suggestion => suggestion.termIncluded?.includes(termsForInsertion[i].name));\n if (termOccurances?.length) {\n setFinalTermsList(cur => [...cur, {...termsForInsertion[i], placements: termOccurances?.length}]);\n }\n }\n }\n }, [...(termsAssistantSuggestions ?? []), ...(termsForInsertion ?? 0)]);\n\n return \n {finalTermsList?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {CommonInput} from '@/components/common-components';\nimport {Button, Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCaretDown, faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover, Spin, Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const TermsSelectionDropdown = observer(() => {\n const [selectedTerms, setSelectedTerms] = useState([]);\n const [popoverVisible, setPopoverVisible] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n const [showLimitError, setShowLimitEror] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n fetchTaSuggestions,\n termsForInsertion,\n analytics,\n taSuggestionsLoading,\n },\n }, settings: {\n customer: {getCustomerQuota},\n }} = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}}}} = useStore('');\n\n const antIcon = \n \n \n onTermsSearchHandler(e.target.value)}/>\n \n \n \n {`AI Quota: ${quotaUtilization?.ca?.allowedAiContentGeneration?.consumed}/${quotaUtilization?.ca?.allowedAiContentGeneration?.total}`}\n \n \n \n\n \n onBulkSelectTop20Handler()}>Select top 20 terms \n onUncheckAllClickHandler()}>Uncheck all \n \n {showLimitError ?\n Please select less than 50 topical terms. :\n null}\n \n {[\n ...(analytics?.includeMoreTerms ?? []),\n ...(analytics?.includedTerms ?? []),\n ...(analytics?.includeLessTerms ?? []),\n ].filter(term => term.name.includes(searchQuery))?.map((term, idx) => {\n return \n item.name).includes(term.name)}\n onChange={e => handleCheckboxClick(e, term)}\n disabled={term.status == 'include-less'}>\n {term.name} \n \n \n \n Current usage:\n {term.usedCount}\n \n \n Recommended usage:\n {term.requiredCountMin}\n \n \n Maximum usage:\n {term.requiredCountMax}\n \n }>\n {`${term.usedCount}/${term.requiredCountMin}`} \n \n ;\n })}\n \n \n setPopoverVisible(false)}>Cancel \n \n \n \n );\n\n\n return \n onTriggerClickHandler()}>\n {`Select terms ${selectedTerms?.length}`}\n \n ;\n});\nconst Trigger = styled.div`\n color: #34aef3 !important;\n font-size: 12px;\n cursor: pointer;\n`;\nconst Wrapper = styled.div`\n\n`;\nconst HeadingSection = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\nconst SearchBox = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst QuotaInfo = styled.div`\n color: #4E5156;\n margin-bottom: 12px;\n`;\nconst CommonInputStyled = styled(CommonInput)`\n border: 0px solid transparent;\n height: 30px;\n\n &:active {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n &:hover {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n\n &::placeholder {\n color: #A3A4A4;\n font-weight: 400;\n font-size: 15px;\n }\n`;\nconst ControllsBar = styled.div`\n display: flex;\n justify-content: space-between;\n color: #2D6CCA;\n font-size: 12px;\n background: #F9F9FB;\n box-shadow: 0px 1px 0px #E8E8E8, 0px -1px 0px #E8E8E8;\n margin-left: -15px;\n margin-right: -15px;\n padding: 10px 15px\n`;\nconst BulkControllBtn = styled.div`\n cursor: pointer;\n`;\n\nconst TermsList = styled.div`\n max-height: 300px;\n overflow-y: scroll;\n margin-right: -15px;\n padding-right: 15px;\n margin-top: 10px;\n\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.12) ;\n scrollbar-track-color: rgba(138,138,138,0.32);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.4);\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n }\n`;\nconst SingleTermRow = styled.div<{opaque: boolean}>`\n display: flex;\n\n opacity: ${p => p.opaque ? '.4' : 1};\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n display: flex;\n width: 100%;\n\n .ant-checkbox-wrapper {\n width: 100%;\n }\n\n .ant-checkbox-inner {\n border-radius: 4px !important;\n }\n .ant-checkbox-checked .ant-checkbox-inner {\n background-color: #2D6CCA !important;\n border-color: #2D6CCA !important;\n border-radius: 4px !important;\n }\n`;\n\nconst TermName = styled.div`\n cursor: default;\n margin-left: 10px;\n color: #4E5156;\n`;\nconst TermUsage = styled.div`\n cursor: default;\n margin-left: auto;\n color: #4E5156;\n`;\nconst BtnsContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding-top: 10px;\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Divider, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {TermsList} from './TermsList';\nimport {TermsSelectionDropdown} from './TermsSelectionDropdown';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const TermsAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n editContent,\n stagingTaSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n },\n }} = useStore('');\n\n const antIcon =
'));\n }\n\n if (stagingTaSuggestions[i].isSuggestion) {\n if (stagingTaSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n \n \n Terms Assistant \n \n \n Go through the suggestions for inserting terms to see how they look like in your article. Accept or dismiss individual ones.\n
\n
\n * Save changes to update your article.\n \n \n \n item.status !== 'default')}\n color='green'\n style={{marginBottom: 10, width: '-webkit-fill-available', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n {updatingTa ? 'Updating Article...' : 'Save & Update Article'}\n {updatingTa ? onCancelClickHandler()}>\n Cancel\n \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 50px);\n padding-bottom: 20px;\n`;\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #e8e8e8;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {getProgressColor} from '@/utils/colors';\nimport {numberWithCommas} from '@/utils/number';\nimport {Progress, Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n competitor: SingleCompetitorType;\n loading: boolean;\n}\n\nexport const SingleCompetitor = observer(({competitor, loading}: Props) => {\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n {competitor.url && addDefaultSrc(e)}\n height={20}\n width={20}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor.url}`} />} \n \n {competitor?.url}}>\n {competitor?.title}\n \n\n \n\n \n {`#${competitor?.position}`}\n \n\n {`-`}\n\n \n \n {competitor?.contentScore}\n }\n className={styles.progress}\n />\n \n \n\n {`-`}\n\n \n \n {`${numberWithCommas(competitor?.wordCount) || 0} words`}\n \n \n \n {/* {competitor?.url && urlValidationRegex.test(competitor?.url) ?\n {competitor?.url} : null} */}\n\n {/* {competitor?.metaDesc && competitor?.metaDesc.length > 90 ? competitor?.metaDesc.substring(0, 90) + '...' : competitor?.metaDesc} */}\n \n ;\n});\n","import {useEffect} from 'react';\nimport {SingleCompetitor} from './SingleCompetitor/SingleCompetitor';\nimport styles from './style.module.scss';\nimport css from '../../index.module.scss';\nimport {Typography, Spin, Select, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const TopRankingCompetitors = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {Option} = Select;\n const {Title} = Typography;\n const antIcon = \n Top Ranking Competitors {currentPage?.isAnalyzing && <Spin indicator={antIcon} style={{marginRight: '20px'}}/>}\n \n currentPage.openCompetingFocusTermsDrawer()}>\n Analyse Content\n \n \n\n {currentPage?.analytics?.competitorsData?.length ? \n \n handleOnSortChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n {currentPage?.analytics?.competitorsData?.filter(item => item.keyword === currentPage?.topRankingCompetitorActiveKw)[0]?.competitors?.map(competitor => {\n return competitor?.title && ;\n })}\n \n :\n !currentPage?.content?.targetKeywords?.length ? \n {/* \n {\n updatedButtonConf().map((item, idx) => {\n return \n {\n if (anyButtonClicked || item.disabled) return;\n item.callback();\n }} disabled={item.disabled}>\n {item.loading ? : \n ;\n })\n }\n ;\n});\n\nconst Wrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n`;\nconst SingleItem = styled.div<{hoverColor: string; anyButtonClicked?: boolean; disabled?: boolean}>`\n width: calc(50% - 5px);\n margin-bottom: 10px;\n transition: background-color .3s ease;\n background-color: #323539;\n cursor: ${p => p.anyButtonClicked || p.disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n padding: 5px;\n border-radius: 6px;\n font-size: 13px;\n opacity: ${p => p.disabled ? .4 : 1};\n\n &:hover {\n background-color: ${p => !p.anyButtonClicked && p.hoverColor};\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {FocusTermsTabs} from './FocusTermsAndQuestions/FocusTermsTabs';\nimport {HeaderSection} from './HeaderSection';\nimport {TermsAssistantRightSidebar} from './TermsAssistant/RightSidebar';\nimport {TopRankingCompetitors} from './TopRankingCompetitors/TopRankingCompetitors';\nimport {DrawersTriggers} from './DrawersTriggers';\nimport {useState} from 'react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Analytics = observer(({changeView}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const [viewSuggestionsOption, setViewSuggestionsOption] = useState(false);\n const [linksDropDownFromSuggestion, setLinksDropDownFromSuggestion] = useState<'links' | 'terms'>('links');\n\n return \n {!currentPage?.isLinkActive && }\n {currentPage?.isTaActive ? \n \n \n {!currentPage.focusTermsExpanded ? }\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst ContentContainer = styled.div`\n overflow-y: auto;\n height: 100%;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n\n","import React from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n isSubscriber: boolean;\n isCompetitorsTable: boolean;\n setFilteredCompetitorsData: React.Dispatch>;\n setCompetitors: React.Dispatch>;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n}\n\nexport const KeywordSelector = observer(({isSubscriber, isCompetitorsTable, setFilteredCompetitorsData, setActiveKw, setCompetitors, activeKw}: Props) => {\n const {Option} = Select;\n const {contentOptimizer: {currentPage}} = useStore('');\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n if (isCompetitorsTable) {\n setFilteredCompetitorsData(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n }\n };\n\n return \n \n Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ ;\n});\n\nconst KeywordDropdownWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {Progress, Tooltip, Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {Table} from '@/components/common-components/components/index';\nimport styles from './style.module.scss';\nimport {numberWithCommas} from '@/utils/number';\nimport {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {KeywordSelector} from './KeywordSelector';\nimport {useStore} from '@/store/root-store';\nimport {NextImg} from '@/utils/nextImg';\n\n\ninterface Props {\n store: CurrentPageStore;\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsTable = observer(({\n store,\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n allSchemasCount,\n nullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n }}} = useStore('');\n const [isSmallScreen, setIsSmallScreen] = useState(true);\n const [allowScroll, setAllowScroll] = useState(false);\n\n const onWindowResize = () => {\n setIsSmallScreen(window.innerWidth < 1441);\n setAllowScroll(window.innerWidth < 768);\n };\n\n useEffect(() => {\n onWindowResize();\n window.addEventListener('resize', onWindowResize);\n return () => {\n window.removeEventListener('resize', onWindowResize);\n };\n }, []);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const getProgressColor = (value: number, min: number, average: number, max?: number) => {\n if (value <= min) {\n return '#F44343';\n }\n if (value <= average && value > min) {\n return '#FF8536';\n }\n if (value > average) {\n if (max && value < max) {\n return '#BFE15E';\n }\n return '#52D477';\n }\n return '#52D477';\n };\n\n const reFormatSchemaType = value => {\n const outputString = value.replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');\n return outputString;\n };\n\n const handleTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...competitors];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n setCompetitors(data);\n } else {\n setCompetitors(store?.analytics?.competitorsData?.filter(item => item.keyword === activeKw)[0]?.competitors);\n }\n };\n\n useEffect(() => {\n if (selectedSchema?.value == 'all-schemas') {\n setFilteredCompetitorsData(competitors);\n } else if (selectedSchema?.value == 'no-schemas') {\n setFilteredCompetitorsData(competitors?.filter(item => item?.schema?.length == 0 || item?.schema == null));\n } else {\n const selectedSchemaValue = selectedSchema?.value;\n\n const filteredItems = [];\n\n competitors?.forEach(item => {\n if (item?.schema) {\n if (Array.isArray(item?.schema)) {\n item?.schema?.forEach(ele => {\n if (ele?.graph) {\n if (Array.isArray(ele?.graph)) {\n ele?.graph?.forEach(graphItem => {\n if (Array.isArray(graphItem?.type)) {\n if (graphItem?.type?.includes(selectedSchemaValue)) {\n filteredItems.push(item);\n }\n } else if (graphItem?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n } else if (ele?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n }\n });\n\n setFilteredCompetitorsData(filteredItems);\n }\n }, [selectedSchema]);\n\n const columns = [\n {\n title: () => #,\n dataIndex: 'position',\n key: 'position',\n sortField: 'position',\n width: 45,\n fixed: allowScroll ? false : 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return {record?.position};\n },\n },\n {\n title: () => {'PAGE / URL'.toUpperCase()},\n dataIndex: 'title',\n key: 'title',\n sortField: 'title',\n fixed: allowScroll ? false : 'left' as 'left',\n width: isSmallScreen ? 300 : 'auto',\n ellipsis: true,\n align: 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${record?.url}`} /> \n {record?.title}
\n {record?.url}}>\n \n {record?.title}\n {record?.url}\n \n ;\n },\n },\n {\n title: () => {'DR'.toUpperCase()},\n dataIndex: 'dr',\n key: 'dr',\n sortField: 'dr',\n sorter: (a: any, b: any) => a.dr - b.dr,\n align: 'center' as 'center',\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.dr ? record?.dr % 1 === 0 ? record?.dr : parseFloat(record?.dr.toFixed(2)) : 0;\n return \n \n {percent}\n ;\n },\n },\n {\n title: () => {'CS'.toUpperCase()},\n dataIndex: 'contentScore',\n key: 'contentScore',\n sortField: 'contentScore',\n align: 'right' as 'right',\n sorter: (a: any, b: any) => a.contentScore - b.contentScore,\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.contentScore ? record?.contentScore % 1 === 0 ? record?.contentScore : parseFloat(record?.contentScore.toFixed(2)) : 0;\n return \n {percent }}\n />\n ;\n },\n },\n {\n title: () => {'Schema'.toUpperCase()},\n dataIndex: 'schema',\n key: 'schema',\n sortField: 'schema',\n align: 'center' as 'center',\n width: 150,\n render: (_, record: SingleCompetitorType) => {\n let schemaLength = 0;\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaLength += 1 : Array.isArray(item?.graph) && item?.graph?.map(graphItem => graphItem?.type ? schemaLength += 1 : '');\n });\n\n const schemaItemsList = [];\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaItemsList.push(item) : Array.isArray(item?.graph) && item?.graph?.map(graphItem => schemaItemsList.push(graphItem));\n });\n return \n {record?.schema != null && record?.schema != undefined && Array.isArray(record?.schema) && record?.schema?.length != 0 ?\n <>\n \n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, 0, record?.schema[0])}>{reFormatSchemaType(String(record?.schema ? (record?.schema[0]?.graph ? record?.schema[0]?.graph[0]?.type : record?.schema[0]?.type) : '-'))} \n {schemaLength > 1 &&\n <>\n , \n {schemaItemsList?.map((item, idx) =>\n <>\n {idx == 0 ? '' :\n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, idx, item)}\n style={{width: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2D6CCA', cursor: 'pointer', paddingLeft: '20px'}}>\n {reFormatSchemaType(String(item?.type))} \n }\n ,\n )}}>\n +{schemaLength - 1} \n \n }\n \n : '-'\n }\n ;\n },\n },\n {\n title: () => <>{'int'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'internalLinks',\n key: 'internalLinks',\n sortField: 'internalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.internalLinks?.length - b?.internalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.internalLinks?.length == 0 ?\n {numberWithCommas(record?.internalLinks?.length) || '-' } :\n \n {record?.internalLinks?.length > 0 ? record?.internalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.internalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => <>{'ext'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'externalLinks',\n key: 'externalLinks',\n sortField: 'externalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.externalLinks?.length - b?.externalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.externalLinks?.length == 0 ?\n {numberWithCommas(record?.externalLinks?.length) || '-' } :\n \n {record?.externalLinks?.length > 0 ? record?.externalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.externalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => {'h1'.toUpperCase()},\n dataIndex: 'h1Count',\n key: 'h1Count',\n sortField: 'h1Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h1Count - b?.h1Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h1Count) || '-' };\n },\n },\n {\n title: () => {'h2'.toUpperCase()},\n dataIndex: 'h2Count',\n key: 'h2Count',\n sortField: 'h2Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h2Count - b?.h2Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h2Count) || '-' };\n },\n },\n {\n title: () => {'h3'.toUpperCase()},\n dataIndex: 'h3Count',\n key: 'h3Count',\n sortField: 'h3Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h3Count - b?.h3Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h3Count) || '-' };\n },\n },\n {\n title: () => {'Word Count'.toUpperCase()},\n dataIndex: 'wordCount',\n key: 'wordCount',\n sortField: 'wordCount',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.wordCount - b?.wordCount,\n width: 115,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.wordCount) || '-' };\n },\n },\n ];\n\n return \n \n \n \n \n Types of Schema Found: \n \n setSelectedSchema({idx: 'all-schemas', value: 'all-schemas'})}>All schemas | {allSchemasCount} \n setSelectedSchema({idx: 'no-schemas', value: 'no-schemas'})}>No schemas | {nullCount} \n {schemaTypesList?.map((item, idx) => {\n return setSelectedSchema({idx: `${idx}`, value: item?.value})} key={idx}>{reFormatSchemaType(String(item?.value))} | {item?.count} ;\n })}\n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst DRWrapper = styled.div`\n background-color: rgba(45, 108, 202, 0.07);\n display: flex;\n border-radius: 6px;\n align-items: center;\n justify-content: center;\n width: 55px;\n height: 32px;\n padding: 7px 12px 8px 12px;\n`;\n\nconst PageUrlWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst TypesSchemaFilterWrapper = styled.div`\n\n`;\n\nconst SchemaFilterTitle = styled.div`\n color: #4E5156;\n font-size: 14px;\n margin-left: 10px;\n margin-bottom: 10px;\n`;\n\nconst SchemaFilterWrapper = styled.div`\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n margin-left: 10px;\n width: 97%;\n overflow-x: auto;\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n`;\n\nconst SchemaFilter = styled.div<{selectedSchema?: boolean}>`\n min-width: fit-content;\n min-height: 28px;\n border-radius: 14px;\n background: ${p => p?.selectedSchema ? 'linear-gradient(0deg, rgba(127, 78, 173, 0.20) 0%, rgba(127, 78, 173, 0.20) 100%), #FFF' : '#FFFF'};\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n border: ${p => p?.selectedSchema ? '1px solid #7F4EAD' : '1px solid #E8E8E8'};\n display: flex;\n padding: 5px 10px 6px 10px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n\nconst LinksContainer = styled.div`\n max-height: 300px;\n overflow-y: auto;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n\nconst LinkWrapper = styled.div`\n width: auto;\n font-size: 12px;\n line-height: 14px;\n color: rgb(45, 108, 202);\n white-space: pre-line;\n overflow-wrap: anywhere;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 8px;\n`;\n\nconst StyledAnchor = styled.a`\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst BlueTextWithUnderline = styled.div`\n color: #2D6CCA;\n cursor: pointer;\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst ULStyled = styled.ul`\n padding-left: 0px;\n max-height: 160px;\n overflow-y: auto;\n padding: 5px;\n margin-bottom: 0;\n width: 200px;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n","import styled from 'styled-components';\nimport {faArrowLeft} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {urlValidationRegex2} from '@/constants/regex';\nimport moment from 'moment';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const CompetitorsDetail = observer(() => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n competitorSchemaObject,\n competitorTitle,\n competitorUrl,\n competitorSchemaGraphIdx,\n }}} = useStore('');\n\n const formats = [\n moment.ISO_8601,\n 'MM/DD/YYYY :) HH*mm*ss',\n ];\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const renderSchemaData = dataObj => {\n return <>\n \n {mainLebel && mainLebel != '0' ? mainLebel == 'type' ? `@${mainLebel}` : mainLebel : ''} \n {typeof mainValue !== 'object' ? {typeof mainValue == 'boolean' ? `${mainValue ? 'Yes' : 'No'}` : (\n urlValidationRegex2?.test(String(mainValue)) ? {String(mainValue)} : (\n moment(mainValue, formats, true)?.isValid() || mainLebel?.includes('date') ? moment(mainValue)?.utc()?.format('DD MMM YYYY') : `${mainValue}`\n )\n )} :\n renderSchemaData(mainValue)}\n ;\n })}\n \n \n ;\n };\n\n return <>\n setShowCompetitorTermsTableDetail(false)\n }>\n \n \n \n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitorUrl}`} />\n \n \n {competitorTitle}\n {competitorUrl}\n \n \n \n @context \n {competitorSchemaObject?.context ?? '-'} \n @graph \n {renderSchemaData(competitorSchemaObject?.graph ? competitorSchemaObject?.graph[competitorSchemaGraphIdx] : competitorSchemaObject)}\n \n \n ;\n});\n\nconst BackArrowContainer = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-left: 33px;\n margin-top: 37px;\n width: max-content;\n`;\n\nconst SchemaContainer = styled.div`\n width: 95%;\n margin-left: 30px;\n margin-top: 27px;\n min-height: 630px;\n background-color: white;\n border-radius: 14px;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n`;\n\nconst SchemaLabel = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 8px;\n`;\n\nconst SchemaValue = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n`;\n\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\n\nconst URL = styled.a`\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst SchemaHeader = styled.div`\n display: flex;\n align-items: center;\n margin-left: 30px;\n margin-top: 20px;\n`;\n\nconst SchemaPageTitle = styled.div`\n\n`;\n","import {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction} from 'react';\nimport {CompetitorsTable} from './CompetitorsTable';\nimport {useStore} from '@/store/root-store';\nimport {CompetitorsDetail} from './CompetitorsDetail';\n\ninterface Props {\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsDrawerTab = observer(({\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n setSchemaTypesList,\n allSchemasCount,\n setAllSchemasCount,\n nullCount,\n setNullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer: {\n currentPage: {\n showCompetitorTermsTableDetail,\n }}} = useStore('');\n\n return showCompetitorTermsTableDetail ? ranking : not ranking }\n {`for `}\n {keyword}\n \n {/* used {keyword} {score} times */}\n \n \n);\nconst focusTermsTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n);\nexport const CompetingFocusTermsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n const {contentOptimizer: {currentPage: {analytics, isCompetingFocusTermsDrawerOpen, closeCompetingFocusTermsDrawer, isOpeningKwSuggestionsFromContentResearch, setIsOpeningKwSuggestionFromContentResearch}}} = useStore('');\n const [selectedKeyword, setSelectedKeyword] = useState('');\n const [selectedCompTabKw, setSelectedCompTabKw] = useState('');\n const [isHovered, setIsHovered] = useState(false);\n const [maxElemHeight, setMaxElemHeight] = useState(0);\n const allRef = useRef(null);\n const keywordSuggestionsRef = useRef(null);\n const [activeTab, setActiveTab] = useState('1');\n\n const antIcon = {\n setActiveTab('1');\n setIsOpeningKwSuggestionFromContentResearch(false);\n closeCompetingFocusTermsDrawer();\n }}\n closeIcon={Competitor Content Analysis \n onTabChange(key)}>\n Top competitors {currentPage?.isAnalyzing && \n \n Relevant terms grid {currentPage?.isAnalyzing && \n \n \n Competing Focus Terms \n Check what focus terms your competitors are using \n \n \n exportSingleNode(allRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => (\n {i === 0 ? 'YOU' : i} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n \n Created From Scratch\n \n \n );\n }\n return (\n \n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n CONTENT SCORE\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.contentScores?.map((score, i) => (\n {percent}}\n />\n ))}\n \n
\n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item?.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}\n \n \n Keyword suggestions {currentPage?.isAnalyzing && \n \n \n {/* Keywords Suggestions */}\n Check out what keywords your competitors are using \n \n \n exportSingleNode(keywordSuggestionsRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => {\n return (\n \n \n \n {x.url}\n \n \n Content Score: \n {x.contentScore}\n \n \n Word Count: \n {x.wordCount}\n \n \n }\n key={x?.url}\n >\n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n
\n \n \n TARGET KEYWORD\n USAGE\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.keywordSuggestionsUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: score ? '#2AC155' : '#F44343'}}> \n \n ))}\n \n ))}\n \n \n \n \n );\n});\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: 20px;\n color: #121212;\n line-height: 28px;\n`;\n\nconst TitleStyled = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n line-height: normal;\n margin: 0 0 15px 30px;\n`;\n\nconst Subtitle = styled.div`\n font-size: 16px;\n line-height: 24px;\n color: #4E5156;\n`;\n\nconst SectionHeader = styled.div`\n background: #e2e2e5;\n border-radius: 3px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Square = styled.div<{isHovered: boolean}>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\nconst SelectStyled = styled(Select)`\n width: 100%;\n\n .ant-select-arrow {\n color: #121212;\n }\n`;\n\nconst Site = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n width: auto;\n display: block;\n align-items: left;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst IsNotRanking= styled.span`\n padding: 2px 7px;\n background-color: #F44343;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import {useEffect} from 'react';\nimport {Form, Select, Spin} from 'antd';\nimport {\n Button,\n CommonInput,\n} from '@/components/common-components/components';\nimport styles from './style.module.scss';\n\nimport {useState} from 'react';\nimport {languages} from '@/components/dashboard/pages/content-ideas/drawer/languages';\nimport Flag from '@/components/common-components/components/flag';\nimport {formatCountryCode} from '@/components/dashboard/pages/content-ideas/drawer/languageUtil';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport {observer} from 'mobx-react';\nimport {LoadingOutlined} from '@ant-design/icons';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_CONTENT_IDEAS_GENERATE} from '@/constants/events';\nimport {useStore} from '@/store/root-store';\n\ninterface Props {\n store: ContentIdeasStore;\n pageId: any;\n drawerVisible: boolean;\n}\n\nexport const NewContentIdeaForm = observer(({store, pageId, drawerVisible}: Props) => {\n const {\n settings: {\n customer: {\n getCustomerQuota,\n },\n },\n } = useStore('');\n\n\n const usaCode = languages.find(lang => lang.code == 'en');\n\n\n const antIcon = Need some inspiration? Here you can generate unlimited article ideas on any topic you can think of.
\n\n \n \n );\n});\n","import {useState, useEffect} from 'react';\nimport styles from './style.module.scss';\nimport {faDownload} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n Button,\n} from '@/components/common-components/components';\nimport {CopyOutlined} from '@ant-design/icons';\n\nimport {Divider, Tooltip} from 'antd';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {SCA_PAGE_CONTENT_IDEA_COPY, SCA_PAGE_CONTENT_IDEA_DOWNLOAD} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {useTranslation} from 'next-i18next';\nimport parse from 'html-react-parser';\n\ninterface Props {\n idea: string;\n}\n\nexport const SingleContentIdea = ({idea}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [convertedText, setConvertedText] = useState(idea);\n\n const {t} = useTranslation('landing-page-optimizer');\n\n useEffect(() => {\n // Removing the leading space from string\n const newLineIndex = idea?.search('\\n');\n const textWithoutLeadingSpace = idea?.slice(0, newLineIndex + 1) + idea?.slice(newLineIndex + 2);\n const firstTitle = idea?.slice(0, newLineIndex + 1);\n const result = textWithoutLeadingSpace.replace(firstTitle, '' + firstTitle + '');\n\n setConvertedText(result);\n }, [idea]);\n\n\n const downloadFileToTxt = () => {\n const element = document.createElement('a');\n const file = new Blob([idea], {type: 'text/plain'});\n element.href = URL.createObjectURL(file);\n const breakFileName = idea.split(' ').length;\n const fileName = breakFileName > 4 ? idea.split(' ').slice(0, 4).join('-') : idea.split(' ').slice(0, breakFileName).join('-');\n element.download = `${fileName}`;\n document.body.appendChild(element);\n element.click();\n };\n\n return (\n \n \n {convertedText && parse(convertedText.trim())}\n
\n {\n downloadFileToTxt();\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_DOWNLOAD, {\n 'description': 'Content idea downloaded',\n });\n }}/>\n {\n navigator.clipboard.writeText(idea);\n setCopySuccess(true);\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_COPY, {\n 'description': 'Content idea copied',\n });\n }}>\n \n \n \n \n );\n};\n","// import {useState} from 'react';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport CsvDownloader from 'react-csv-downloader';\nimport {Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleContentIdea} from './SingleContentIdea';\nimport {ExportOutlined} from '@ant-design/icons';\nimport {Button} from '@/components/common-components/components';\n\ninterface Props {\n store: ContentIdeasStore;\n}\n\nexport const ContentIdeas = observer(({store}: Props) => {\n const csvModel = store?.wordsArray.map(item => ({\n title: item.split('\\n')[0],\n text: item.split('\\n')[1],\n }));\n\n const csvColumns = [\n {\n id: 'title',\n displayName: 'Title',\n },\n {\n id: 'text',\n displayName: 'Text',\n },\n ];\n return <>\n {store?.wordsArray.length ? \n {`${store?.wordsArray?.length} ideas generated for \"${store?.keyword}\" `}\n \n \n \n
: null}\n {store?.wordsArray && store?.wordsArray.map((idea, idx) => {\n return {\n contentIdeas.clearContentIdeas();\n setDrawerVisible(false);\n currentPage.setIsOpenContentGeneratorDrawer(false);\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={styles.contentIdeasDrawer}\n afterVisibleChange={visible => {\n if (visible) setDrawerVisible(true);\n }}\n >\n \n \n Content Helper\n \n \n \n \n \n \n );\n});\n","import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip, Spin} from 'antd';\nimport styles from './style.module.scss';\nimport {faCheck, faPlus, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport classNames from 'classnames';\n\ninterface Props {\n keyword: string;\n isIncluded?: boolean;\n}\n\nexport const SimilarKeyword = observer(({keyword, isIncluded}: Props) => {\n const {\n OverviewPage: {\n addToLoadingArray,\n loadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}, getCustomerQuota}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n const antIcon = \n {keyword ? keyword : '-'}\n \n \n\n {loadingArray && loadingArray.includes(keyword) ?\n \n \n Remove\n :\n // adding a check to disable button if total target kw limit is reached\n currentPage?.feTargetKeywords?.length < 15 ?\n onAddKeywordFinish()}>\n \n \n \n\n }\n\n \n ;\n});\n","import {useEffect, useState, useCallback} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {\n Drawer,\n Progress,\n Tooltip, Select} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport styled from 'styled-components';\nimport {formatNumber, numberWithCommas} from '@/utils/number';\nimport {Table, BarChartColumn, SkeletonRingLoader, Pagination, SkeletonHorizontalLoaderGray, Button} from '@/components/common-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {EChartOption} from 'echarts';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {getProgressColor} from '@/utils/colors';\nimport {faArrowUp} from '@fortawesome/pro-regular-svg-icons';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport numeral from 'numeral';\nimport Flag from '@/components/common-components/components/flag';\nimport {SimilarKeyword} from './SimilarKeyword';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const ContentResearchDrawer = observer(() => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const {\n countries: {getSpecificCountryByCode},\n OverviewPage: {\n isContentResearchDrawerOpen,\n loading,\n keywordDetail,\n closeContentResearchDrawer,\n getKeywordDetail,\n removeFromLoadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const countryName = getSpecificCountryByCode(keywordDetail?.countryCode);\n\n const [activeKw, setActiveKw] = useState('');\n const [similarKeywordsPageNumber, setSimilarKeywordsPageNumber] = useState(1);\n const [similarKeywordsPageSize] = useState(8);\n const [similarKeywordsData, setSimilarKeywordsData] = useState([]);\n const [similarKeywordsList, setSimilarKeywordsList] = useState([]);\n\n const [topCompetitorsData, setTopCompetitorsData] = useState([]);\n const [rankingPotentialData, setRankingPotentialData] = useState([]);\n\n const {Option} = Select;\n\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n getKeywordDetail(currentPage?.content?.targetKeywords?.filter(item => item.keyword === value)[0]?.id);\n };\n\n\n /* SIMILAR KEYWORDS TABLE UPDATE START */\n const handleFilterRenderData = useCallback((dataArray: any, pageNumber: number, pageSize: number) => {\n const targetKwArray = currentPage?.content?.targetKeywords && currentPage?.content?.targetKeywords.length ? toJS(currentPage.content.targetKeywords).map(item => {\n return JSON.stringify({\n keyword: item.keyword,\n countryCode: item.countryCode,\n locationId: item.locationId,\n location: item.location,\n });\n }) : [];\n\n let similarKeywordsFormattedData = [];\n if (dataArray.length && targetKwArray?.length ) {\n const updatedData = toJS(dataArray).map(item => {\n return {\n ...item,\n isKwIncluded: targetKwArray.includes(JSON.stringify({\n keyword: item.keyword,\n countryCode: currentPage.content.countryCode,\n locationId: currentPage.content.locationId,\n location: currentPage.content.location,\n })),\n };\n });\n\n\n similarKeywordsFormattedData = updatedData;\n } else {\n similarKeywordsFormattedData = dataArray;\n }\n setSimilarKeywordsData(similarKeywordsFormattedData.slice((pageNumber - 1) * pageSize, ((pageNumber - 1) * pageSize) + pageSize));\n }, []);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n const kwArray = [...(currentPage?.content?.targetKeywords ?? [])].map(kw => kw.keyword);\n removeFromLoadingArray(kwArray);\n handleFilterRenderData([...keywordDetail.similarKeywords], similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n }, [[...(currentPage?.content?.targetKeywords ?? [])].length, activeKw, toJS(keywordDetail?.similarKeywords)?.length, handleFilterRenderData, keywordDetail?.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize]);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n setSimilarKeywordsList(keywordDetail.similarKeywords);\n }\n }, [toJS(keywordDetail?.similarKeywords)?.length, toJS(keywordDetail?.similarKeywords), activeKw]);\n\n\n const onPaginationChange = async (pageNumber: number, pageSize: number) => {\n setSimilarKeywordsPageNumber(pageNumber);\n handleFilterRenderData(keywordDetail.similarKeywords, pageNumber, pageSize);\n };\n\n const handleIssueTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...similarKeywordsList];\n\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n handleFilterRenderData(data, similarKeywordsPageNumber, similarKeywordsPageSize);\n } else {\n handleFilterRenderData(keywordDetail.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n };\n /* SIMILAR KEYWORDS TABLE UPDATE END */\n\n /* TOP COMPETITORS TABLE UPDATE START */\n useEffect(() => {\n if (keywordDetail?.competitors?.length > 0) {\n setTopCompetitorsData(keywordDetail.competitors);\n }\n }, [toJS(keywordDetail?.competitors)?.length, activeKw]);\n\n\n const handleTopCompetitorsTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...topCompetitorsData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setTopCompetitorsData(data);\n } else {\n setTopCompetitorsData(keywordDetail?.competitors);\n }\n };\n /* TOP COMPETITORS TABLE UPDATE END */\n\n /* RANKING POTENTIAL TABLE UPDATE START */\n useEffect(() => {\n const relevanceData = [];\n relevanceData?.push({\n competition: keywordDetail?.typicalTop10 && Object.keys(keywordDetail?.typicalTop10)[0],\n contentScore: keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n dr: keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n wordCount: keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n readAbility: keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n });\n\n if (relevanceData.length > 0) {\n setRankingPotentialData(relevanceData);\n }\n }, [\n activeKw, keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n ]);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n\n const handleRankingPotentialTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...rankingPotentialData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setRankingPotentialData(data);\n } else {\n setRankingPotentialData(keywordDetail?.competitors);\n }\n };\n /* RANKING POTENTIAL TABLE UPDATE END */\n\n const columns = [\n {\n title: 'AVERAGE PER COMPETION',\n dataIndex: 'competition',\n key: 'competition',\n width: 180,\n align: 'left' as 'left',\n render: (_, data) => {data?.competition || '-'},\n },\n {\n title: 'CONTENT SCORE',\n dataIndex: 'contentScore',\n sorter: true,\n sortField: 'contentScore',\n width: 100,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sorter: true,\n sortField: 'dr',\n width: 80,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n width: 110,\n align: 'center' as 'center',\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readAbility',\n dataIndex: 'readAbility',\n align: 'center' as 'center',\n width: 110,\n render: (_, data) => {\n return {data?.readAbility ? data?.readAbility : '-'};\n },\n\n },\n ];\n\n const topCompetitorColumns = [\n {\n title: 'SITE / URL',\n dataIndex: 'hostname',\n key: 'hostname',\n width: 300,\n align: 'left' as 'left',\n fixed: 'left' as 'left',\n render: (_, data) => {\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sortField: 'dr',\n sorter: true,\n width: 60,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n align: 'center' as 'center',\n width: 100,\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readability',\n dataIndex: 'readability',\n align: 'center' as 'center',\n width: 170,\n render: (_, data) => {\n return {data?.readability ? data?.readability : '-'};\n },\n\n },\n ];\n\n const squareTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n );\n\n const SimilarKeywordConfig = [\n {\n title: 'KEYWORD',\n dataIndex: 'keyword',\n key: 'keyword',\n align: 'left' as 'left',\n width: 240,\n render: (_, record) => {\n return ();\n },\n },\n {\n title: 'TREND',\n dataIndex: 'histSv',\n align: 'center' as 'center',\n key: 'histSv',\n width: 70,\n render: (series: EChartOption.Series[]) => {\n const formatSeries = {\n data: series,\n itemStyle: {color: '#7f4ead'},\n type: 'bar',\n };\n return {\n closeContentResearchDrawer();\n }}\n closeIcon={\n Content Research\n \n \n \n Based on Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n \n\n {loading ? :\n {keywordDetail?.countryCode ? :\n \n KD: 75 ? '#F44343' : keywordDetail?.kd < 76 && keywordDetail?.kd > 50 ? '#e4a469' : keywordDetail?.kd < 51 && keywordDetail?.kd > 25 ? '#bfe15e' : '#1d754e' : '#696777'}}>•{keywordDetail?.kd || '-'}\n }\n {loading ? : SV: {numeral(keywordDetail?.sv).format('0.[0][a]')}}\n\n {loading ? :\n Total Search Results: {keywordDetail?.totalSearchResults ? numeral(keywordDetail?.totalSearchResults).format('0.[0][a]') : '0'}}\n \n \n \n \n Ranking Potential\n {keywordDetail?.rankingPotential ?\n \n \n {keywordDetail?.rankingPotential}\n : null }\n data.date) : [],\n type: 'category',\n show: true,\n axisLabel: {\n interval: 10,\n formatter: label => {\n const date = moment(label);\n return `{month|${date.format('MMM')}}-{year|${date.format('YY')}}`;\n },\n rich: {\n month: {\n color: '#77757D',\n lineHeight: 15.54,\n },\n year: {\n color: '#77757D',\n fontSize: 12,\n lineHeight: 12.95,\n },\n },\n },\n splitLine: {\n show: false,\n },\n },\n yAxis: {\n type: 'value',\n show: true,\n axisLabel: {\n formatter: label => {\n return `${formatNumber(label)}`;\n },\n },\n splitLine: {\n lineStyle: {\n color: '#E8E8E8',\n type: 'dashed',\n width: 1},\n show: true,\n },\n },\n grid: {\n height: '70%',\n left: '10%',\n top: '9%',\n },\n series: [\n {\n data: keywordDetail?.svTrend?.map(data => data.volume) || [],\n type: 'line',\n areaStyle: {},\n symbolSize: 2,\n symbol: '',\n },\n ],\n }} />\n }\n\n \n \n\n\n \n \n Common Citations\n {loading ? :\n \n {keywordDetail?.commonCitations?.length ? keywordDetail?.commonCitations?.map((citation, index) => {\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc?.length > 70 ?\n \n {citation?.metaDesc.substring(0, 70) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by:\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp?.metaDesc?.length > 70 ? serp?.metaDesc?.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 9 && (\n {`+${citation?.serps?.length - 9}`}\n )}\n \n : null}\n\n \n ;\n }) : No data available}\n {/* return \n \n \n \n \n Top competitor content \n\n \n \n Similar keywords \n\n \n {\n closeContentResearchDrawer();\n currentPage.setIsOpeningKwSuggestionFromContentResearch(true);\n currentPage.openCompetingFocusTermsDrawer();\n }}>View all keywords\n \n\n \n \n\n \n \n Relevant terms used by Competitors \n\n \n {loading ? : <>\n \n COMPETITOR RANK\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n Created From Scratch\n \n );\n }\n return (\n \n \n {/* {x?.hostname} */}\n \n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {keywordDetail && keywordDetail?.termsGrid?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n \n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}}\n \n \n ;\n});\n\nconst PageTitle = styled.div`\n font-weight: 600;\n margin-bottom: 10px;\n margin-left: 40px;\n font-size: 20px;\n`;\nconst Header = styled.div`\n display: flex;\n margin-bottom: 10px;\n padding-left: 40px;\n`;\n\nconst TitleContainer = styled.div`\nheight: 60px;\nbackground: #2D2F34;\npadding: 18px;\nborder-radius: 8px 8px 0px 0px;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n line-height: 22px;\n`;\n\nconst SectionHeader = styled.div`\n background: #F7F7F8;\n border-radius: 3px;\n margin-right: 4px;\n margin-left: 4px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst MiddleContainer = styled.div`\n display: flex;\n padding: 0 40px 30px 40px;\n`;\n\nconst Square = styled.div<{ isHovered: boolean }>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\n\nconst Site = styled.div`\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n font-size: 12px;\n color: #2D6CCA;\n width: 40px;\n display: flex;\n align-items: center;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import KeywordDetailContent from '@/components/dashboard/pages/keyword-researcher-v2/keyword-detail-drawer-content';\nimport {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react-lite';\n\nexport const KeywordsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n\n return {\n // scroll to related keywords table automaticaly\n if (visible) {\n if (currentPage?.isDrawerFromCa) {\n document.getElementById('SuggestedKeywordTableId')?.scrollIntoView({block: 'center'});\n }\n }\n }}\n onClose={() => {\n currentPage.setIsDrawerFromCa(false);\n currentPage.setIsOpenKeywordDrawer(false);\n currentPage.setActiveTargetKw('');\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={'drawerCloseIcon'}\n closeIcon={ changeView()}>\n ;\n};\n\nconst TechnicalsSwitcherContainer = styled.div`\n display: flex;\n margin-bottom: 20px;\n font-size: 12px;\n align-items: center;\n cursor: pointer;\n`;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faRotateRight} from '@fortawesome/pro-regular-svg-icons';\n\nexport const PageSpeedIndex = observer(() => {\n const secondAntIcon = \n \n Page Speed Index:\n {!currentPage?.isWordCountLoading ? <>\n {generateDotWithColor(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.status) }\n {!isNil(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score) ? <>{Math.round(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score * 100)}/100 : null}\n :\n }\n \n\n\n \n Last Fetch: \n {!currentPage?.content?.updatedAt ? : moment(currentPage?.content?.updatedAt).format('DD MMM YYYY')} \n refetchArticle(currentPage?.content?.uuid) }/>\n\n \n ;\n});\n\n\nconst Container = styled.div`\n cursor: default;\n`;\nconst SpeedIndexContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n margin-top: 5px;\n`;\nconst LastFetchContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n`;\nconst SpeedIndexDot = styled.div`\n border-radius: 2px;\n height: 4px;\n margin-left: 8px;\n margin-right: 3px;\n width: 4px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {Progress, Spin, Tooltip} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styled from 'styled-components';\nimport {getProgressColor} from '@/utils/colors';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {PageSpeedIndex} from '../PageSpeedIndex';\nimport {LoadingOutlined} from '@ant-design/icons';\n\n\nexport const TechnicalScore = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {t} = useTranslation('common');\n\n const antIcon = \n {!currentPage.isScoreLoading ? (currentPage?.analysis?.technicalScore ?? '-') : \n \n {t('technical-score')} \n \n \n \n\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n height: 30px;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst TitleAndWordCount = styled.div`\n margin-left: 10px;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {routes} from '@/utils/const';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faFileChartColumn} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Checkbox as AntdCheckbox, Form, Popover, Spin, Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {TechnicalsViewSwitcher} from '../../Common/ViewSwitcher';\nimport {TechnicalScore} from './TechnicalScore';\nimport {Checkbox} from '@/components/common-components/v2';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const HeaderSection = observer(({changeView}: Props) => {\n const [auditLoader, setAuditLoader] = useState(false);\n const [onPageAuditPopoverVisible, setOnPageAuditPopoverVisible] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {contentAuditStore: {loadContentAudit, setNewRecordId}} = useStore('');\n\n const antIconSecond = \n \n \n Select 1 to 3 Target Keywords \n \n ({\n validator(_, value) {\n const existingValues = form.getFieldsValue(true);\n if (!value || !existingValues['target-keywords']?.length) return Promise.reject(new Error('Please select at least 1 Target Keyword.'));\n if (existingValues['target-keywords']?.length && existingValues['target-keywords']?.length > 3) return Promise.reject(new Error('You can use maximum of 3 Target Keywords.'));\n\n return Promise.resolve();\n },\n })]}>\n \n \n {currentPage?.getUniqueKeywords?.map((kw, idx) => {\n return \n {kw}\n ;\n })}\n \n \n \n \n setOnPageAuditPopoverVisible(false)}>Cancel \n \n \n \n \n \n }>\n setOnPageAuditPopoverVisible(!onPageAuditPopoverVisible)} color='neonBlue' variant='ghost' mode='dark'>\n {auditLoader ? Run Complete Onpage Audit \n \n : \n \n {auditLoader ? Run Complete Onpage Audit \n \n }\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TopSeactionContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst RunPageAuditBtn = styled(Button)`\n color: #4881f0 !important;\n cursor: pointer;\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst BtnText = styled.div`\n margin-left: 5px;\n display: inline-block;\n color: #34AEF3 !important;\n font-size: 12px;\n\n // &:hover {\n // text-decoration: underline;\n // }\n`;\n\nconst PopoverWrapper = styled.div`\n\n`;\n\nconst PopoverTitle = styled.div`\n font-weight: 600;\n margin-bottom: 20px;\n`;\nconst PopoverKwContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst FormStyled = styled(Form)`\n .ant-checkbox-wrapper + .ant-checkbox-wrapper {\n margin-left: 0px;\n }\n\n .ant-checkbox-wrapper {\n line-height: 22px !important;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n`;\n\nconst PopoverBtnContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\n","import {CaretUpFilled} from '@ant-design/icons';\nimport {Col, Collapse, Row} from 'antd';\nimport {Pagination, Checkbox, Tooltip} from 'antd';\nimport classNames from 'classnames';\nimport {ReactNode, useEffect, useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport styles from './style.module.scss';\nimport {ChevronDown, ChevronUp} from 'react-feather';\nimport classnames from 'classnames';\nimport {faFilter, faCaretDown, faCaretUp} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {NextImg} from '@/utils/nextImg';\n\nimport {toJS} from 'mobx';\ninterface filters {\n label: string;\n checked: boolean;\n disabled?: boolean;\n disabledTooltip?: string;\n onChange: () => void;\n}\n\ninterface columnTitle {\n title?: string;\n sorter?: boolean;\n sortKey?: string | number;\n}\n\ninterface Props {\n className?: string;\n icon?: ReactNode;\n title?: string;\n description?: string | ReactNode;\n descriptionColor?: string;\n colTitle1?: string;\n colTitle2?: columnTitle;\n colTitle3?: string;\n colTitle4?: string;\n data?: any;\n dataRenderer?: any;\n pageSize?: any;\n footer?: ReactNode;\n isCollapse?: boolean;\n defaultActive?: boolean;\n filters?: filters[];\n plan?: any;\n warningBar?: ReactNode;\n}\n\nexport const AnalyticsCollapseCard = ({\n className,\n icon,\n title,\n description,\n descriptionColor,\n colTitle1,\n colTitle2 = {\n title: null,\n sorter: false,\n sortKey: null,\n },\n colTitle3,\n colTitle4,\n data,\n dataRenderer,\n pageSize,\n footer,\n isCollapse = true,\n defaultActive = false,\n filters,\n plan = true,\n warningBar,\n}: Props) => {\n const [pageNumber, setPageNumber] = useState(1);\n const [checkData, setCheckData] = useState(false);\n const [isFilterOpened, setIsFilterOpened] = useState(false);\n const [sortOrder, setSortOrder] = useState('');\n const [formatData, setFormatData] = useState(null);\n const [activeKey, setActiveKey] = useState(['']);\n const {t} = useTranslation('common');\n\n const getData = () => {\n if (pageSize) {\n return formatData?.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\n }\n return formatData;\n };\n useEffect(() => {\n if (getData()?.length > 0 || formatData === undefined || footer) {\n setCheckData(isCollapse);\n }\n }, [getData]);\n\n useEffect(() => {\n let newData = [];\n if (data) {\n newData = data.map(item => {\n return toJS(item);\n });\n }\n setFormatData(newData);\n }, [JSON.stringify(data)]);\n\n useEffect(() => {\n if (defaultActive) {\n setActiveKey([title]);\n }\n }, [defaultActive]);\n\n const sortData = (sortBy: string | number) => {\n const formatArray = [...data];\n if (sortOrder === '') {\n setSortOrder('desc');\n setFormatData(formatArray.sort((a, b) => {\n if (b[sortBy] < a[sortBy]) return -1;\n }));\n } else if (sortOrder === 'desc') {\n setSortOrder('asc');\n setFormatData(formatArray.sort((a, b) => {\n if (a[sortBy] < b[sortBy]) return -1;\n }));\n } else if (sortOrder === 'asc') {\n setSortOrder('');\n setFormatData(data);\n }\n };\n\n const changeActiveKey = key => {\n setActiveKey(key);\n };\n\n\n return (\n isCollapse ? (\n \n \n {icon}\n {title}\n \n \n {description}\n \n \n }\n >\n \n {warningBar && warningBar}\n {/* if we have 4 columns */}\n {colTitle3 && colTitle4 ?\n \n
:\n \n
\n }\n\n {getData()?.map((x, i) => dataRenderer(x, i))}\n \n {pageSize && (pageSize < data?.length) && (\n <>\n\n setPageNumber(pageNumber)}\n disabled={!plan}\n />\n \n )}\n {filters && filters.length >= 1 ?\n ( setIsFilterOpened(!isFilterOpened)}\n className={styles.filters}>\n {/* }\n \n \n {\n isFilterOpened && (\n e.stopPropagation()}>\n \n {filters.map((filter, idx) => (\n filter.disabled ?\n \n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n :\n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n ))\n }\n \n \n )\n }\n ) : null }\n \n {footer}\n \n \n );\n};\n","import React, {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react-lite';\nimport {Modal} from '@/components/common-components';\nimport {Divider} from 'antd';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n visible: boolean;\n schema: any;\n setShowModal: Dispatch>;\n}\n\nexport const SchemaModal = observer(({visible, schema, setShowModal}: Props) => {\n const dataList = schema ? JSON.parse(schema) : [];\n const data = (typeof (dataList) === 'object' && Object.keys(dataList).length === 0) ? [] : dataList?.find(item => item.graph) || [];\n const [expanded, setExpanded] = useState(false);\n const dataForDisplay = expanded ? data?.graph : data?.graph?.slice(0, 1);\n return (\n setShowModal(false)}\n footer={ setShowModal(false)}>Close }>\n \n\n \n Schema.org \n {<>\n @context \n {data?.context ?? '-'} \n @graph \n {dataForDisplay?.map((item, index) => {\n return <>#{index + 1} \n \n {`${x[0]}`} \n {`${x[0]}` == 'potentialAction' ? '' : (`${x[0]}` == 'url' ? {`${x[1]}`} :\n {`${typeof(x[1])!=='object' ? x[1] : '-'}`} )}\n {`${x[0]}` == 'potentialAction' ? item.potentialAction?.length > 0 && item?.potentialAction?.map((z, id) => {\n return \n {z?.type} \n {z?.queryInput} \n \n ;\n }) : ''}\n ;\n })}\n \n ;\n })}\n {data?.graph?.length > 1 ? \n setExpanded(!expanded)}>\n {expanded ? 'Hide schema' : 'Show full schema'}\n : ''}\n }\n \n \n \n\n );\n});\n\nconst MainContainer = styled.div`\n width: 100%;\n padding: 25px;\n background: #FFFFFF;\n`;\n\nconst Title = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\nconst Subtitle = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 10px;\n word-break: break-word;\n`;\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\nconst URL = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst ModalContentWrapper = styled.div`\n max-height: 70vh;\n overflow-y: auto;\n margin-top: 10px;\n // border: 1px solid #E8E8E8;\n // border-radius: 8px;\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n`;\n","import css from '../../index.module.scss';\nimport {\n Typography,\n Row,\n Col,\n Popover,\n Tooltip,\n} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport {AnalyticsCollapseCard} from '../../Common/AnalyticsCollapseCard';\nimport styles from '../style.module.scss';\nimport {useTranslation} from 'next-i18next';\nimport {getStatusColor} from '@/utils/colors';\nimport {NextImg} from '@/utils/nextImg';\n\nimport classNames from 'classnames';\nimport {Code, ExternalLink, Image,\n List,\n Video} from 'react-feather';\nimport {WarningMiniBar} from '@/components/common-components/components';\nimport {\n ButtonLink,\n} from '@/components/common-components/components';\nimport {Button} from '@/components/common-components/v2';\nimport {useState} from 'react';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {observer} from 'mobx-react-lite';\nimport {SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, SCA_PAGE_IMAGES_SHOW_MISSING_ALT, SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN} from '@/constants/events';\nimport {SchemaModal} from '../SchemaModal';\nimport {toJS} from 'mobx';\nimport {linkgraphDomain} from '@/utils/const';\n\n\nexport const TechnicalsData = observer(() => {\n const [showMissingAltText, setShowMissingAltText] = useState(false);\n const [isActiveInternalBrokenLinks, setIsActiveInternalBrokenLinks] = useState(false);\n const [isActiveExternalBrokenLinks, setIsActiveExternalBrokenLinks] = useState(false);\n const [showSchemaModal, setShowSchemaModal] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const {Title} = Typography;\n const {t} = useTranslation('common');\n\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/icon/broken-image.svg';\n // };\n\n const translateWord = (status: string) => {\n switch (status) {\n case 'Good':\n return t('good');\n case 'Average':\n return t('average');\n case 'Bad':\n return t('bad');\n case 'Missing':\n return t('missing');\n case 'Not Included':\n return 'Not Included';\n default:\n return '';\n }\n };\n\n const internalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveInternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.internal?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveInternalBrokenLinks(!isActiveInternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveInternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken internal links',\n });\n }\n },\n }];\n\n const uiFormatImageSize = (size: string) => {\n if (size) {\n let returnSize = null;\n const sizeArray = size.split('x');\n returnSize = {`x ${sizeArray[0]}`}
{sizeArray[1]};\n return returnSize;\n } else {\n return '-';\n }\n };\n\n const brokenHeaders = {currentPage?.analysis?.brokenHeaders?.map((item, i) => {\n return {item.type}{(i + 1) < currentPage?.analysis?.brokenHeaders?.length && `, `};\n })}{translateWord(currentPage?.analysis?.status?.headers)};\n\n const getMissingAltText = () => {\n if (showMissingAltText && currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '');\n } else if (currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img;\n }\n };\n\n const getMissingAltTotal = () => {\n if (!currentPage?.analysis?.images?.img?.length) return null;\n if (currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length;\n } else {\n return null;\n }\n };\n\n const generateInternalLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getInternalBrokenLinksCount || currentPage?.analysis?.getInternalBrokenLinksCount === 0) {\n const msg = currentPage?.analysis?.getInternalBrokenLinksCount > 1 || currentPage?.analysis?.getInternalBrokenLinksCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getInternalBrokenLinksCount} ${msg}`);\n if (currentPage?.analysis?.getInternalBrokenLinksCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getInternalRedirectsCount || currentPage?.analysis?.getInternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getInternalRedirectsCount > 1 || currentPage?.analysis?.getInternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getInternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.internal?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const imagesFilter = [{\n label: 'Show only missing alt text',\n checked: showMissingAltText,\n disabled: currentPage?.analysis?.images?.img?.filter(image => !image.alt || image.alt === '')?.length == 0,\n onChange: () => {\n setShowMissingAltText(!showMissingAltText);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_IMAGES_SHOW_MISSING_ALT, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for images with missing alt text',\n });\n }\n },\n }];\n\n const externalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveExternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.external?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveExternalBrokenLinks(!isActiveExternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken external links',\n });\n }\n },\n }];\n\n const generateExternallLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getExternalBrokenCount || currentPage?.analysis?.getExternalBrokenCount === 0) {\n const msg = currentPage?.analysis?.getExternalBrokenCount > 1 || currentPage?.analysis?.getExternalBrokenCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getExternalBrokenCount} ${msg}`);\n if (currentPage?.analysis?.getExternalBrokenCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getExternalRedirectsCount || currentPage?.analysis?.getExternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getExternalRedirectsCount > 1 || currentPage?.analysis?.getExternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getExternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.external?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const getExternalLinks = () => {\n if (isActiveExternalBrokenLinks && currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const getInternalLinks = () => {\n if (isActiveInternalBrokenLinks && currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const displayStatusCode = (statusCode: number) => {\n if (statusCode) {\n if (statusCode >= 200 && statusCode < 300) {\n return {statusCode};\n } else if (statusCode >= 300 && statusCode < 400) {\n return {statusCode};\n } else if (statusCode >= 400) {\n if (statusCode === 429) {\n return {statusCode};\n } else {\n return {statusCode};\n }\n }\n } else {\n return 'N/A';\n }\n };\n\n const displayFollowCode = (followCode: string) => {\n if (followCode) {\n if (followCode === 'nofollow') {\n return 'NF';\n } else {\n return DF;\n }\n } else {\n return '-';\n }\n };\n\n return <>\n \n \n \n {t('head')}\n \n {currentPage?.analysis?.metaSummary?.map(meta => {\n return (\n \n {meta.value}\n {meta.suggestion}\n \n )}\n />\n );\n })}\n \n \n {t('rich-media-tags')}\n \n \n {header.values.length && header.values.map((heading, i) => {\n return {`<${header.type}> `}\n {heading}\n {` `};\n })}\n \n }\n >\n \n
\n : \n
: \n
;\n }}\n />\n \n addDefaultSrc(e)}\n />\n \n \n {\n navigator.clipboard.writeText(image.src);\n }}>{image.src}\n \n ) : '-'}\n {image.alt || '-'}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n setShowSchemaModal(true)}>\n {t('view-schema-markups')}\n \n \n ) : (\n \n {t('view-schema-markups')}\n \n )\n }\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n \n {\n navigator.clipboard.writeText(js.src);\n }}>{js.src}\n \n )}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n ;\n});\n","import {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {HeaderSection} from './HeaderSection';\nimport {TechnicalsData} from './TechnicalsData';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Technicals = observer(({changeView}: Props) => {\n return \n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nconst DataContainer = styled.div`\n height: auto;\n overflow-y: auto;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n","import React from 'react';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport classNames from 'classnames';\n\ninterface Props {\n isSubscriber: boolean;\n store: CurrentPageStore;\n setCompetitors: (competitors: any[]) => void;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n compListCollapsed: boolean;\n}\n\nexport const KeywordSelector = ({store, isSubscriber, setActiveKw, setCompetitors, activeKw, compListCollapsed}: Props) => {\n const {Option} = Select;\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(store?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n };\n\n return \n \n {compListCollapsed ? 'Kw' : 'Keyword'}\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '250px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={classNames(styles.selectInput, compListCollapsed && styles.minified)}\n suffixIcon={ ;\n};\n","import {Checkbox} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {faCheck, faPlus} from '@fortawesome/pro-solid-svg-icons';\nimport {faSquareCheck} from '@fortawesome/pro-light-svg-icons';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {EditorState, Modifier, SelectionState, ContentState} from 'draft-js';\nimport {debounce} from 'lodash';\nimport {observer} from 'mobx-react';\nimport {useCallback, useState} from 'react';\nimport styled from 'styled-components';\n// import {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n\ninterface Props {\n activeCompetitor: any;\n htmlToDraft: any;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const HeadingsTree = observer(({\n activeCompetitor,\n htmlToDraft,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedIndexData,\n checkedIndexData}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer:\n {currentPage: {\n setCopiedHeadings,\n }}} = useStore('');\n\n\n const [addedHeadings, setAddedHeadings] = useState([]);\n const [copiedHeading, setCopiedHeading] = useState({\n tag: '',\n text: '',\n });\n\n const [filters, setFilters] = useState([\n {\n tag: 'h1',\n active: true,\n },\n {\n tag: 'h2',\n active: true,\n },\n {\n tag: 'h3',\n active: true,\n },\n {\n tag: 'h4',\n active: true,\n },\n {\n tag: 'h5',\n active: true,\n },\n {\n tag: 'h6',\n active: true,\n },\n ]);\n\n const onCheckboxChecked = (checked: boolean, tag: string) => {\n const curFilters = [...filters];\n\n const updatedFilters = curFilters.map(filter => {\n if (filter.tag == tag) {\n return {\n ...filter,\n active: checked,\n };\n } else {\n return {...filter};\n }\n });\n\n setFilters(updatedFilters);\n };\n\n const checkboxClickHandler = (e, headingContent, headingTag, idx) => {\n if (e?.target?.checked) {\n setCheckedCount(checkedCount + 1);\n const newItem = {'id': idx, 'headingContent': headingContent, 'headingTag': headingTag};\n setCheckedIndexData([...checkedIndexData, newItem]);\n } else {\n setCheckedCount(checkedCount - 1);\n\n const updatedCheckedIndexData = checkedIndexData.filter(item => item?.id !== idx);\n setCheckedIndexData(updatedCheckedIndexData);\n }\n };\n\n const handleCopyClick = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n navigator.clipboard.writeText(updatedCopiedHeadings);\n };\n\n // const [blockskMap, setBlocksMap] = useState([]);\n\n // const mapHeadingsToDraftBlockTypes = {\n // 'h1': 'header-one',\n // 'h2': 'header-twp',\n // 'h3': 'header-three',\n // 'h4': 'header-four',\n // 'h5': 'header-five',\n // 'h6': 'header-six',\n // }\n\n // useEffect(() => {\n // if (!currentPage?.getCurrentEditorState) return;\n\n // const contentState = currentPage.getCurrentEditorState.getCurrentContent();\n\n // const map = convertToRaw(contentState).blocks\n // setBlocksMap(map);\n\n // }, [currentPage?.getCurrentEditorState]);\n\n\n // const checkIfEditorContainsHeading = (text: string, type: string) => {\n // if (!blockskMap || !blockskMap.length) return false;\n\n // const included = blockskMap.find(block => block.type == mapHeadingsToDraftBlockTypes[type] && block.text == text);\n\n // return included;\n // }\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n currentPage.editContent(state, isNewDecorations);\n }, 2000);\n\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const insertText = async (textToAdd: any, headingType?: string, cleanText?: string) => {\n // NEW FLOW start\n const {contentBlocks, entityMap} = htmlToDraft(textToAdd);\n // const contentState = convertHtmlToEditorState(textToAdd);\n\n const selection = currentPage.currentEditorState.getSelection();\n\n const newSelection = new SelectionState({\n anchorKey: selection.getAnchorKey(),\n anchorOffset: selection.getEndOffset(),\n focusKey: selection.getAnchorKey(),\n focusOffset: selection.getEndOffset(),\n });\n\n\n const fragment = ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap();\n // const fragment = contentState.getCurrentContent().getBlockMap();\n\n const nonStyledState = Modifier.replaceWithFragment(\n currentPage.currentEditorState.getCurrentContent(),\n newSelection,\n fragment,\n );\n\n // WE are calculating nodes to toggle blue background on new Ai generated nodes\n let firstNewBlockId: number;\n const currentBlock = selection.getAnchorKey();\n const nextBlock = currentPage.currentEditorState.getCurrentContent().getBlockAfter(selection.getAnchorKey())?.getKey();\n\n const existingNodes = document.querySelectorAll('[data-block=\"true\"]');\n existingNodes?.forEach((elem, id) => {\n if (elem.getAttribute('data-offset-key') && elem.getAttribute('data-offset-key') == `${currentBlock}-0-0`) {\n firstNewBlockId = id + 1;\n }\n });\n\n\n const updatedState = EditorState.push(currentPage.currentEditorState, nonStyledState, 'insert-fragment');\n currentPage.setCurrentEditorState(updatedState);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('[data-block=\"true\"]');\n if (newTextElems.length) {\n for (let i = firstNewBlockId; i <= newTextElems.length; i++) {\n if (newTextElems[i]?.getAttribute('data-offset-key') && newTextElems[i]?.getAttribute('data-offset-key') != `${nextBlock}-0-0` && newTextElems[i]?.getAttribute('data-offset-key') != `${currentBlock}-0-0`) {\n newTextElems[i].classList.add('newTextBlock');\n } else {\n return;\n }\n }\n }\n }, 500);\n\n debouncedUpdate(updatedState, currentPage.analytics?.focusTerms, currentPage.focusTermsClassNames, false);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('.newTextBlock');\n if (newTextElems.length) {\n newTextElems.forEach(elem => {\n elem.classList.remove('newTextBlock');\n });\n }\n }, 3500);\n\n const curAddedHeadings = [...addedHeadings];\n const updatedAddedHeading = [];\n checkedIndexData?.map(item => {\n updatedAddedHeading?.push({type: item?.headingTag, text: item?.headingContent});\n });\n if (headingType && cleanText) {\n setAddedHeadings([\n ...curAddedHeadings,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n } else {\n setAddedHeadings([\n ...curAddedHeadings,\n ...updatedAddedHeading,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n }\n // NEW FLOW END\n };\n\n const addHeadingsHandler = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n insertText(`${updatedCopiedHeadings}`);\n setShowBulkAddContentBtn(true);\n setCheckedCount(0);\n setCheckedIndexData([]);\n };\n\n return \n Page structure\n \n \n {filters.map((filter, idx) => {\n if (activeCompetitor?.headingsHierarchy?.find(heading => heading.tag == filter.tag)) {\n return onCheckboxChecked(e.target.checked, filter.tag)}\n key={idx}>\n {filter.tag}\n ;\n }\n })}\n \n {showBulkAddContentBtn && setShowBulkAddContentBtn(false)}> Bulk Add to Content }\n \n {!showBulkAddContentBtn &&\n \n {\n addHeadingsHandler();\n }}> \n \n Copy to clipboard\n }> {\n handleCopyClick();\n }}> Copy \n {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}> Cancel \n \n }\n \n {activeCompetitor?.headingsHierarchy?.filter(heading => filters.filter(filter => filter.active)?.map(filter => filter.tag)?.includes(heading.tag))?.map((heading, idx) => {\n const isIncluded = [...addedHeadings].filter(item => item.text == heading.content && item.type == heading.tag)?.length > 0;\n return \n {!showBulkAddContentBtn && checkboxClickHandler(e, heading.content, heading.tag, idx)} />\n }\n \n {isIncluded ? \n {heading.content} \n \n \n {copiedHeading.tag == heading.tag && copiedHeading.text == heading.content ? <>\n }>\n {\n navigator.clipboard.writeText(`<${heading.tag}>${heading.content}`);\n setCopiedHeading({tag: heading.tag, text: heading.content});\n }}>\n \n \n insertText(`<${heading.tag}>${heading.content}`, heading.tag, heading.content)}>\n \n \n\n ;\n })}\n \n ;\n});\nconst calculateIndent = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '15px';\n case 'h2':\n return '25px';\n case 'h3':\n return '45px';\n case 'h4':\n return '55px';\n case 'h5':\n return '65px';\n case 'h6':\n return '75px';\n }\n};\nconst getTopMargin = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '20px';\n default:\n return '0px';\n }\n};\nconst calculateFontSize = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '21px';\n case 'h2':\n return '18px';\n case 'h3':\n return '16px';\n case 'h4':\n return '14px';\n case 'h5':\n return '14px';\n case 'h6':\n return '14px';\n }\n};\nconst generateColor = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '#233A61';\n case 'h2':\n return opaqueColor('#233A61', 85);\n case 'h3':\n return opaqueColor('#233A61', 70);\n case 'h4':\n return opaqueColor('#233A61', 55);\n case 'h5':\n return opaqueColor('#233A61', 47);\n case 'h6':\n return opaqueColor('#233A61', 40);\n }\n};\n\nconst Wrapper = styled.div`\n\n`;\n\nconst ActionsWrapper = styled.div`\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 10px;\n`;\n\nconst AddHeadings = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst CopyAction = styled.div`\n font-size: 12px;\n cursor: pointer;\n`;\n\nconst CancelAction = styled.div`\n cursor: pointer;\n color: #F44343;\n`;\n\nconst FiltersWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst BulkAddAction = styled.div`\n margin-top: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst FiltersContainer = styled.div`\n display: flex;\n background: #F9F9FB;\n border: 1px solid #E8E8E8;\n border-radius: 8px;\n padding: 12px 14px;\n margin-bottom: 20px;\n width: fit-content;\n`;\n\nconst FiltersTree = styled.div`\n display: flex;\n flex-direction: column;\n`;\nconst SingleHeading = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; itemId: number; isIncluded?: boolean}>`\n display: flex;\n margin-top: ${p => p.itemId == 0 ? '0px' : getTopMargin(p.type)};\n margin-bottom: 0px;\n border-radius: 8px;\n padding: 6px 10px;\n cursor: pointer;\n align-items: center;\n width: 100%;\n opacity: ${p => p.isIncluded ? .5 : 1};\n\n .copyClass {\n display: none;\n margin-left: auto;\n }\n .copyClass.disabled {\n pointer-events: none;\n color: gray;\n }\n\n &:hover {\n background-color: ${opaqueColor('#2D6CCA', 15)};\n\n .copyClass {\n display: block;\n }\n }\n`;\nconst HeadingTag = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n border-radius: 5px;\n margin-left: ${p => calculateIndent(p.type)};\n background-color: ${p => generateColor(p.type)};\n padding: 2px 7px; \n margin-right: 10px;\n color: #fff;\n height: fit-content;\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n position: relative;\n`;\nconst HeadingText = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n color: #121212;\n font-size: ${p => calculateFontSize(p.type)};\n ${p => (p.type == 'h1' || p.type == 'h2') && 'line-height: 24px'};\n`;\n\nconst Copy = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-right: 20px;\n margin-bottom: auto;\n min-width: 50px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\nconst InsertText = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-left: 20px;\n margin-bottom: auto;\n min-width: 105px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\n\nconst CheckboxStyled = styled(Checkbox)<{tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\ntext-transform: uppercase;\n .ant-checkbox-checked {\n .ant-checkbox-inner {\n background-color: ${p => generateColor(p.tag)} !important;\n border-color: ${p => generateColor(p.tag)} !important;\n }\n }\n`;\n","import {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {KeywordSelector} from './KeywordSelector';\nimport {HeadingsTree} from './HeadingsTree';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faBars, faBarsSort} from '@fortawesome/pro-solid-svg-icons';\nimport {Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {faArrowUpRightFromSquare, faListTree} from '@fortawesome/pro-regular-svg-icons';\nimport {generateHeadingOutline} from '@/utils/blockRenderComponents';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n setCompListCollapsed: (value: boolean) => void;\n compListCollapsed: boolean;\n htmlToDraft: any;\n activeKw: string;\n setActiveKw: (value) => void;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const CompetitorHeadingsDrawerContent = observer(({\n htmlToDraft,\n setCompListCollapsed,\n compListCollapsed,\n activeKw,\n setActiveKw,\n setCheckedIndexData,\n checkedIndexData,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedHeadingsWithTags,\n checkedHeadingsWithTags}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n\n const [competitors, setCompetitors] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors ?? []);\n const [activeCompetitor, setActiveCompetitor] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n\n\n useEffect(() => {\n if (currentPage?.topRankingCompetitorActiveKw && currentPage?.analytics?.competitorsData?.length && currentPage?.analytics?.competitorsData.find(item => item.keyword == currentPage?.topRankingCompetitorActiveKw)) {\n !activeKw && setActiveKw(currentPage?.topRankingCompetitorActiveKw);\n } else if (currentPage?.analytics?.competitorsData && currentPage?.analytics?.competitorsData[0]) {\n !activeKw && setActiveKw(currentPage?.analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n }, [...(currentPage?.analytics?.competitorsData ?? ''), currentPage?.analytics?.competitorsData?.length]);\n\n useEffect(() => {\n if (toJS(currentPage).analytics?.competitorsData) {\n const contentState = currentPage.currentEditorState.getCurrentContent();\n const outline = generateHeadingOutline(contentState);\n const currentArticleOutline = [{\n title: 'Current Article Outline',\n headingsHierarchy: outline,\n isCurrentArticleOutline: true,\n }];\n\n const updatedCompetitors = toJS(currentPage).analytics.competitorsData?.map(value => {\n return {\n ...value,\n competitors: [...currentArticleOutline, ...value.competitors],\n };\n });\n setCompetitors(updatedCompetitors?.find(item => item.keyword == activeKw)?.competitors ?? []);\n if (!activeCompetitor) {\n setActiveCompetitor(toJS(currentPage.analytics?.competitorsData)?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n }\n }\n }, [currentPage.analytics?.competitorsData, activeKw, currentPage.currentEditorState]);\n\n const competitorsChangeHandler = (competitorsList: any[]) => {\n setCompetitors(competitorsList);\n\n setActiveCompetitor(competitorsList[0]);\n };\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n \n \n setCompListCollapsed(!compListCollapsed)} fontSize={20} style={{marginTop: 20, marginRight: 10, cursor: 'pointer'}}/>\n \n \n \n {competitors?.length? competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)?.map((competitor, idx) => {\n return <>\n {competitor?.isCurrentArticleOutline ?\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n :\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n {competitors?.filter(value => value?.headingsHierarchy && value?.headingsHierarchy?.length && value?.isCurrentArticleOutline)?.length ? idx : idx + 1} \n \n \n {competitor.title} \n \n {competitor.url}\n \n : null}>\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor?.url}`} style={{width: 20, height: 20}}/>\n \n \n {!compListCollapsed && \n {competitor.title} \n \n {competitor.url}\n window.open(competitor?.url, '_blank')}/>\n \n }\n \n \n };\n }) : Add atleast one target keyword to view the Heading outlines \n }\n\n \n \n \n \n\n\n ;\n});\n\nconst Wrapper = styled.div`\n padding: 10px 30px 30px;\n display: flex;\n cursor: default;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n align-items: center;\n`;\n\nconst Left = styled.div<{isCollapsed: boolean}>`\n width: ${p => p.isCollapsed ? '105px' : 'auto'};\n background: transparent;\n padding-right: 30px;\n`;\nconst Right = styled.div`\n background-color: #fff;\n width: 100%;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px rgba(0, 0, 0, 0.06);\n border-radius: 14px;\n padding: 20px 30px;\n`;\nconst CompetitorsList = styled.div`\n\n`;\nconst SingleCompetitor = styled.div<{isActive?: boolean}>`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 7px;\n padding: 9px;\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n border-radius: 8px;\n transition: background .3s ease;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n ${p => p.isActive && 'color: #fff;'}\n }\n\n :hover {\n background-color: #233A61;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n color: #fff;\n }\n }\n`;\nconst Order = styled.div`\n color: #121212;\n width: 25px;\n`;\nconst NameLogoUrl = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Logo = styled.div`\n margin-right: 10px;\n`;\nconst NameAndUrl = styled.div`\n text-align: left;\n max-width: 200px;\n`;\nconst Name = styled.div`\n color: #121212;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\nconst Url = styled.a`\n color: #2D6CCA;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n display: flex;\n font-size: 12px;\n align-items: center;\n`;\n\nconst Headingoutlines = styled.p`\n color: red;\n margin-left: 30px;\n margin-top: -9px;\n`;\n\nconst CurrentArticleOutline = styled.div<{isActive?: boolean}>`\n display: flex;\n align-items: center;\n gap: 12px;\n padding-left: 32px;\n margin-bottom: 10px;\n cursor: pointer;\n border-radius: 8px;\n ${p => p.isActive && 'color: #fff;'}\n svg {\n width: 16px;\n height: 13px;\n }\n .text {\n font-family: Inter;\n font-size: 14px;\n font-weight: 400;\n line-height: 16.94px;\n text-align: left;\n color: rgba(18, 18, 18, 1);\n ${p => p.isActive && 'color: #fff;'}\n text-decoration: underline;\n padding: 7px;\n }\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n :hover {\n background-color: #233A61;\n color: #fff;\n\n .text {\n color: #fff;\n }\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {CompetitorHeadingsDrawerContent} from './DrawerContent';\nimport {useState} from 'react';\n\ninterface Props {\n htmlToDraft: any;\n}\n\nexport const CompetitorsHeadingsDrawer = observer(({htmlToDraft}: Props) => {\n const {contentOptimizer: {currentPage: {analytics, topRankingCompetitorActiveKw, isCompetitorsHeadingsDrawerOpen, closeCompetitorsHeadingsDrawer, setCopiedHeadings}}} = useStore('');\n\n const [compListCollapsed, setCompListCollapsed] = useState(false);\n const [activeKw, setActiveKw] = useState('');\n const [showBulkAddContentBtn, setShowBulkAddContentBtn] = useState(true);\n const [checkedCount, setCheckedCount] = useState(0);\n const [checkedHeadingsWithTags, setCheckedHeadingsWithTags] = useState('');\n const [checkedIndexData, setCheckedIndexData] = useState([]);\n\n return (\n {\n closeCompetitorsHeadingsDrawer();\n if (topRankingCompetitorActiveKw && analytics?.competitorsData?.length && analytics?.competitorsData.find(item => item.keyword == topRankingCompetitorActiveKw)) {\n setActiveKw(topRankingCompetitorActiveKw);\n } else if (analytics?.competitorsData && analytics?.competitorsData[0]) {\n setActiveKw(analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}\n closeIcon={ {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }} style={{display: isCompetitorsHeadingsDrawerOpen ? 'block' : 'none'}}/>}\n className={styles.competitorsHeadingsDrawerStyle}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n >\n Headings Outline\n \n \n );\n});\n","import {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Spin} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {Analytics} from './Analytics';\nimport {CompetingFocusTermsDrawer} from './SideDrawers/CompetingFocusTermsDrawer';\nimport {ContentIdeasDrawer} from './SideDrawers/ContentIdeasDrawer';\nimport {ContentResearchDrawer} from './SideDrawers/ContentResearchDrawer/ContentResearchDrawer';\nimport {KeywordsDrawer} from './SideDrawers/KeywordsDrawer';\nimport {Technicals} from './Technicals';\nimport {CompetitorsHeadingsDrawer} from './SideDrawers/CompetitorsHeadingsDrawer';\n\nexport const SidebarContent = observer(() => {\n const [showTechnicals, setShowTechincals] = useState(false);\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const antIconSecond = setShowTechincals(!showTechnicals)}/> : setShowTechincals(!showTechnicals)}/>;\n const currentView = <>\n \n setShowTechincals(!showTechnicals)}/>\n \n \n setShowTechincals(!showTechnicals)}/>\n \n ;\n\n return \n \n \n {currentPage.isInitialPageLoad && \n }\n \n {currentView}\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n position: relative;\n`;\n\nconst TechnicalsContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute; \n width: 100%;\n left: ${p => p.showTechnicals ? 0 : '400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => p.showTechnicals ? 0 : '350px !important'};\n }\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst ContentContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute;\n width: 100%;\n left: ${p => !p.showTechnicals ? 0 : '-400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => !p.showTechnicals ? 0 : '-350px !important'};\n }\n\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst LoadingBannerContainer = styled.div`\n background-color: transparent;\n height: 25px;\n width: 100%;\n`;\nconst LongLoadingBanner = styled.div`\nbackground: rgba(84, 41, 125, 0.5);\nborder-radius: 5px;\nfont-size: 12;\nheight: 25px;\npadding-top: 2px;\nwidth: 100%;\n`;\n","import React, {useEffect, useState, useRef} from 'react';\nimport styles from './index.module.scss';\nimport {Loader} from './Utils/loader';\nimport {Error as ErrorView} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/RightSidebar/v2-sidebar/Utils/error';\nimport {Resizable} from 're-resizable';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\nimport {SidebarContent} from './SidebarContent';\n\ninterface Props {\n style?: string;\n onResizeCallback?: (width: number) => void;\n isHidden?: boolean;\n store?: CurrentPageStore;\n}\n\nexport const RightSidebarV2: React.FC = observer(({onResizeCallback, isHidden = false, store}) => {\n const {contentOptimizer: {currentPage: {isPublic, isEditorScrolled}}} = useStore('');\n const [topPosition, setTopPosition] = useState((window?.innerHeight && window?.innerHeight) > 800 ? 78 : 50);\n\n const sideBarRef = useRef(null);\n\n // This changes the width of the editor according to the with of the right sidebar\n useEffect(() => {\n const sidebarUpdate = () => {\n if (sideBarRef?.current?.clientWidth > 350 && window.innerWidth <= 1400) {\n onResizeCallback(350);\n } else if (sideBarRef?.current?.clientWidth <= 350 && window.innerWidth > 1400) {\n onResizeCallback(400);\n }\n };\n window.addEventListener('resize', sidebarUpdate);\n\n return () => {\n window.removeEventListener('resize', sidebarUpdate);\n };\n }, []);\n\n useEffect(() => {\n if (sideBarRef?.current?.clientWidth) {\n onResizeCallback(sideBarRef?.current?.clientWidth);\n }\n }, [sideBarRef?.current]);\n\n const handleScroll = () => {\n const position = window.pageYOffset;\n if (position > 0) {\n if (position <= 70) {\n setTopPosition(topPosition - position);\n } else {\n setTopPosition(0);\n }\n } else {\n setTopPosition(topPosition);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, {passive: true});\n }, []);\n\n\n return (\n \n {\n onResizeCallback(elRef.offsetWidth);\n }}\n enable={{\n top: false,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n className={styles.resize}>\n {store?.content?.isAnalyzing && !store?.content?.analyzingError && ( \n );\n});\n","import {useEffect} from 'react';\nimport {WarningOutlined} from '@ant-design/icons';\nimport {useRouter} from 'next/router';\nimport {RootStoreType, useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styles from './styles.module.scss';\n// import {Drawer} from 'antd';\nimport {EditorState, SelectionState} from 'draft-js';\nimport {mapFocusTerms, multiWordCountRegex, prepareFinalTerms} from './LeftSide/EditorSection/content-editor/utils';\nimport {decoratedState} from './LeftSide/EditorSection/content-editor/decorators';\nimport firebase from 'firebase/app';\nimport 'firebase/database';\n// import {ContentGenerator} from './ContentGenerator/ContentGenerator';\nimport {LeftSide} from './LeftSide/LeftSide';\n// import {AiOutlineDrawer} from './AiOutlineDrawer';\n// import {CaAiQuotaInfo} from '@/components/common-components/v2/CaAiQuotaInfo';\n// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {RightSidebarV2} from './RightSidebar/v2-sidebar';\nimport {MainLoader} from '@/components/common-components/v2/MainLoader';\nimport {FREDDY_EVENT_SCA_ARTICLE_CREATED, triggerFreddySurvey} from '@/utils/scripts';\nimport {headerStore} from '@/store/storeCompTest';\nexport const PageEditor = observer(\n ({rootStore, isPublic}: { rootStore: RootStoreType; isPublic: boolean }) => {\n const {contentOptimizer, settings} = rootStore;\n const {currentPage, pages, aiOutline: {\n loadAiWriterHistory,\n refetchOneClickDraftResultForArticleCreation,\n }} = contentOptimizer;\n const {\n isUploading,\n isExportingPage,\n isExportingPageLoader,\n setIsPublic,\n // isOpenContentGeneratorDrawer,\n focusTermsClassNames,\n setFocusTermsClassNames,\n // setIsOpenContentGeneratorDrawer,\n setSideBarWidth,\n setViewers,\n viewers,\n isSideBarHidden,\n isInitialEditorStateFetched,\n content,\n editTitle,\n highlights,\n } = currentPage;\n const {aiInProgress} = content;\n const {\n customer: {\n profile: {\n id,\n emailAddress,\n },\n getCustomerQuota,\n },\n } = settings;\n const resultId = contentOptimizer.aiOutline.id;\n\n const {contentOptimizer: {\n currentPage: {\n feTargetKeywords,\n isLinkActive,\n },\n aiMetaData: {\n loadAiMetaData,\n metaData,\n },\n }} = useStore('');\n\n useEffect(() => {\n if (pages?.count === 2) {\n triggerFreddySurvey(id, emailAddress, FREDDY_EVENT_SCA_ARTICLE_CREATED);\n }\n }, [pages?.count]);\n\n // const {setShowOutlinesInDrawer, v2AiOutline, showOutlinesInDrawer} = aiOutline;\n // const [allRef, setAllRef] = useState();\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n query: {uuid, newPage},\n } = useRouter();\n const {t} = useTranslation('common');\n\n\n // const setAllRefToState = element => {\n // setAllRef(element);\n // };\n\n /*\n * CONTENT EDITOR METHODS START\n */\n\n\n // We are settings initial focus terms map so we can use it for initial decoration and highlighting\n\n function moveSelectionToStart(editorState) {\n const content = editorState.getCurrentContent();\n const firstBlock = content.getFirstBlock();\n const firstKey = firstBlock.getKey();\n\n return EditorState.acceptSelection(\n editorState,\n new SelectionState({\n anchorKey: firstKey,\n anchorOffset: 0,\n focusKey: firstKey,\n focusOffset: 0,\n hasFocus: true,\n isBackward: false,\n }),\n );\n }\n\n // This method will put cursor to start of the content\n function moveFocusToStart(editorState) {\n const afterSelectionMove = moveSelectionToStart(editorState);\n return EditorState.forceSelection(\n afterSelectionMove,\n afterSelectionMove.getSelection(),\n );\n }\n\n\n // This method will do the focus terms re-mapping after we update the page content\n const updateFocusTermsState = () => {\n const sortedFocusTerms = currentPage.analytics?.focusTerms?.slice()\n .slice()\n .sort((a, b) => b.name.length - a.name.length);\n\n const internalLinksClusters = currentPage.content?.internalLinkSuggestions?.slice()?.map(item => {\n return {\n name: item.keyword,\n status: 'internal-link-suggestion',\n variations: [],\n };\n });\n\n const finalData = [];\n if (sortedFocusTerms?.length) finalData.push(...sortedFocusTerms);\n if (internalLinksClusters?.length) finalData.push(...internalLinksClusters);\n\n if (sortedFocusTerms) {\n const parts = prepareFinalTerms(sortedFocusTerms);\n const regex = multiWordCountRegex(parts, false);\n\n if (regex == null) {\n return;\n }\n\n setFocusTermsClassNames(mapFocusTerms(finalData));\n }\n };\n\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data + 1)\n .then(() => {\n dbRef.on('value', snapshot => {\n if (snapshot.exists()) {\n const data = snapshot.val();\n setViewers(data);\n }\n });\n });\n }).catch(error => {\n console.error(error);\n });\n }\n\n return () => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().cancel();\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data - 1);\n });\n }\n };\n }, []);\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().set(viewers - 1);\n }\n }, [viewers]);\n\n // useEffect(() => {\n // const newState = currentPage?.content?.formattedEditorState();\n // currentPage.setCurrentEditorState(newState);\n // setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n // }, []);\n\n\n // This useEffect is ment to fire only once initially, after we have contentLoadedAt and uuid set\n // It will do initial content populating + highlighting\n useEffect(() => {\n // this prop is used to allow/dissallow all repolls related to editing a page to happen\n currentPage.setRepollsAllowed(true);\n // we are checking current page uuid from url\n // if the response came in and populated the store they will match and only then we update the state\n // we repeat this both here and in content editor compoenent\n\n if (uuid === currentPage.content.uuid && isInitialEditorStateFetched) {\n const newState = currentPage.content?.formattedEditorState();\n const focusedState = moveFocusToStart(newState);\n currentPage.setCurrentEditorState(focusedState);\n\n // This prop is set to false only after initial editor state has been set because\n // we want to prevent the DraftJs from triggering the onChange event on page mount\n currentPage.setIsInitialEditorStateFetched(true);\n\n // This will re-map focus terms and update the state and will trigger the next useEffect\n // which will use that map to re-decorate the content\n updateFocusTermsState();\n } else {\n const newState = currentPage?.content?.formattedEditorState();\n currentPage.setCurrentEditorState(newState);\n setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentPage.contentLoadedAt, currentPage?.content?.uuid, isInitialEditorStateFetched]);\n\n useEffect(() => {\n currentPage.setRepollsAllowed(true);\n currentPage.setCurrentEditorState(decoratedState(currentPage.currentEditorState, focusTermsClassNames));\n }, [focusTermsClassNames, highlights]);\n\n\n // This is to set initial mapping of the focus terms, which is used for decorating\n useEffect(() => {\n updateFocusTermsState();\n }, [JSON.stringify(currentPage.analytics?.focusTerms?.slice()), JSON.stringify(currentPage.content?.internalLinkSuggestions?.slice())]);\n\n const loadProject = async () => {\n await pages.getAllProjects();\n };\n\n useEffect(() => {\n if (!isPublic) loadProject();\n if (isPublic) {\n setIsPublic(true);\n } else {\n setIsPublic(false);\n }\n }, []);\n\n useEffect(() => {\n if (uuid && !isPublic) {\n loadAiWriterHistory(uuid as string);\n }\n }, []);\n\n useEffect(() => {\n if (resultId) {\n setRefechForBulkArticleCreation();\n }\n }, [resultId, aiInProgress]);\n\n const setRefechForBulkArticleCreation = async () => {\n if (content.aiInProgress && resultId) {\n try {\n const now = new Date().getTime();\n await refetchOneClickDraftResultForArticleCreation(uuid, now);\n } catch (e) {\n Promise.reject(e);\n } finally {\n getCustomerQuota();\n }\n }\n };\n\n useEffect(() => {\n async function load() {\n if (uuid) {\n if (!isPublic) {\n pages.loadPages(false, pages.activeProjectId);\n }\n // this is to check if we are on initial page create screen or are we editing page\n if (!newPage) {\n await currentPage.loadPage(uuid as string);\n const targetKwArr = feTargetKeywords.map(kw => kw.keyword);\n if (content.title?.startsWith('New Document') && targetKwArr?.length) {\n const data = await loadAiMetaData(content.title, targetKwArr);\n if (data) {\n editTitle(data[0]?.metaTitle);\n }\n }\n } else {\n currentPage.initialLoadPage(uuid as string);\n }\n }\n }\n load();\n }, [uuid, currentPage.currentStep, metaData]);\n\n useEffect(() => {\n if (newPage) {\n currentPage.setNewPage(true);\n currentPage.setCurrentStep(1);\n } else {\n currentPage.setNewPage(false);\n }\n }, [newPage]);\n\n useEffect(()=> {\n headerStore.setComponent(null, false, [\n {name: '', spend: 0, total: 0, color: 'green', quotaProps: null},\n ]);\n }, []);\n\n const callBack = (width: number) => {\n if (width <= 400 && width > 0) {\n setSideBarWidth(`${width}px`);\n }\n };\n\n\n return currentPage.loading ? (\n \n {!currentPage.isLinkActive && ((currentPage.newPage && currentPage.currentStep === 1) || <>\n \n {t('error-has-ocurred')}
\n \n )}\n \n \n );\n },\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"notification\":\"styles_notification__OR6ac\",\"contactLink\":\"styles_contactLink__dGgfv\",\"success\":\"styles_success__g7z1D\",\"info\":\"styles_info__efwL4\",\"warning\":\"styles_warning__TRTcI\",\"error\":\"styles_error__PUH5a\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"customInput\":\"style_customInput__xWOlg\",\"customSelect\":\"style_customSelect__5SwsV\",\"individualCustomSelect\":\"style_individualCustomSelect__WX92V\",\"customGeneralSelect\":\"style_customGeneralSelect__OeVke\",\"user\":\"style_user__wmBrz\",\"avatar\":\"style_avatar__mO1Yn\",\"info\":\"style_info__bJG8w\",\"email\":\"style_email__7HMCL\",\"permission\":\"style_permission__eKrIo\",\"shareModal\":\"style_shareModal__tgI8u\",\"icon\":\"style_icon__7Sv9l\",\"back\":\"style_back__XA9rM\",\"header\":\"style_header__P07YH\",\"users\":\"style_users__Xet9k\",\"input\":\"style_input__CbDPX\",\"permissions\":\"style_permissions__1_Cd5\",\"notification\":\"style_notification__69SZ_\",\"checkbox\":\"style_checkbox__HLruZ\",\"inputContainer\":\"style_inputContainer__5l1dT\",\"textarea\":\"style_textarea__lBED_\",\"dropdown\":\"style_dropdown__BLJU4\",\"hideDropdown\":\"style_hideDropdown__EAZwo\",\"cancelModalButton\":\"style_cancelModalButton__0Jn_a\",\"shareModalFooter\":\"style_shareModalFooter__c_I4D\",\"suggestion\":\"style_suggestion__sQOqS\",\"name\":\"style_name__YXf18\",\"subTitle\":\"style_subTitle__hpMvF\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__bvdyc\",\"popoverDivider\":\"style_popoverDivider__7kxDv\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__f7Uga\",\"contentIdeasTitle\":\"style_contentIdeasTitle__NFfEv\",\"descriptionText\":\"style_descriptionText__lFbSB\",\"input\":\"style_input__NVKIY\",\"inputLabel\":\"style_inputLabel__di3As\",\"countrySelector\":\"style_countrySelector__RsNJa\",\"selectInput\":\"style_selectInput__bfqDn\",\"generateIdeasButton\":\"style_generateIdeasButton__wefT5\",\"generatedItemsNumb\":\"style_generatedItemsNumb__oULgy\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__Um6PF\",\"ContentIdea\":\"style_ContentIdea___8T06\",\"controlButtons\":\"style_controlButtons__3DdPK\",\"downloadButton\":\"style_downloadButton__b7Dxj\",\"copyButton\":\"style_copyButton__DS99q\",\"refreshAiOutlineBtn\":\"style_refreshAiOutlineBtn__NfuS_\",\"unsplashContainer\":\"style_unsplashContainer__tKyCE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toolbar\":\"style_toolbar__Vwy8G\",\"leftSection\":\"style_leftSection__N1651\",\"rightSection\":\"style_rightSection__E_CRH\",\"share\":\"style_share__NTvX5\",\"robotIcon\":\"style_robotIcon__d_APK\",\"contentIdeasBtnLabel\":\"style_contentIdeasBtnLabel__4qIOI\",\"shareBtnLabel\":\"style_shareBtnLabel__o5HXJ\",\"undoBtn\":\"style_undoBtn__gR9Ad\",\"redoBtn\":\"style_redoBtn__oFeoL\",\"editor\":\"style_editor__Zg73v\",\"zoom05\":\"style_zoom05__1Dz2Y\",\"zoom075\":\"style_zoom075__JA_q0\",\"zoom09\":\"style_zoom09__pWjeK\",\"zoom1\":\"style_zoom1__2IWB9\",\"zoom12\":\"style_zoom12__O5tgJ\",\"zoom15\":\"style_zoom15__3U5We\",\"zoom2\":\"style_zoom2__RtpNm\",\"expandedEditor\":\"style_expandedEditor__6u5oc\",\"divider\":\"style_divider__Y6Ylq\",\"button\":\"style_button__UOe75\",\"expandBtn\":\"style_expandBtn__eggx8\",\"copyTooltip\":\"style_copyTooltip__S3tye\",\"writeForMeContainer\":\"style_writeForMeContainer__5aagG\",\"writeForMeFeatherIcon\":\"style_writeForMeFeatherIcon__yxu8G\",\"editorTopInfo\":\"style_editorTopInfo__xoncP\",\"leftEditorTopInfo\":\"style_leftEditorTopInfo__L9LlC\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__VSP5g\",\"button\":\"style_button__QUeN9\",\"active\":\"style_active__Fv0RE\",\"urlPopup\":\"style_urlPopup__D9ZJn\",\"inputContainer\":\"style_inputContainer__bm_d7\",\"textLabel\":\"style_textLabel__IaVSL\",\"urlInput\":\"style_urlInput__hn8MM\",\"inputControlls\":\"style_inputControlls__aQiLB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__62ic4\",\"button\":\"style_button__jl08j\",\"active\":\"style_active__7OpW7\",\"urlPopup\":\"style_urlPopup__QdWSN\",\"inputContainer\":\"style_inputContainer__cNQp7\",\"textLabel\":\"style_textLabel__XLCPG\",\"urlInput\":\"style_urlInput__g2XBm\",\"inputControlls\":\"style_inputControlls___Lrie\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__q5NYO\",\"button\":\"style_button__rOfd5\",\"active\":\"style_active__8ok_g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__JEFtz\",\"button\":\"style_button__tWAPP\",\"active\":\"style_active__1Ub_o\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__vN_zL\",\"header-modal\":\"style_header-modal__zaVfr\",\"header-modal__option\":\"style_header-modal__option__uBrLT\",\"header-modal__selected\":\"style_header-modal__selected__HRX68\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__Y7Msi\",\"button\":\"style_button__qE27E\",\"active\":\"style_active__vcuPU\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7_9Fm\",\"button\":\"style_button__I4eBO\",\"active\":\"style_active__vWrUg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__F4Eq3\",\"button\":\"style_button__zXaNR\",\"active\":\"style_active__QB8X9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7hrU8\",\"button\":\"style_button__lBpTe\",\"active\":\"style_active__Vy5N_\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__ngc_6\",\"button\":\"style_button__bwqJh\",\"active\":\"style_active__pcv99\",\"urlPopup\":\"style_urlPopup__MeYFu\",\"inputContainer\":\"style_inputContainer__Yr1Ib\",\"textLabel\":\"style_textLabel__paAwp\",\"urlInput\":\"style_urlInput__u0l_s\",\"inputControlls\":\"style_inputControlls__GUFA1\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"step-one_button__LmGnF\",\"purple\":\"step-one_purple__Dr_VM\",\"teal\":\"step-one_teal__pq6oT\",\"welcome\":\"step-one_welcome__uDuo3\",\"welcomeHeader\":\"step-one_welcomeHeader__qKSL7\",\"welcomeSubHeader\":\"step-one_welcomeSubHeader__yAtvD\",\"welcomeCards\":\"step-one_welcomeCards__lU5iT\",\"welcomeCard\":\"step-one_welcomeCard__K1Ils\",\"welcomeCardHeader\":\"step-one_welcomeCardHeader__YmBsP\",\"welcomeCardSubHeader\":\"step-one_welcomeCardSubHeader__v1GbY\",\"divider\":\"step-one_divider___K9R9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"uploadForm\":\"styles_uploadForm__RQvO_\",\"urlinput\":\"styles_urlinput__NNaUR\",\"uploadBtn\":\"styles_uploadBtn__zNHxo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"keywordContainer\":\"style_keywordContainer__vPXS3\",\"keywordEditIcons\":\"style_keywordEditIcons__3jaVk\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__S1Uen\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__zFqeU\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__5qWYw\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Fg9Sz\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__UBnRt\",\"keywordLocationIcon\":\"style_keywordLocationIcon__uVBJh\",\"showIcons\":\"style_showIcons__gIQdT\",\"keywordDetailsButtonContainer\":\"style_keywordDetailsButtonContainer__nKs7u\",\"keywordDetailsIcon\":\"style_keywordDetailsIcon__6AAJ0\",\"editKwButtonContainer\":\"style_editKwButtonContainer__437ne\",\"editKwButtonIcon\":\"style_editKwButtonIcon__7aEsS\",\"keywordName\":\"style_keywordName__KZoSi\",\"targetKwContainer\":\"style_targetKwContainer__W_edh\",\"keywordMetric\":\"style_keywordMetric__BgvpY\",\"keywordMetricContainer\":\"style_keywordMetricContainer__1Xtmz\",\"expandingContainer\":\"style_expandingContainer__Ty15F\",\"expandBtn\":\"style_expandBtn__bfM2c\",\"keywordsAndSuggestionsContainer\":\"style_keywordsAndSuggestionsContainer__WHZZr\",\"collapsed\":\"style_collapsed___mhNq\",\"targetKeywordsSectionContainer\":\"style_targetKeywordsSectionContainer__MA1nu\",\"expanded\":\"style_expanded__jeR4g\",\"targetKeywordsContainer\":\"style_targetKeywordsContainer__RASzp\",\"locationToggler\":\"style_locationToggler__pes3z\",\"targetKeywordsTitle\":\"style_targetKeywordsTitle__Xiu43\",\"selectRelatedKeywords\":\"style_selectRelatedKeywords__UsR3o\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__iu89Z\",\"suggestedKwSectionTitle\":\"style_suggestedKwSectionTitle__UtMLo\",\"targetKwLoadingMsg\":\"style_targetKwLoadingMsg__vEgdP\",\"kwSuggestionsContainer\":\"style_kwSuggestionsContainer__2wt_G\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__ACSfR\",\"singleSugestedKwInnerContainer\":\"style_singleSugestedKwInnerContainer__b0ror\",\"svAndCpc\":\"style_svAndCpc__c_8wW\",\"controllsBar\":\"style_controllsBar__ALl9x\",\"clickToAdd\":\"style_clickToAdd__xtgcn\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__80skR\",\"suggestedKwTitle\":\"style_suggestedKwTitle__9QaV3\",\"closeSuggestedKW\":\"style_closeSuggestedKW__330Se\",\"secondary-text\":\"style_secondary-text__emnsR\",\"keywords\":\"style_keywords__wjpPt\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__Lm1gP\",\"cpcMetricsProgressBar\":\"style_cpcMetricsProgressBar__LTmQK\",\"focusTermPopover\":\"style_focusTermPopover__pkvY4\",\"popoverTitle\":\"style_popoverTitle__pH9eH\",\"popoverCountrySv\":\"style_popoverCountrySv__3zElP\",\"sv\":\"style_sv__qOMD7\",\"emoji\":\"style_emoji__xv7Ls\",\"popOverTitle\":\"style_popOverTitle__v_wFU\",\"competitors\":\"style_competitors__YGYr0\",\"competitor\":\"style_competitor__GWmTF\",\"popoverDivider\":\"style_popoverDivider__XCRSU\",\"headingsPopover\":\"style_headingsPopover__jTD85\",\"headingTooltipValue\":\"style_headingTooltipValue__dRrjD\",\"countrySelectorPopover\":\"style_countrySelectorPopover__RhvA2\",\"divider\":\"style_divider__0ifEI\",\"columnTitlesRow\":\"style_columnTitlesRow__oKXV2\",\"columnTitle\":\"style_columnTitle__fLfkI\",\"defaultLocationName\":\"style_defaultLocationName__K60S8\",\"locationInfo\":\"style_locationInfo__DGWFc\",\"setAsDefaultText\":\"style_setAsDefaultText__q4qk_\",\"countryReach\":\"style_countryReach__5HPf_\",\"singleCountryRow\":\"style_singleCountryRow__6YTEm\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__lSqDc\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__OhW7Z\",\"newKwFormContainer\":\"style_newKwFormContainer__ysNll\",\"addNewKwBtn\":\"style_addNewKwBtn__aHUY2\",\"addKeywordStyle\":\"style_addKeywordStyle___NjDc\",\"plusIconStyle\":\"style_plusIconStyle__dmf5B\",\"disabledBtn\":\"style_disabledBtn__z9Cbs\",\"addNewKwForm\":\"style_addNewKwForm__5iXKx\",\"newKwInputControllsContainer\":\"style_newKwInputControllsContainer__Hc69J\",\"newKwInputContainer\":\"style_newKwInputContainer__bkNBM\",\"customInputField\":\"style_customInputField__g9Ppg\",\"addNewKwBtnLabel\":\"style_addNewKwBtnLabel__SWOIT\",\"quota\":\"style_quota__MfYRt\",\"quotaValues\":\"style_quotaValues__6t772\",\"plusIcon\":\"style_plusIcon__lL8Wh\",\"newEmphasizedFormStyle\":\"style_newEmphasizedFormStyle__xmFMZ\",\"pulse-purple\":\"style_pulse-purple__P7U1V\",\"newFormStyle\":\"style_newFormStyle__lqdiW\",\"editKwForm\":\"style_editKwForm__Q_jdR\",\"editKwInputContainer\":\"style_editKwInputContainer__WBOeM\",\"editKwControllsContainer\":\"style_editKwControllsContainer__D2l73\",\"populateButton\":\"style_populateButton__aGc27\",\"confirmButton\":\"style_confirmButton__DZXoJ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentOptimizerContainer\":\"bread-crumb_contentOptimizerContainer__rqiMo\",\"divider\":\"bread-crumb_divider__VKsLJ\",\"scrolledEditor\":\"bread-crumb_scrolledEditor__4iLHS\",\"contentOptimizerHeader\":\"bread-crumb_contentOptimizerHeader__mSsmj\",\"title\":\"bread-crumb_title__8VW90\",\"back\":\"bread-crumb_back__VYwHf\",\"share\":\"bread-crumb_share__7_i4v\",\"backWrapper\":\"bread-crumb_backWrapper__XPOW2\",\"headerExtra\":\"bread-crumb_headerExtra__lVFkV\",\"kebab\":\"bread-crumb_kebab__NIs_t\",\"kebabMenu\":\"bread-crumb_kebabMenu__oJYmb\",\"kebabMenuItem\":\"bread-crumb_kebabMenuItem__YYQHl\",\"redText\":\"bread-crumb_redText__WFg6A\",\"exportBtn\":\"bread-crumb_exportBtn__qzHGF\",\"modal\":\"bread-crumb_modal__QLBQN\",\"modalTitle\":\"bread-crumb_modalTitle__0lf8D\",\"websiteLabel\":\"bread-crumb_websiteLabel__uP_MN\",\"editContainer\":\"bread-crumb_editContainer__ok1vS\",\"btn\":\"bread-crumb_btn__lZxTx\",\"exportToPdfButton\":\"bread-crumb_exportToPdfButton__HCYl1\",\"exportToDocsButton\":\"bread-crumb_exportToDocsButton__dtrrC\",\"exportDropdown\":\"bread-crumb_exportDropdown__7llmi\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerKeywords\":\"styles_headerKeywords__xxGL0\",\"popoverDivider\":\"styles_popoverDivider__zaO9y\",\"draftToolkit\":\"styles_draftToolkit__n9jPZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"content-editor_container__QYw4p\",\"left-side\":\"content-editor_left-side__l1TXd\",\"pageEditorError\":\"content-editor_pageEditorError__H_8Vw\",\"headerKeywords\":\"content-editor_headerKeywords__Nu5m7\",\"popoverDivider\":\"content-editor_popoverDivider__m2Vuv\",\"draftToolkit\":\"content-editor_draftToolkit__jDD0p\",\"loaderSpinnerContainer\":\"content-editor_loaderSpinnerContainer__3w2sl\",\"loaderSpinner\":\"content-editor_loaderSpinner__IxzP_\",\"spin\":\"content-editor_spin__6tOJb\",\"selectionTooltip\":\"content-editor_selectionTooltip__Qo0Ri\",\"arrowBottom\":\"content-editor_arrowBottom__3KZVT\",\"textInputNotification\":\"content-editor_textInputNotification__lnemm\",\"contentGeneratorDrawer\":\"content-editor_contentGeneratorDrawer__XXSAo\",\"closeIcons\":\"content-editor_closeIcons__5_3Bw\",\"outlineDrawerBackArrow\":\"content-editor_outlineDrawerBackArrow__GwHmD\",\"contentGeneratorTitle\":\"content-editor_contentGeneratorTitle__Agz_h\",\"selectedTextInfoContainer\":\"content-editor_selectedTextInfoContainer__WRKBY\",\"dataAndIcon\":\"content-editor_dataAndIcon__6OcYR\",\"textAndUrl\":\"content-editor_textAndUrl__XUxuw\",\"text\":\"content-editor_text__21AKd\",\"url\":\"content-editor_url__v_O1a\",\"textUrlControlls\":\"content-editor_textUrlControlls__thYuv\",\"urlPopup\":\"content-editor_urlPopup__gHOHE\",\"inputContainer\":\"content-editor_inputContainer__Mb2tQ\",\"textLabel\":\"content-editor_textLabel__mnezc\",\"urlInput\":\"content-editor_urlInput__2P2Tu\",\"inputControlls\":\"content-editor_inputControlls__qFkMX\",\"linkSuggestionsPopover\":\"content-editor_linkSuggestionsPopover__FFCdv\",\"extensionButton\":\"content-editor_extensionButton__bBbw0\",\"iconButton\":\"content-editor_iconButton__Cfbam\",\"ctaTitle\":\"content-editor_ctaTitle__ssOd0\",\"extensionButtonStyle\":\"content-editor_extensionButtonStyle__PN0ie\",\"closeIcon\":\"content-editor_closeIcon__UKkJM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"modal\":\"style_modal__rZesC\",\"tableOuterClusters\":\"style_tableOuterClusters__qcXJL\",\"roundEdgesTable\":\"style_roundEdgesTable__iZjyo\",\"ant-table-content\":\"style_ant-table-content__S_Fgs\",\"purpleRow\":\"style_purpleRow__bot_O\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"citationsContainer\":\"style_citationsContainer__oVqah\",\"citationsInnerContainer\":\"style_citationsInnerContainer__ZHHEU\",\"singleCitation\":\"style_singleCitation__qbxUz\",\"citationIcon\":\"style_citationIcon___x2Qc\",\"citationInfo\":\"style_citationInfo__tZ76P\",\"citationName\":\"style_citationName__pdvkB\",\"citationUrl\":\"style_citationUrl__RdI_o\",\"citationText\":\"style_citationText__BdN5t\",\"serpUsedByContainer\":\"style_serpUsedByContainer__azyj8\",\"citationSerpsContainer\":\"style_citationSerpsContainer__iipYx\",\"serpIcon\":\"style_serpIcon__w_LvR\",\"metaDescTooltip\":\"style_metaDescTooltip__nuDt4\",\"serpTooltip\":\"style_serpTooltip__QLWro\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__6RNd6\",\"serpTitle\":\"style_serpTitle__RXoga\",\"serpUrl\":\"style_serpUrl__tu4XQ\",\"emptyDataBox\":\"style_emptyDataBox__Mo6mN\",\"emptyImg\":\"style_emptyImg__9U7Nu\",\"emptyDataTitle\":\"style_emptyDataTitle__R5BVL\",\"subTitle\":\"style_subTitle__rYSu7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"questionsContainer\":\"style_questionsContainer__yjLcX\",\"questionsInnerContainer\":\"style_questionsInnerContainer__2asTx\",\"questionsNameAndCopy\":\"style_questionsNameAndCopy__lm2Dj\",\"customQuestionsName\":\"style_customQuestionsName___Vs5R\",\"serpUsedByContainer\":\"style_serpUsedByContainer__AobiD\",\"citationSerpsContainer\":\"style_citationSerpsContainer__jAx_o\",\"serpIcon\":\"style_serpIcon__6QGH4\",\"emptyDataBox\":\"style_emptyDataBox__1nQ8c\",\"emptyImg\":\"style_emptyImg__3_6YA\",\"emptyDataTitle\":\"style_emptyDataTitle__ApBiU\",\"focusTermPopover\":\"style_focusTermPopover__eCy11\",\"popOverTitle\":\"style_popOverTitle__q_bNa\",\"popoverDivider\":\"style_popoverDivider__0eu5_\",\"copyTooltip\":\"style_copyTooltip__kgoSh\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__7gwcB\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__cm2nS\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__RT8Gn\",\"copyIcon\":\"style_copyIcon__j24nu\",\"totalQuestions\":\"style_totalQuestions__2A_bv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__zQsc0\",\"limitedAccess\":\"style_limitedAccess__B2vHw\",\"flexRow\":\"style_flexRow__R2pUv\",\"quota\":\"style_quota__iFHMf\",\"focusTermDropdown\":\"style_focusTermDropdown__L17PC\",\"scoreContainer\":\"style_scoreContainer__stcBp\",\"scoreDescription\":\"style_scoreDescription__QkW_1\",\"scoreDescTitle\":\"style_scoreDescTitle__qa_Kd\",\"scoreDescText\":\"style_scoreDescText__Hprrn\",\"speedIndexContainer\":\"style_speedIndexContainer__Dejs9\",\"speedIndexDot\":\"style_speedIndexDot__ykTus\",\"refecthButtonContainer\":\"style_refecthButtonContainer__NDBTa\",\"popoverInfoContainer\":\"style_popoverInfoContainer__jZwn6\",\"customSpinner\":\"style_customSpinner__I9jMh\",\"keywords\":\"style_keywords__VUAeg\",\"keywordMetric\":\"style_keywordMetric__jFkNF\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__nk_Rf\",\"viewers\":\"style_viewers__3GdID\",\"avatar\":\"style_avatar__nAZ3X\",\"progress\":\"style_progress__Emagh\",\"smallProgress\":\"style_smallProgress__b2LvX\",\"needHelp\":\"style_needHelp__pVjFU\",\"userIcon\":\"style_userIcon__X7Oyb\",\"readabilityLetter\":\"style_readabilityLetter__RlwFP\",\"readabilityAActive\":\"style_readabilityAActive__etxiG\",\"readabilityBActive\":\"style_readabilityBActive__1xJXN\",\"readabilityCActive\":\"style_readabilityCActive__u9Z0Q\",\"readabilityDActive\":\"style_readabilityDActive__xdRpu\",\"readabilityEActive\":\"style_readabilityEActive__VQ8_a\",\"readabilitySecondary\":\"style_readabilitySecondary__2EAQH\",\"focusTermsCollapse\":\"style_focusTermsCollapse__kVGtj\",\"header\":\"style_header__YUb4w\",\"number\":\"style_number__q8kh0\",\"expandedIcon\":\"style_expandedIcon__l8nCj\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin___4hbN\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__ePTwm\",\"focusTermContent\":\"style_focusTermContent__CK3KM\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__DQAwe\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__EA8m7\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__QpYDT\",\"copyIcon\":\"style_copyIcon__3wT4i\",\"focusTermAndTags\":\"style_focusTermAndTags__Kp9wt\",\"icon\":\"style_icon__moQAn\",\"focusTermName\":\"style_focusTermName__Ly6am\",\"foundInElement\":\"style_foundInElement__tEiL_\",\"customFocusTermName\":\"style_customFocusTermName__LzC2O\",\"brandedLabel\":\"style_brandedLabel__6T1gS\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__rwsPG\",\"focusTermUsageCount\":\"style_focusTermUsageCount__1j6I7\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__qBdnF\",\"removeFocusTerms\":\"style_removeFocusTerms__07IkA\",\"removeTermLabel\":\"style_removeTermLabel__VbKWK\",\"removeTermIcon\":\"style_removeTermIcon__cKkeI\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__u3c18\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__SLkEY\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__xzq3T\",\"writingStylePopover\":\"style_writingStylePopover__sHjLJ\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__iCD9H\",\"focusTermPopover\":\"style_focusTermPopover__FKP8t\",\"innerPopover\":\"style_innerPopover__UbNja\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__RFjzG\",\"withArrow\":\"style_withArrow__I_XFV\",\"popoverTitle\":\"style_popoverTitle__lUKZy\",\"popoverCountrySv\":\"style_popoverCountrySv__geNG6\",\"sv\":\"style_sv__kQDDv\",\"emoji\":\"style_emoji__YGsrS\",\"popOverTitle\":\"style_popOverTitle__ahuD1\",\"competitors\":\"style_competitors__hwtcD\",\"competitor\":\"style_competitor__IqYyC\",\"singleCompetitor\":\"style_singleCompetitor__FwGi3\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__4CKN9\",\"snippetsContainer\":\"style_snippetsContainer__ot3Ml\",\"singleSnippet\":\"style_singleSnippet__XCQdn\",\"popoverDivider\":\"style_popoverDivider__chO8P\",\"popOverTermsTitle\":\"style_popOverTermsTitle__NKa1t\",\"headingsPopover\":\"style_headingsPopover__hbinC\",\"headingTooltipValue\":\"style_headingTooltipValue__bTPOI\",\"collapseContainer\":\"style_collapseContainer__TNTaa\",\"collapsableContainer\":\"style_collapsableContainer__HGsnN\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__MGXVA\",\"collapseButton\":\"style_collapseButton__kR3ue\",\"commonPopover\":\"style_commonPopover__kfD05\",\"editKeywordsBtn\":\"style_editKeywordsBtn__IvUg6\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__b8_ix\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__lUYBT\",\"isKeywordRemoving\":\"style_isKeywordRemoving__0Y5Pv\",\"suggestedKwContainer\":\"style_suggestedKwContainer__IrJwP\",\"svAndCpc\":\"style_svAndCpc__eV3Ml\",\"clickToAdd\":\"style_clickToAdd__Rf3jy\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__e16rv\",\"closeSuggestedKW\":\"style_closeSuggestedKW__vmyEL\",\"cancelButton\":\"style_cancelButton__vFlju\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon__hp2tW\",\"keywordContainer\":\"style_keywordContainer__o4y1J\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__HyXGY\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__n0rhQ\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__0GIsE\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Nbr1J\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__C4CXq\",\"keywordLocationIcon\":\"style_keywordLocationIcon__YjZTQ\",\"showIcons\":\"style_showIcons__PKtA1\",\"editKwButtonContainer\":\"style_editKwButtonContainer__5310p\",\"editKwButtonIcon\":\"style_editKwButtonIcon__09bVC\",\"keywordName\":\"style_keywordName__85ap5\",\"keywordMetricContainer\":\"style_keywordMetricContainer__0AxnT\",\"link\":\"style_link__vZDiF\",\"orderContentBtn\":\"style_orderContentBtn__uNKgi\",\"footerText\":\"style_footerText__iKsz1\",\"divider\":\"style_divider__mevUB\",\"viewSchemaBtn\":\"style_viewSchemaBtn__pU_vK\",\"tabs\":\"style_tabs__m6jOQ\",\"truncateText\":\"style_truncateText__hYHYr\",\"darkenTechnical\":\"style_darkenTechnical__gwrKF\",\"importUrlButton\":\"style_importUrlButton__KuVWa\",\"scoreDescHeader\":\"style_scoreDescHeader__hWDqY\",\"popOver\":\"style_popOver__f04Uy\",\"subtitle\":\"style_subtitle__OIvMk\",\"scrollBarSidebar\":\"style_scrollBarSidebar__Br9J8\",\"focusTermsExpanded\":\"style_focusTermsExpanded__6qt2U\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__9vao9\",\"selectContainer\":\"style_selectContainer___uIb5\",\"customSelectInput\":\"style_customSelectInput__eHqgt\",\"globeContainer\":\"style_globeContainer__63VkK\",\"globeIcon\":\"style_globeIcon__jyZcv\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__QGb2A\",\"countryInfo\":\"style_countryInfo__x__GX\",\"countrySearch\":\"style_countrySearch__BmySQ\",\"topDiv\":\"style_topDiv__wvomn\",\"locationArea\":\"style_locationArea__zWDch\",\"addKwBtnContainer\":\"style_addKwBtnContainer__FBfop\",\"tooltipInner\":\"style_tooltipInner___CBL_\",\"writingStyleContainer\":\"style_writingStyleContainer__keOla\",\"singleReadabilityItem\":\"style_singleReadabilityItem__Fe4pT\",\"activeReadabilityItem\":\"style_activeReadabilityItem__UpNZT\",\"prevReadabilityItem\":\"style_prevReadabilityItem__BGp7b\",\"nextReadabilityItem\":\"style_nextReadabilityItem__EGWMl\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__pUSoR\",\"addNewKwForm\":\"style_addNewKwForm__UIbcE\",\"populateButton\":\"style_populateButton__uUxBA\",\"customInputField\":\"style_customInputField__PqCdR\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs__e5i_W\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__ymRtc\",\"questionsTab\":\"style_questionsTab__BzJZ3\",\"countrySelectorPopover\":\"style_countrySelectorPopover__rkd0q\",\"columnTitlesRow\":\"style_columnTitlesRow__gDyYX\",\"columnTitle\":\"style_columnTitle__NsuCR\",\"defaultLocationName\":\"style_defaultLocationName__t5x2F\",\"locationInfo\":\"style_locationInfo__xzAIt\",\"setAsDefaultText\":\"style_setAsDefaultText__URXN3\",\"countryReach\":\"style_countryReach__Vqlx_\",\"singleCountryRow\":\"style_singleCountryRow__pNmS5\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__1cgyK\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__mvCk5\",\"copyTooltip\":\"style_copyTooltip__M8waz\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__RCmbz\",\"miniMetrics\":\"style_miniMetrics__uglSl\",\"miniMetricsLabel\":\"style_miniMetricsLabel__C7fe6\",\"miniMetricsValue\":\"style_miniMetricsValue__lweAH\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__L1MLr\",\"longLoadingBanner\":\"style_longLoadingBanner__n1_Co\",\"customSchemaBtn\":\"style_customSchemaBtn__L967y\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"linkToolTip\":\"style_linkToolTip__bhIce\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsContainer\":\"style_competitorsContainer__SfNOS\",\"competitorsInnerContainer\":\"style_competitorsInnerContainer___TbD7\",\"singleCompetitor\":\"style_singleCompetitor__U87HC\",\"competitorDetailsContainer\":\"style_competitorDetailsContainer__StWBo\",\"competitorPosition\":\"style_competitorPosition__M88ib\",\"competitorContentScore\":\"style_competitorContentScore__KDgTT\",\"competitorWordCount\":\"style_competitorWordCount__GBsaT\",\"splitter\":\"style_splitter__eGmIb\",\"progress\":\"style_progress__2Uzzo\",\"competitorIcon\":\"style_competitorIcon__FaDSp\",\"competitorInfo\":\"style_competitorInfo__V54hG\",\"competitorName\":\"style_competitorName__F92CB\",\"competitorUrl\":\"style_competitorUrl__s2401\",\"competitorText\":\"style_competitorText__Fzphu\",\"emptyDataBox\":\"style_emptyDataBox__4N8UY\",\"emptyImg\":\"style_emptyImg__CYXAU\",\"emptyDataTitle\":\"style_emptyDataTitle__Js1W9\",\"selectInput\":\"style_selectInput___gVgJ\",\"keywordChecked\":\"style_keywordChecked__C87zU\",\"ant-select\":\"style_ant-select__7CoFi\",\"ant-select-disabled\":\"style_ant-select-disabled__ju49Y\",\"ant-select-selector\":\"style_ant-select-selector__r_4up\",\"ant-select-single\":\"style_ant-select-single__R__La\",\"ant-select-customize-input\":\"style_ant-select-customize-input__4fC4G\",\"tooltipOverlay\":\"style_tooltipOverlay__6zcSe\",\"competitorTooltipUrl\":\"style_competitorTooltipUrl__U2ss8\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"analyticsCollapseCard\":\"style_analyticsCollapseCard__sEtSW\",\"expandIcon\":\"style_expandIcon__nKE6c\",\"header\":\"style_header__hnfX_\",\"headerRight\":\"style_headerRight__YroUz\",\"title\":\"style_title__ICalb\",\"divider\":\"style_divider__zJoLJ\",\"colTitle\":\"style_colTitle__nPW60\",\"pageText\":\"style_pageText__eXO_c\",\"analyticsHideArrow\":\"style_analyticsHideArrow__dF_7X\",\"paginationStyle\":\"style_paginationStyle__DHqNy\",\"singlePageBlur\":\"style_singlePageBlur__xKJPI\",\"filters\":\"style_filters__l5Lmi\",\"filtersText\":\"style_filtersText__Ri9O_\",\"filtersItems\":\"style_filtersItems__wtY3s\",\"chevron\":\"style_chevron__PPxCQ\",\"OptionContainer\":\"style_OptionContainer__9w4R7\",\"checkboxLabel\":\"style_checkboxLabel__mF6_s\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__DXBXv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorIcon\":\"style_competitorIcon__77Of4\",\"pageTitleUrl\":\"style_pageTitleUrl__l8xBO\",\"selectInput\":\"style_selectInput__bKQhM\",\"tableOuterPages\":\"style_tableOuterPages__AgusG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__l3WUN\",\"truncate\":\"style_truncate__5_fss\",\"tabsContainer\":\"style_tabsContainer__UYJo0\",\"tooltipContent\":\"style_tooltipContent__yIv6r\",\"title\":\"style_title__vbncV\",\"stat\":\"style_stat__2U44j\",\"label\":\"style_label__oCj7Z\",\"value\":\"style_value__OatCd\",\"competingTermsDrawerStyle\":\"style_competingTermsDrawerStyle__98Cfv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"selectInput\":\"style_selectInput__RDSGZ\",\"minified\":\"style_minified__rLAna\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsHeadingsDrawerStyle\":\"style_competitorsHeadingsDrawerStyle__ejLJA\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__fymKP\",\"popoverDivider\":\"style_popoverDivider__TIZ7J\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__4jpzP\",\"contentIdeasTitle\":\"style_contentIdeasTitle__rDNWa\",\"descriptionText\":\"style_descriptionText__dkTjD\",\"input\":\"style_input__ULYYv\",\"inputLabel\":\"style_inputLabel__ItSkl\",\"countrySelector\":\"style_countrySelector__DElA_\",\"selectInput\":\"style_selectInput__bf__m\",\"generateIdeasButton\":\"style_generateIdeasButton__AqGzy\",\"generatedItemsNumb\":\"style_generatedItemsNumb__iz2UY\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__4mBeR\",\"ContentIdea\":\"style_ContentIdea__2PlUV\",\"controlButtons\":\"style_controlButtons__YpGL7\",\"downloadButton\":\"style_downloadButton__iWffV\",\"copyButton\":\"style_copyButton___gD7q\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"overViewContainer\":\"style_overViewContainer__gRQCk\",\"title\":\"style_title__HNTaD\",\"boldTitle\":\"style_boldTitle__6f4Ii\",\"searchVolume\":\"style_searchVolume__kmSSg\",\"commonCitations\":\"style_commonCitations__g_Ylt\",\"citationScroll\":\"style_citationScroll__spbFE\",\"singleCitation\":\"style_singleCitation__0mNxO\",\"citationIcon\":\"style_citationIcon__UfZKe\",\"citationInfo\":\"style_citationInfo__fh1eJ\",\"citationName\":\"style_citationName__0_jeb\",\"citationUrl\":\"style_citationUrl____8Xs\",\"citationText\":\"style_citationText__j1sAb\",\"serpUsedByContainer\":\"style_serpUsedByContainer__82DwT\",\"citationSerpsContainer\":\"style_citationSerpsContainer__8KMGG\",\"serpIcon\":\"style_serpIcon__2dcxZ\",\"serpTooltip\":\"style_serpTooltip__mFPIs\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__tXyUj\",\"serpTitle\":\"style_serpTitle__KxJsy\",\"serpUrl\":\"style_serpUrl__oCtSk\",\"rankingContainer\":\"style_rankingContainer__V9EQL\",\"statusBar\":\"style_statusBar__qUtAS\",\"barTitle\":\"style_barTitle__yUiCm\",\"barSubTitle\":\"style_barSubTitle__ltuLr\",\"createButton\":\"style_createButton__4IncC\",\"rankingTable\":\"style_rankingTable__hRQEi\",\"firstColumnText\":\"style_firstColumnText__WROJq\",\"progress\":\"style_progress__Ft_pg\",\"dot\":\"style_dot__n0CLC\",\"topCompetitorTable\":\"style_topCompetitorTable__StrGn\",\"td\":\"style_td__vaRRm\",\"th\":\"style_th__e9zfY\",\"similarKeywordsTable\":\"style_similarKeywordsTable__53Snx\",\"paginationContainer\":\"style_paginationContainer__jJX9i\",\"titleText\":\"style_titleText__Z96eD\",\"urlText\":\"style_urlText__Qo1bK\",\"competitorImg\":\"style_competitorImg__Ct7If\",\"topTagsContainer\":\"style_topTagsContainer__30JuF\",\"topTags\":\"style_topTags__lUSuL\",\"addToProjectBtnExpanded\":\"style_addToProjectBtnExpanded___r13i\",\"addToProjectBtn\":\"style_addToProjectBtn__t13df\",\"disabledBtn\":\"style_disabledBtn__iGVvR\",\"addedToProjectBtnExpanded\":\"style_addedToProjectBtnExpanded__y3OYB\",\"iconRemove\":\"style_iconRemove__r5k98\",\"iconAdded\":\"style_iconAdded__KtJk2\",\"addedToProjectBtn\":\"style_addedToProjectBtn__AQ2cX\",\"viewAllKWButton\":\"style_viewAllKWButton__mqQ1f\",\"tooltipOverlay\":\"style_tooltipOverlay__EQTVG\",\"truncate\":\"style_truncate___oeK6\",\"contentResearchDrawerStyle\":\"style_contentResearchDrawerStyle__zXIxG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__V9bN1\",\"limitedAccess\":\"style_limitedAccess__9hmvs\",\"flexRow\":\"style_flexRow__TypB_\",\"quota\":\"style_quota__rhh52\",\"focusTermDropdown\":\"style_focusTermDropdown__AOpQn\",\"scoreContainer\":\"style_scoreContainer__loUPZ\",\"scoreDescription\":\"style_scoreDescription__fydWp\",\"scoreDescTitle\":\"style_scoreDescTitle__N5Fq9\",\"scoreDescText\":\"style_scoreDescText__49I_N\",\"speedIndexContainer\":\"style_speedIndexContainer__hpZ7E\",\"speedIndexDot\":\"style_speedIndexDot__XHb3w\",\"refecthButtonContainer\":\"style_refecthButtonContainer__jX7gt\",\"popoverInfoContainer\":\"style_popoverInfoContainer__zv0v3\",\"customSpinner\":\"style_customSpinner___6GwX\",\"keywords\":\"style_keywords__fho0v\",\"keywordMetric\":\"style_keywordMetric__8JKbU\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__UMcSb\",\"viewers\":\"style_viewers__L2oXV\",\"avatar\":\"style_avatar__fZe_c\",\"progress\":\"style_progress__JMqDz\",\"smallProgress\":\"style_smallProgress__gDgKa\",\"needHelp\":\"style_needHelp__wFCHN\",\"userIcon\":\"style_userIcon__ByzNC\",\"readabilityLetter\":\"style_readabilityLetter__hQD0j\",\"readabilityAActive\":\"style_readabilityAActive__X2_dk\",\"readabilityBActive\":\"style_readabilityBActive__fAWmd\",\"readabilityCActive\":\"style_readabilityCActive__i1lv3\",\"readabilityDActive\":\"style_readabilityDActive__VivCX\",\"readabilityEActive\":\"style_readabilityEActive__H5ftS\",\"readabilitySecondary\":\"style_readabilitySecondary__QWVvd\",\"focusTermsCollapse\":\"style_focusTermsCollapse__UdsfG\",\"header\":\"style_header__PDtnu\",\"number\":\"style_number__G29Vf\",\"expandedIcon\":\"style_expandedIcon__VyaR6\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin__fA2SL\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__PWpsl\",\"focusTermContent\":\"style_focusTermContent__erOS3\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__ih_4n\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__lXX3f\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__uE5uE\",\"copyIcon\":\"style_copyIcon__Yl1p4\",\"focusTermAndTags\":\"style_focusTermAndTags__e71fF\",\"icon\":\"style_icon__SlMha\",\"focusTermName\":\"style_focusTermName__2byG0\",\"foundInElement\":\"style_foundInElement__W0Nx4\",\"customFocusTermName\":\"style_customFocusTermName__Ms_Z_\",\"brandedLabel\":\"style_brandedLabel__RK_ob\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__z9yEJ\",\"focusTermUsageCount\":\"style_focusTermUsageCount__2P6MT\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__pHGc3\",\"removeFocusTerms\":\"style_removeFocusTerms__ERiTh\",\"removeTermLabel\":\"style_removeTermLabel__Hngc_\",\"removeTermIcon\":\"style_removeTermIcon__M1_JE\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__Oa1Mz\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__DyVeh\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__glCbD\",\"writingStylePopover\":\"style_writingStylePopover__C3ut3\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__5vHOV\",\"focusTermPopover\":\"style_focusTermPopover__VnTU3\",\"innerPopover\":\"style_innerPopover__lSYg1\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__24Dg6\",\"withArrow\":\"style_withArrow__5GtWL\",\"popoverTitle\":\"style_popoverTitle__ExoBo\",\"popoverCountrySv\":\"style_popoverCountrySv__XjYX9\",\"sv\":\"style_sv__uUHFn\",\"emoji\":\"style_emoji__YIvMa\",\"popOverTitle\":\"style_popOverTitle__QEfN0\",\"competitors\":\"style_competitors___oTWx\",\"competitor\":\"style_competitor__xaN9N\",\"singleCompetitor\":\"style_singleCompetitor__y4FaW\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__IGy_S\",\"snippetsContainer\":\"style_snippetsContainer__ujuID\",\"singleSnippet\":\"style_singleSnippet__VPWpj\",\"popoverDivider\":\"style_popoverDivider__boUZ7\",\"headingsPopover\":\"style_headingsPopover__y8sGr\",\"headingTooltipValue\":\"style_headingTooltipValue__fgpE6\",\"collapseContainer\":\"style_collapseContainer__pts2d\",\"collapsableContainer\":\"style_collapsableContainer__H44WO\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__88ikQ\",\"collapseButton\":\"style_collapseButton__so3g3\",\"commonPopover\":\"style_commonPopover__GswDO\",\"editKeywordsBtn\":\"style_editKeywordsBtn__u6kSF\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__NVC47\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__PZNMQ\",\"isKeywordRemoving\":\"style_isKeywordRemoving__juQLI\",\"suggestedKwContainer\":\"style_suggestedKwContainer__szYtD\",\"svAndCpc\":\"style_svAndCpc__KtqVX\",\"clickToAdd\":\"style_clickToAdd__GtPlI\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__uAxIa\",\"closeSuggestedKW\":\"style_closeSuggestedKW__g89NG\",\"cancelButton\":\"style_cancelButton__CSqoR\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon___PuoH\",\"keywordContainer\":\"style_keywordContainer__4fdS3\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__2uDTM\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__Num0E\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__Qqz06\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__aT7_s\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__ceI0z\",\"keywordLocationIcon\":\"style_keywordLocationIcon__eF4lH\",\"showIcons\":\"style_showIcons__iTCoZ\",\"editKwButtonContainer\":\"style_editKwButtonContainer__saLfy\",\"editKwButtonIcon\":\"style_editKwButtonIcon__gMi05\",\"keywordName\":\"style_keywordName__q2NAW\",\"keywordMetricContainer\":\"style_keywordMetricContainer___q6X_\",\"link\":\"style_link__01A4S\",\"orderContentBtn\":\"style_orderContentBtn__DE32O\",\"footerText\":\"style_footerText__s81Rx\",\"divider\":\"style_divider__kuakJ\",\"viewSchemaBtn\":\"style_viewSchemaBtn__4XAB1\",\"tabs\":\"style_tabs__yKF1D\",\"truncateText\":\"style_truncateText__uv_Dk\",\"darkenTechnical\":\"style_darkenTechnical__xbbue\",\"importUrlButton\":\"style_importUrlButton__gFSge\",\"scoreDescHeader\":\"style_scoreDescHeader__jw8OS\",\"popOver\":\"style_popOver__TgfyK\",\"subtitle\":\"style_subtitle__py_8r\",\"scrollBarSidebar\":\"style_scrollBarSidebar__7vCov\",\"focusTermsExpanded\":\"style_focusTermsExpanded__K1IrF\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__gHhKR\",\"selectContainer\":\"style_selectContainer__dc_Qg\",\"customSelectInput\":\"style_customSelectInput__4LY7U\",\"globeContainer\":\"style_globeContainer__wDM6e\",\"globeIcon\":\"style_globeIcon__Grl8C\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__a4Cas\",\"countryInfo\":\"style_countryInfo__fnbn7\",\"countrySearch\":\"style_countrySearch__67Vea\",\"topDiv\":\"style_topDiv__VdAWB\",\"locationArea\":\"style_locationArea__aoXon\",\"addKwBtnContainer\":\"style_addKwBtnContainer__fZ77F\",\"tooltipInner\":\"style_tooltipInner__vtG3X\",\"writingStyleContainer\":\"style_writingStyleContainer___9YQW\",\"singleReadabilityItem\":\"style_singleReadabilityItem__eEjir\",\"activeReadabilityItem\":\"style_activeReadabilityItem__wuJaK\",\"prevReadabilityItem\":\"style_prevReadabilityItem__Tp5ZP\",\"nextReadabilityItem\":\"style_nextReadabilityItem__bvcj1\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__q2__N\",\"addNewKwForm\":\"style_addNewKwForm__RKuU2\",\"populateButton\":\"style_populateButton__GrfTY\",\"customInputField\":\"style_customInputField__zvN4C\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs___0OIs\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__Gd2PJ\",\"questionsTab\":\"style_questionsTab__dppHa\",\"countrySelectorPopover\":\"style_countrySelectorPopover__T8e40\",\"columnTitlesRow\":\"style_columnTitlesRow__NMSYq\",\"columnTitle\":\"style_columnTitle__7VIWu\",\"defaultLocationName\":\"style_defaultLocationName__F5x15\",\"locationInfo\":\"style_locationInfo__NpXoS\",\"setAsDefaultText\":\"style_setAsDefaultText__cnlk2\",\"countryReach\":\"style_countryReach__pE0aL\",\"singleCountryRow\":\"style_singleCountryRow__pUxir\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__3i839\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__qu_SS\",\"copyTooltip\":\"style_copyTooltip__3916s\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__pm0sj\",\"miniMetrics\":\"style_miniMetrics__zV6fP\",\"miniMetricsLabel\":\"style_miniMetricsLabel__EtBkz\",\"miniMetricsValue\":\"style_miniMetricsValue__TOlMK\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__kw3Fc\",\"longLoadingBanner\":\"style_longLoadingBanner__Xqc_5\",\"customSchemaBtn\":\"style_customSchemaBtn__R0sVb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarError\":\"error_sidebarError__2cjOS\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"resize\":\"v2-sidebar_resize__QB3FU\",\"sidebar\":\"v2-sidebar_sidebar__q6cEA\",\"ant-typography\":\"v2-sidebar_ant-typography__ta5hf\",\"title\":\"v2-sidebar_title__OlAx5\",\"subTitle\":\"v2-sidebar_subTitle__LhneY\",\"secondary-text\":\"v2-sidebar_secondary-text__4LWw2\",\"divider\":\"v2-sidebar_divider__9z9OB\",\"link\":\"v2-sidebar_link___z0EU\",\"fullWidth\":\"v2-sidebar_fullWidth__k3Ujx\",\"back\":\"v2-sidebar_back__FYZmn\",\"close\":\"v2-sidebar_close__0lvVI\",\"edit\":\"v2-sidebar_edit__YifNd\",\"green\":\"v2-sidebar_green__KFjaa\",\"orange\":\"v2-sidebar_orange__cSWrx\",\"red\":\"v2-sidebar_red__JmlMA\",\"disable\":\"v2-sidebar_disable__nfA52\",\"upgradeCard\":\"v2-sidebar_upgradeCard__c27O9\",\"upgradeCardTitle\":\"v2-sidebar_upgradeCardTitle__HzPcb\",\"fullAccess\":\"v2-sidebar_fullAccess__tvMBu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__NBfKV\",\"left-side\":\"styles_left-side__LpfI5\",\"pageEditorError\":\"styles_pageEditorError__I7i3p\",\"headerKeywords\":\"styles_headerKeywords__2WBVR\",\"popoverDivider\":\"styles_popoverDivider__1cFJJ\",\"draftToolkit\":\"styles_draftToolkit__UgO6K\",\"loaderSpinnerContainer\":\"styles_loaderSpinnerContainer__unc8w\",\"loaderSpinner\":\"styles_loaderSpinner__qi_LK\",\"spin\":\"styles_spin__YiR1L\",\"selectionTooltip\":\"styles_selectionTooltip__DsvgJ\",\"arrowBottom\":\"styles_arrowBottom__usbcz\",\"textInputNotification\":\"styles_textInputNotification__5FRSY\",\"contentGeneratorDrawer\":\"styles_contentGeneratorDrawer__T7pXe\",\"closeIcons\":\"styles_closeIcons__8uuC5\",\"outlineDrawerBackArrow\":\"styles_outlineDrawerBackArrow__mEByX\",\"contentGeneratorTitle\":\"styles_contentGeneratorTitle__fm_kc\",\"selectedTextInfoContainer\":\"styles_selectedTextInfoContainer__lwCTc\",\"dataAndIcon\":\"styles_dataAndIcon__NAyfz\",\"textAndUrl\":\"styles_textAndUrl__cOjPy\",\"text\":\"styles_text__TfrwZ\",\"url\":\"styles_url__p8_St\",\"textUrlControlls\":\"styles_textUrlControlls__L9_rW\",\"urlPopup\":\"styles_urlPopup__3ZEur\",\"inputContainer\":\"styles_inputContainer__ACZFh\",\"textLabel\":\"styles_textLabel__yKZPz\",\"urlInput\":\"styles_urlInput__DVTni\",\"inputControlls\":\"styles_inputControlls__Ynfjt\",\"linkSuggestionsPopover\":\"styles_linkSuggestionsPopover__2c_Jo\"};"],"names":["notificationType","Notification","type","text","showContactSupportLink","param","settings","customer","isGHLAccount","useStore","openLiveChat","chatBtn","document","querySelector","click","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","div","className","classnames","styles","jsx","NextImg","src","span","onClick","CaAiQuotaInfo","observer","quotaUtilization","mode","size","customLabel","isMinified","colorSetup","useState","dark","textColor","light","gray","sizeSetup","small","fontSize","normal","profile","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","Wrapper","Label","ca","allowedAiContentGeneration","consumed","total","styled","_templateObject","p","_templateObject1","VideoPlayerModal","iconPath","title","subTitle","button1","videoLink","button2","FontAwesomeIcon","icon","faCheck","style","marginRight","buttonMinimize","onClickButton1","onClickButton2","button3","onClickButton3","home","videoPlayerModal","setVideoPlayerModal","minimized","setMinimized","Fragment","ModalStyled","destroyOnClose","width","display","alignSelf","visible","onClose","maskStyle","background","justifyContent","marginBottom","TitleText","SubTitleText","Button","color","variant","faArrowDownLeftAndArrowUpRightToCenter","iframe","height","frameBorder","allow","allowFullScreen","borderRadius","SmallPopupStyled","position","CloseOutlinedStyled","faArrowUpRightAndArrowDownLeftFromCenter","Modal","_templateObject3","_templateObject4","Table","props","block","blockProps","editor","getData","get","target","concat","createPortal","jsx_runtime","EditorBlock","data","tableKey","tableShape","colgroup","isArray","table","borderCollapse","margin","id","dangerouslySetInnerHTML","__html","tbody","map","row","i","tr","cell","j","element","th","border","padding","backgroundColor","textAlign","colSpan","colspan","rowSpan","rowspan","data-position","defaultValue","td","BlockImage","image","useRef","contentState","content","alt","getEntityAt","getEntity","widthImg","includes","heightImg","ref","iframeRegex","test","srcMatch","match","widthMatch","heightMatch","titleMatch","urlPattern","referrerPolicy","getNumberFromEnglishCounting","WriteForMe","htmlToDraft","contentOptimizer","currentPage","contentFragment","getCustomerQuota","isFullBtn","setIsFullBtn","currentEditorState","focusTermsClassNames","isSideBarHidden","antIcon","LoadingOutlined","spin","antIconLarge","useEffect","preventingDefaultMenu","e","stopPropagation","querySelectorAll","forEach","elem","addEventListener","removeEventListener","setTimeout","editorWrapperElem","getElementById","editorElem","clientWidth","offsetWidth","getEditorRealMargin","window","debouncedChange","debounce","state","focusTerms","isNewDecorations","editContent","debouncedUpdate","useCallback","getSelection","editorState","insertText","isBlock","firstNewBlockId","contentBlocks","entityMap","fragment","html","selection","newSelection","SelectionState","anchorKey","getKey","anchorOffset","getText","length","focusKey","focusOffset","getAnchorKey","getEndOffset","ContentState","createFromBlockArray","getBlockMap","nonStyledState","Modifier","replaceWithFragment","getCurrentContent","currentBlock","nextBlock","getBlockAfter","existingNodes","getAttribute","updatedState","EditorState","push","setCurrentEditorState","setAiTooltip","show","newTextElems","classList","add","analytics","remove","getParams","currentContent","fetchAndInsertText","action","selectedText","start","getAnchorOffset","getFocusOffset","end","getBlockForKey","isCollapsed","slice","fetchFragment","aiTooltip","Promise","reject","isTextSelected","isEmptyContent","Container","Tooltip","WriteForMeStyled","cursor","fragmentLoading","Spin","marginTop","indicator","faFeather","WriteForMeMiniStyled","BasedOn","isSelection","UsedQuota","used","_templateObject2","CustomBlock","blockRef","Option","Select","isOpen","setIsOpen","require","typesMap","hotKeysLabelMap","blockType","getType","dropdownRef","handleClickOutside","event","current","contains","onEditorChange","prevSelection","prevEditorState","forceSelection","BlockContainer","blockHeight","offsetHeight","topOffset","writeForMeTopOffset","isScaPublicPage","DropdownContainer","onContextMenu","currentValue","open","onChange","value","hasFocus","isBackward","newEditorState","RichUtils","toggleBlockType","dropdownStyle","dropdownMatchSelectWidth","suffixIcon","faCaretDown","Object","keys","idx","CustomBlock_templateObject","CustomBlock_templateObject1","Input","CommonInput","UploadFromUrlForm","store","form","Form","useForm","t","useTranslation","onUploadHandler","url","setIsCreateFromUrl","uploadFromUrl","updateContentLoadedAt","setCurrentStep","initialValues","onFinish","Item","name","rules","required","message","validator","_","isURL","require_protocol","resolve","inputType","placeholder","buttonType","loading","isUploading","Step1","setIsCreateFromScratch","setIsFirstArticleEdit","router","useRouter","onStartFromScratchClick","setIsFetchingTargetKw","analysis","clearUrl","createWithContent","createFromText","routes","landingPageOptimizer","query","uuid","undefined","shallow","br","Welcome","currentStep","styleMap","ContentEditor","getEditorState","showAiBanner","editorContainer","heroSection","lastScrollPosition","setLastScrollPosition","addHeroImageLoading","setAddHeroImageLoading","localStorage","setItem","aiOutline","aiMetaData","pages","getHeroImageById","clearFocusTermsClusters","getCurrentEditorState","zoomLevel","newPage","clearFeTargetKeywords","clearTargetKeywords","isInitialEditorStateFetched","setIsEditorScrolled","isEditorScrolled","setFocusTermsSorter","resetRepollCounters","clearAllTaData","setIsUnspashDrawerOpen","updateHeroImage","isHeroImageLoading","setContentType","clearAiOutline","isOpenAiOutlineDrawer","setIsOpenAiOutlineDrawer","clearV2AiOutline","setIsOpenAiContentToolsDrawer","clearTemplateOutlines","clearTemplates","setIsOpenAiWriterDrawer","clearOneClickIdea","clearOneClickOutlines","setAiWriter","aiWriterController","setAiTemplate","aiTemplatesController","clearMetaData","navBar","setIsDockedSider","heroImage","aiInProgress","setHeroImage","heroImageAltText","antIconOrange","windowHeight","innerHeight","showForm","label","key","removeSizeDataFromBlock","delete","set","blockMap","handleTabInTable","direction","collapsed","targetKey","targetBlock","getBlockBefore","merge","getLength","splitBlock","getLastBlock","createEmpty","setBlockType","isTargetTable","endOffset","setSelectionIfNone","getHasFocus","moveSelectionToStart","toggleInlineStyle","inlineStyle","customStyleMap","existingMatch","getCurrentInlineStyle","filter","split","toList","kebabCase","endsWith","rexp","RegExp","newString","replace","toggleListType","listType","getCurrentBlockType","handleDeleteKey","startBlock","getStartKey","endBlock","getEndKey","handleKeypressWhenSelectionNotCollapsed","toggleBlockData","newData","selectionState","newContentState","setBlockData","setIndent","listMax","indentMax","setDepth","adjustment","startKey","endKey","blocks","toSeq","skipUntil","k","takeUntil","depth","getDepth","maxDepth","newDepth","Math","max","min","selectionBefore","selectionAfter","isEditorFocus","focus","setIsEditorFocus","oneClick","getSingleUrlParam","writeWithAi","onEditorBlockTypeChange","getCurrentBlock","blockKey","currentSelection","handleChangeBlockType","keysMap","curPressKeys","checkKey","preventDefault","keyCode","multipleExist","keysArray","every","clearPressKeysArr","checkTitle","titleArray","handleAddHeroImage","targetKeywordsCount","cleanedHtml","res","loadPage","notification","error","warning","scrollTo","top","addHtmlToDocument","newHtml","hasText","reset","convertHtmlToEditorState","newBlockMap","newContent","currentEditor","blur","chars","prevBlock","firstCell","getStartOffset","firstTableKey","lastCell","lastTableKey","sameTable","startOffset","v","toOrderedMap","has","genKey","ContentBlock","Map","firstBlock","removeRange","first","butLast","subSelection","notLastTable","notFirstTable","notTable","separatorBlock","notTableStart","find","selectionKey","handlePastedText","pastedHtml","replaceText","moveFocusToEnd","getFirstBlock","blockRendererFn","contentBlock","component","editable","templateUsed","templateIcon","templateName","templateDesc","isStandaloneTool","toJS","isUseMask","onScroll","scrollTop","classNames","isExportingPage","getZoomLevel","editorHeightOffset","breadcrumbHeight","keywordsHeight","opaqueColor","alignItems","boxShadow","faBrainCircuit","fontWeight","marginLeft","faArrowRight","HeroImageWrapper","SkeletonRingLoader","HeroSection","HeroImage","ButtonsContainer","getPopupContainer","trigger","ButtonWrapper","faArrowsRotate","faICursor","faTrash","AiBanner","shouldPopulatePageHtml","Editor","editorKey","draftEditorState","scrollY","blockStyleFn","handleKeyCommand","command","offset","blockBefore","currentBlockType","acceptSelection","onBackspace","getFocusKey","float","keyBindingFn","KeyBindingUtil","hasCommandModifier","getDefaultKeyBinding","content_editor_templateObject","content_editor_templateObject1","content_editor_templateObject2","img","content_editor_templateObject3","content_editor_templateObject4","_templateObject5","User","avatar","email","isOwner","permission","onPermissionChange","activePermission","setActivePermission","Avatar","CaretDownFilled","share_modal_Option","ShareModal","pagePermissions","shareDialog","setEmail","setPermission","globalPermission","setGlobalPermission","isEditableByAnyone","handleGlobalPermissionsUpdate","location","existingPermission","existingViewPermission","isViewableByAnyone","navigator","clipboard","writeText","href","success","editPagePermissions","closeDialog","MixPanel","track","SCA_PAGE_SHARED","handleInviteUser","closeAfterSubmit","emails","warn","closable","closeIcon","faXmark","bodyStyle","Title","Head","InputContainer","V2Button","disabled","emailReg","EmailError","Body","ul","li","createdByUser","users","sort","user","toLowerCase","Divider","Footer","GrayButton","paddingBottom","paddingTop","share_modal_templateObject1","share_modal_templateObject2","share_modal_templateObject3","share_modal_templateObject4","share_modal_templateObject5","_templateObject6","_templateObject7","AiTooltip","activeOption","setActiveOption","urlCopy","setUrlCopy","setIsCopy","onLinkRemove","updatedSelection","toggleLink","sendTextToEditor","insertLinkToText","decorator","createCompositeDecorators","formatUrl","urlValue","entityKey","newContentWithEntity","createEntity","getLastCreatedEntityKey","newNewContent","textValue","withLinkText","withProperCursor","getSelectionAfter","isLinkEdit","bottom","left","onMouseDown","flexDirection","ButtonV2","paddingLeft","faEarthAmerica","faPen","isLink","faLinkSimpleSlash","word","faCopy","internalLinkSuggestions","link","keyword","trim","Popover","placement","overlayClassName","overlayStyle","SuggestionsContainerTitle","faCircleInfo","SuggestionsTitle","results","suggestion","SingleLinkContainer","Left","Link","Right","isUsed","SuggestionsMenuItem","faLink","faAngleRight","AiTooltip_templateObject","AiTooltip_templateObject1","AiTooltip_templateObject2","AiTooltip_templateObject3","AiTooltip_templateObject4","AiTooltip_templateObject5","AiTooltip_templateObject6","a","AiTooltip_templateObject7","Unsplash","contentType","UNSPLASH_ACCESS_KEY","UnsplashReact","namedExports","searchInput","onAddImage","imageUrl","onImageUpload","insertImage","accessKey","Uploader","withDefaultProps","InsertIntoApplicationUploader","onFinishedUploading","FreeStockTab","gap","Radio","RadioStyled","ImageComponent","setImagesList","historyCopyStatus","setShowSelectedHistoryImage","setShowHistoryImage","rootElement","setImagesAddedCount","imagesAddedCount","elemIdx","setElemIdx","imagesLoadedCount","setImagesLoadedCount","setShowAddHeroCheck","setShowAddToArticleCheck","setShowCopiedCheck","showAddHeroCheck","showAddToArticleCheck","showCopiedCheck","templatesHistory","currentElement","IntersectionObserver","entries","entry","intersectionRatio","unobserve","imagesLoading","item","imageList","images","root","threshold","observe","handleHistoryImageCopyClick","execCommand","result","inputs","fieldValue","selectedHistoryImageAdd","index","imgOnLoad","onMouseLeave","Col","onMouseOver","ColCardContainer","hide","ColCardImage","String","onLoad","button","copyIconWhite","viewImageCheck2","imageComponent_templateObject","imageComponent_templateObject1","ImageListComponent","buttonTitle","dummyImages","imagesDummy","setImagesDummy","imagesList","Row","gutter","overflow","maxHeight","val","CardStyle","load","Card","AICreateImagesTab","activeTab","isUnsplashDrawerOpen","setHistoryCopyStatus","aspectRatio","setAspectRatio","imagesAspectRatio","setImagesAspectRatio","isRealistic","setIsRealistic","loadAiTemplateOutlinesHistory","loadAiGeneratedImage","setDummyImages","setImageGenerateInputValue","imageGenerateInputValue","historyLoading","setCopyStatus","projects","setShowScaTopUpModal","isWhitelabel","isAllowedAiContentGenerationQuotaLimitReached","plans","showSidebarPaymentDrawer","setButtonTitle","showError","setShowError","showSelectedHistoryImage","showHistoryImage","selectSuffixIcon","filteredObj","projectId","defaultAiSettings","onGenerateBtnClick","subtitle","QuotaWrapper","QuotaInfoDetail","consumedData","totalData","heading","description","ctaLabel","showCta","customCta","isCenter","InputWrapper","CommonInputStyled","onFocus","whiteSpace","SettingContainer","SelectContainer","OptionLabel","SelectStyled","grayBackground","aspectRatioOptions","Checkbox","autoFocus","defaultChecked","checked","ModalImage","centered","footer","onOk","onCancel","ai_create_images_tab_templateObject","ai_create_images_tab_templateObject1","ai_create_images_tab_templateObject4","ai_create_images_tab_templateObject5","ai_create_images_tab_templateObject6","AddImageDrawer","checkTab","setActiveTab","handleClose","URL","queryParams","URLSearchParams","search","newURL","origin","pathname","toString","hash","history","pushState","path","Drawer","mask","maskClosable","TabsStyled","Tabs","tabBarGutter","activeKey","copyAndModifyQueryParams","TabPane","tab","AddImageDrawer_templateObject","EditorSection","isCopy","setEditorHeightOffset","setShowAiBanner","showEditAltModal","setShowEditAltModal","altText","setAltText","setElement","modalEditorStates","setModalEditorStates","hideButton","setHideButton","noFirstVisit","getItem","handleModalOpen","currentAlt","handleUpdateAlt","tagkey","attributes","blockList","next","newEntity","entity","mergeEntityData","promptForLink","pageX","pageY","closeContextMenu","headerKeywordsRef","updateKeywordsRef","isNil","isManualUpdate","debouncedHighlightingChange","decorated","changeType","acceptedTypes","decoratedState","debouncedHighlighting","errorMessage","isImportError","isCreatedFromScratch","prevOffset","blockWithLinkAtBeginning","linkKey","characterList","getCharacterList","initialSelectedText","generateSelectedText","lastWasEnd","selectedBlocks","blockArray","selectedTextFromBlocks","join","xSelection","x","prevChar","nextChar","prevEntity","nextEntity","finalPrevOffset","finalNextOffset","char","blockLength","finalAnchorOffset","rangeCount","getRangeAt","getBoundingClientRect","noEntityCase","noSelectionLeft","noSelectionTop","noSelectionBottom","tempX","clientY","clientX","linkInstance","startsWith","getLastChangeType","lastChangedBlockKey","lastChangedBlock","lastChangedBlockType","addCrossIcon","isExtensionInstalled","handleShowNotification","checkDate","getCount","date1","hoursDifference","Number","diffInMs","abs","date2","now","Date","maxWidth","checkCount","CloseOutlined","rel","transform","zIndex","InputTitle","InputStyled","ButtonsWrapper","CancelButton","ButtonStyled","EditorSection_templateObject","EditorSection_templateObject1","EditorSection_templateObject3","EditorSection_templateObject5","Header_Option","Header","blockTypeEnhancement","CaretDownOutlined","pointerEvents","UnorderedList","UnorderedListOutlined","Bold","inlineStyleEnhancement","BoldOutlined","Italic","ItalicOutlined","Underline","UnderlineOutlined","OrderedList","OrderedListOutlined","Code","CodeOutlined","Anchor","updateText","showNewUrlEditor","setShowNewUrlEditor","editorValues","setEditorValues","selectionRange","setSelectionRange","customSelection","dateRef","onkeydown","ctrlKey","shiftKey","metaKey","iconClicked","LinkOutlined","AnchorRemove","entityTypeEnhancement","removeLink","faUnlink","AddImage","openDrawer","faImage","Dragger","Upload","BrowseImage","loader","setLoader","isError","setIsError","altValue","parentElement","setImgFile","setImage","contentStateWithEntity","AtomicBlockUtils","insertAtomicBlock","formData","FormData","append","imgFile","CONTENT_ASSISTANT_API","uploadImage","ele","which","handleImageChange","selectedFile","reader","FileReader","onloadend","readAsDataURL","RequiredFileType","faTrashXmark","StyleDragger","multiple","showUploadList","customRequest","file","onDrop","getFile","dataTransfer","files","faCloudArrowUp","InputWraper","AtributeWrapper","Pwrapper","CancelBtn","AddBtn","browseFile_templateObject","browseFile_templateObject1","browseFile_templateObject2","UploadURL","imgRegex","imageFormat","urlUpload_templateObject","urlUpload_templateObject1","urlUpload_templateObject2","UploadImage","FileBtn","faFileImage","Popup","StyledInputContainer","StyledTabs","defaultActiveKey","UploadImage_templateObject2","UploadImage_templateObject3","InsertIframe","showIframeEditor","setShowIframeEditor","setUrl","contentData","iframeUrl","faRectangleCode","LargeBadge","alpha","StyledPopup","StyledUrlContainer","InsertButton","insertIframe_templateObject1","Textarea","Toolkit","isTaActive","setIsSideBarHidden","setZoomLevel","isPublic","updatingFolder","isLinkgraph","newState","undo","UndoOutlined","redo","RedoOutlined","faWandMagicSparkles","arrowPointAtCenter","faChevronRight","transition","useClickedOnPageHandler","callback","SingleKeywordDataCard","getSpecificCountryByCode","kw","keywordsFormProps","countries","Text","Typography","updateKeyword","useWatch","keywordResearcherV2","postNewKeywords","keywordDetails","loadKeywordDetailList","loadKeywordDetails","setDetailsRepolling","isKwNameEdit","setIsKwNameEdit","showLocationSelector","setShowLocationSelector","isEditDefaultLocation","setIsEditDefaultLocation","popRef","showKwErrorMsg","setShowKwErrorMsg","showMessage","r","removeTargetKeywords","err","payload","keywordsArray","feTargetKeywords","feKw","updateFeTargetKeywords","locationId","countryCode","editKeywords","response","status","allowedFocusTerms","isEmpty","setFieldsValue","postAndGetData","keywords","kwClickHandler","targetKeywords","setIsDrawerFromCa","setActiveTargetKw","setIsOpenKeywordDrawer","values","formKeyword","formatArray","preparedKeyword","kwArray","locationSelected","reach","updatelocationData","keywordForFrontendArray","JSON","stringify","SCA_PAGE_UPDATE_KEYWORD_LOCATION","locationDebouncerChange","country","updateCountriesList","openLocationSelector","searchForLocation","shouldUpdate","resetFields","faTimes","toUpperCase","overlayInnerStyle","faLocationDot","mouseLeaveDelay","mouseEnterDelay","openClassName","faArrowLeft","faSearch","faInfoCircle","faGlobe","formatNumber","faMapMarkerAlt","serpTaskStatus","Flag","code","searchVolumeFormatter","sv","Globe","globalSv","svTopCountries","indx","_countryCode","searchVolume","Progress","showInfo","strokeWidth","percent","round","trailColor","strokeColor","getProgressColor","SkeletonHorizontalLoaderGray","lightLoader","skeletonHeight","skeletonMarginTop","kd","getInverseProgressColor","costPerClickFormatter","cpc","TargetKeywords","expanded","isAddingNewKw","setIsAddingNewKw","newKwValue","setNewKwValue","kwLengthErr","setKwLengthErr","targetrKeywordsContainer","addHorizontalScroll","topScroll","leftScroll","scrollX","onscroll","deltaY","scrollLeft","newKwLocation","setNewKwLocation","popoverRef","onAddKeywordFinish","format","faPlus","numberWithCommas","textOverflow","faExclamationTriangle","SCA_PAGE_ADD_KEYWORD","SuggestedKeywordCard","isRemoving","setIsRemoving","addSuggestedKwToTargetKw","passedKw","stagedForAddingKw","SCA_PAGE_ADD_KEYWORD_SUGGESTION","removeTargetKeyword","removeSuggestedKeyword","strong","KeywordSuggestions","keywordSuggestionsContainer","showAllSuggestionsHandler","kwSuggestions","isFetchingSuggestedKw","editorText","TargetKeywordsAndSuggestions","isExpanded","setIsExpanded","containerRef","parentRef","ChevronDown","faChevronDown","faChevronsDown","faChevronUp","MetaIdeasList","metaIdeas","onIdeaUse","metaCopied","setMetaCopied","copyMetaHandler","desc","IdeasContainer","idea","SingleIdeaContainer","MetaTitle","metaTitle","MetaDesc","metaDesc","MetaIdeasList_templateObject","MetaIdeasList_templateObject1","MetaIdeasList_templateObject2","MetaIdeasList_templateObject3","MetaTagGenerator","updateMetaData","setIsExternalTitleEdit","isMetaUpdating","editTitle","setLoading","loadAiMetaData","metaData","showMetaDataModal","setShowMetaDataModal","customMetaTitle","setCustomMetaTitle","customMetaDesc","setCustomMetaDesc","showAiMetaResults","setShowAiMetaResults","antdIcon","updateMetadata","meta_title","meta_desc","checkPageTitle","regexp","aiButtonTooltipMsg","msg","generateSingleMetaIcon","metaValue","faHexagonExclamation","metaValueMinLength","metaValueMaxLength","largerThenMax","smallerThanMin","idealSize","missing","largerBy","smallerBy","statusMsg","faTriangleExclamation","faCircleCheck","updateMetaDataHandler","aiMetaDataHandler","targetKwArr","aiSuggestionMsg","metaDataTooltipContent","destroyTooltipOnHide","onVisibleChange","MetaDataBtnStyled","OneClickPublisherV2","extractOptions","wpArray","syncedAt","postStatus","synced","publishedAtUrl","topicalMapName","errorId","setErrorId","smallPageLoad","setUnsavedChanges","unsavedChangesInContent","wpPublish","fetchWpPublishData","postingData","showDataModal","setShowDataModal","publishWpPage","setShowAddSiteModal","isApiError","isShopifyApiError","updateApiError","setShowIndividualPopover","showIndividualPopover","setLoadingData","loadShopifyBlogs","blogs","creatingPage","creatingBlog","createNewShopifyPage","createNewShopifyBlog","getVendorAccounts","vendorAccounts","ottoV2Store","loadIssueTableData","ottoUrls","selectedWpSite","setSelectedWpSite","triggerSites","setTriggerSites","selectedShopifySite","setSelectedShopifySite","showWpVideo","setShowWpVideo","filteredObject","setFilteredObject","selectedUser","setSelectedUser","selectedWpSiteUsers","setSelectedWpSiteUsers","setTrigger","showSynchronizeTypeDropdown","setShowSynchronizeTypeDropdown","synchronizeType","setSynchronizeType","parent","setParent","project","setProject","reloadProjectUuid","refOne","refTwo","newBtnLabelOptions","setNewBtnLabelOptions","currentProject","offerPublishUrl","importedFromUrl","wpPublishedAtUrl","cleanWpArr","getDomain","showWpFormType","setShowWpFormType","syncWp","createNewWp","syncShopify","shopifySynced","createNewShopify","wpPostCategories","wpPostStatus","wpPostType","wpPublishedAtWebsiteId","defaultWpPostCategories","defaultWpPostStatus","defaultWpPostType","defaultWpWebsiteId","shopifyContentType","wpPostParent","shopDomain","wpWebsite","wpPostCategory","account_id","accountId","postParent","wpNewPostCategory","author","wpPostAuthorId","selectedWPsiteData","articles","updatedArticles","setShopifyInitialValues","newBtnLabel","setNewBtnLabel","syncBtnLabel","setSyncBtnLabel","Group","antdIconLarge","wpPostMetaDesc","getTopLinkUrl","getTopLinkId","publishWpPageHandler","notificationV2","topicalMapObject","obj","issueType","params","issue_type","page_size","pageSize","page","is_loading","pageId","pageUrl","postType","postAuthor","postCategories","selectedVendor","shopifySite","shop_domain","shopifyPayload","blog_title","ca_page_id","post_type","tags","new_post","permalink","getSyncedPill","SyncedPill","faCircleXmark","setFields","errors","categories","options","category","children","wpPublisherSyncSection","WpUpdatePostSection","isActive","CustomRadioButton","VideoTutorialBtn","InputsContainer","wpSyncedAt","shopifySyncedAt","wpSynced","shopifyContentUrl","WpLastSyncLeft","moment","WpSyncedPostDetails","sanitizeUrl","faUpRightFromSquare","InputLabelWrapper","FormLabel","initialValue","PurpleRadioButton","blueColor","getFieldValue","StyledFormItem","blog","on","userEmail","itemsArray","areCategoriesSame","Array","PublishButton","htmlType","wpPublisherNewPostSection","WpNewPostSection","borderRadiusTop","wpSite","OptionalTag","pattern","wordCount","wpPublishTooltipContent","WpPublishTooltipContentWrapper","ErrorNotificationContainer","ErrorNotification","textDecoration","onClickShopify","alignConfig","points","handleClick","shopifyBlogId","shopifyBlogTitle","shopifyPostType","shopifyAuthor","shopifyAccountId","shopifyTags","Dropdown","overlay","DropdownContentContainer","align","SynchronizeType","isCleanedHtmlUpdated","_content_wpPostAuthorId","faWordpressSimple","faCaretRight","isShopifyCustomer","faShopify","SynchronizeBtn","faRotate","OneClickPublisherV2_templateObject","OneClickPublisherV2_templateObject1","OneClickPublisherV2_templateObject2","OneClickPublisherV2_templateObject3","OneClickPublisherV2_templateObject4","OneClickPublisherV2_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject19","TitleEditor","languages","contentLoadedAt","isAnalyzing","isExternalTitleEdit","viewers","setShowQuickSyncModal","showQuickSyncModal","userAiSettings","updateUserAiSettings","getUserAiSettings","titleLeft","setTitleLeft","setTitle","modalUrl","setModalUrl","editPageUrl","setEditPageUrl","isCloseClicked","setIsCloseClicked","showDownloadConfirmationModal","setShowDownloadConfirmationModal","submitDisabled","setSubmitDisabled","renderWithbrowser","setRenderWithBrowser","keepContentModal","setKeepContentModal","titleContainerWidth","setTitleContainerWidth","calculateWidth","collapsedViewers","setCollapsedViewers","titleRef","getTitleLeft","urlInput","debouncedChangeFocusOut","URL_PATTERN","popupRef","language","setLanguage","defaultLanguage","onLanguageChangeHandler","option","selectSufixIcon","onEditUrlSubmit","updateUrlHandler","shouldOverwriteContent","renderWIthBrowser","SCA_PAGE_URL_UPDATE","titleWidth","ctx","createElement","getContext","measureText","formatedTitleWidth","WpInstructionsModal","WpAddSiteModal","CommonModal","EditUrlModalTitle","EditUrlModalSub","EditUrlLink","EditUrlModalButtons","CheckboxStyled","input","onBlur","readOnly","ScaArticleStatusSelectorV2","articleUuid","articleStatus","ProjectsSelector","projectName","pageUuid","minifiedVersion","EditUrlContainer","valuePropName","Loader","faArrowDownToBracket","faArrowUpFromBracket","opacity","StyledSelect","showSearch","filterOption","indexOf","onMouseEnter","lang","formatCountryCode","title_editor_templateObject","title_editor_templateObject2","title_editor_templateObject3","title_editor_templateObject4","title_editor_templateObject5","dropdownColors","grey","listItemsBackgroundColor","borderColor","BreadCrumb","headerTopRef","isKebabOpen","setIsKebabOpen","isModalOpen","setIsModalOpen","exportToDocsLoading","setExportToDocsLoading","briefAntIcon","copySuccess","setCopySuccess","clearAnalytics","isExporting","isSaving","exportToGoogledoc","deleteDialog","incrementInTotalArticle","setPageRemovedFromEditor","isAllowedPagesQuotaLimitReached","clientHeight","createPage","PAGES_API","SCA_CREATE_PAGE","exportToGoogleDocs","exportPageToGoogleDocs","PageHeader","onBack","login","backIcon","extra","ShareButton","openDialog","faShareNodes","ExportButton","faFileArrowDown","faEllipsisV","ButtonComponent","googledocLink","SCA_PAGE_EXPORT_TO_DOCS","GoogleOutlined","resp","exportArticleAsHtml","setAttribute","encodeURIComponent","body","appendChild","removeChild","allowedPages","DeleteModal","removeFromEditorCallback","h1","Btn","TopSection","minWidth","DraftToolkit","TextSuggestions","setIsTaActive","setFocusTermsForInsertion","stagingTaSuggestions","taActiveTerm","setTaActiveTerm","setStagingTaSuggestions","highlightedNodeId","setHighlightedNodeId","showOriginalBlockId","setShowOriginalBlockId","updatingTa","totalOccurances","setTotalOccurances","getElementsByClassName","class","onArrowClickHandler","updatedValues","term","order","nodesWithTerm","_higlightedNode_dataset","higlightedNode","dataset","blockIndex","elemOffset","offsetTop","Heading","blocksRenderer","blocksArray","domNode","attribs","typeDettector","onBlockStatusChange","prepDataArr","itemIndex","onDotClickHandler","updateImageStyle","replaceAll","TextContainer","regExp","isSuggestion","SingleBlockWithSuggestion","showingOriginalBlock","currNodeId","data-block-index","termIncluded","right","textTransform","parse","faRotateLeft","BlockWrapper","Controller","DotsContainer","Dot","Arrow","faArrowUp","faArrowDown","checkCurBlockStatus","highlightedNode","elementStatus","_highlightedNode_dataset","TextSuggestions_templateObject","TextSuggestions_templateObject1","TextSuggestions_templateObject2","TextSuggestions_templateObject3","TextSuggestions_templateObject4","TextSuggestions_templateObject5","TextSuggestions_templateObject6","TextSuggestions_templateObject7","TextSuggestions_templateObject8","TextSuggestions_templateObject9","TextSuggestions_templateObject10","TextSuggestions_templateObject11","TextSuggestions_templateObject12","MissingPlacementsBanner","setShow","termsWithNoSuggestions","setTermsWithNoSuggestions","getlinksForInsertion","linksAssistantSuggestions","prepArr","linksIncluded","noPlacementsTermsCount","autoAdjustOverflow","MissingPlacementsBanner_templateObject","SingleTerm","finalTermsList","setFinalTermsList","setVisible","kwUpdate","termIndex","setTermIndex","getstagingLinkSuggestions","setStagingLinkSuggestions","setLinkActiveTerm","linkActiveTerm","onTermClickHandler","curTerm","newClass","incDec","cardClick","scrollTerms","acceptedStatus","dismissedStatus","CardTitle","isTerm","faCircleX","faCircleDashed","StatusTitle","isVal","DividerLine","SuggestionCard","newItems","updateTerm","SingleTerm_templateObject","SingleTerm_templateObject1","SingleTerm_templateObject2","SingleTerm_templateObject3","SingleTerm_templateObject4","SingleTerm_templateObject6","LinksList","taLinkSuggestionLoading","setFilter","loadLinksData","expectedData","outerArray","linksData","innerArray","uniqueData","seenSet","Set","array","stringRepresentation","suggestionList","allLinks","arrayToObject","givenValue","expectedValue","internalLinkSuggestionsV2","getTerms","elements","DOMParser","parseFromString","innerText","formattedArray","arr","arrTwo","indexx","filteredValue","addData","firstTerm","LinkAssistantRightSidebar","inputValue","activeKeywordsList","setIsLinkActive","setLinksForInsertion","stagingLinkSuggestions","setIsTaUpdating","fetchLinkSuggestions","setActiveKeywordsList","updated","setUpdated","setInputValue","anyButtonClicked","setAnyButtonClicked","activeKwArr","active","onCheckboxClicked","elemId","filteredKw","findIndex","onCancelClickHandler","onSubmitHandler","finalHtmlOutput","updatedEditorState","keywordsDropdown","KeywordsDropdownContainer","OverlayTitle","addLink","allLink","urlWithProtocols","links","stringToArray","keywordNewLineReg","popoverContent","CustomTextarea","paddingToNumber","paddingToText","isKeyWordv2","autoSize","minHeight","autoSizeCheck","nativeEvent","LinkSubmitBtns","selectedLink","TaWrapper","TermsMainWrapper","TitleContainer","Description","ActionButtonsContainer","some","linkAssistantRightsideBar_templateObject","linkAssistantRightsideBar_templateObject1","linkAssistantRightsideBar_templateObject3","linkAssistantRightsideBar_templateObject4","linkAssistantRightsideBar_templateObject5","linkAssistantRightsideBar_templateObject7","viewSuggestionsOption","css","blinkAnimation","keyframes","linkAssistantRightsideBar_templateObject9","linkAssistantRightsideBar_templateObject10","linkAssistantRightsideBar_templateObject11","linkAssistantRightsideBar_templateObject12","TextSuggestionsLinks","isLinkActive","doc","TextSuggestionsLinks_templateObject","TextSuggestionsLinks_templateObject1","TextSuggestionsLinks_templateObject2","TextSuggestionsLinks_templateObject3","TextSuggestionsLinks_templateObject4","TextSuggestionsLinks_templateObject5","LeftSide","sideBarWidth","LeftSideContainer","isLinkSuggestionActive","isNewPage","LeftSide_templateObject","Error","WarningOutlined","h3","SingleCluster","SORT_DIRECTION","removingTerms","cluster","isClusterRemoving","tableData","setTableData","sortField","setSortField","sortDirection","setSortDirecion","removeClusterHandler","isBulkRemovingCluster","bulkRemoveTerms","setTerms","dataFiltered","filterDataInMemory","handleTableChange","pagination","filters","sorter","column","sortFieldName","dataSource","loadingRows","columns","dataIndex","render","record","foundIn","FoundInLabel","isBranded","formatLargeNumber","defaultSortOrder","usedCount","idealCountMax","RemoveClusterBtn","rowKey","SingleCluster_templateObject","SingleCluster_templateObject1","BulkRemoveTermsModal","clusteredTerms","setClusteredTerms","clusterToRemove","setClusterToRemove","clusterTerms","clusters","tempArr","focusTermsSorter","tempCluster","b","clusterTitle","termsArr","ModalTitle","CollapseStyled","expandIconPosition","Collapse","Panel","header","ClusterHeader","ClusterName","ClusterDesc","clusterSv","BulkRemoveTermsModal_templateObject","BulkRemoveTermsModal_templateObject1","BulkRemoveTermsModal_templateObject2","BulkRemoveTermsModal_templateObject3","BulkRemoveTermsModal_templateObject5","TermsDropdownController","onViewChange","currentView","onChangeIncludeBranded","includeBranded","onTermsFilter","onSortTerms","showExportModal","setShowExportModal","showBulkRemoveTermsModal","setShowBulkRemoveTermsModal","getTermsCount","termsFiltersSetup","setTermsFiltersSetup","handleOnSortChange","downloadFileToTxt","pageTitle","articleUrl","imagesCount","count","videosCount","videos","iframesCount","iframes","internalLinksCount","internal","externallLinksCount","external","socialCount","social","javascriptCount","js","headersSum","headers","headersCount","pageTechnicalsString","includedFocusterms","notIncludedFocusTerms","ft","requiredCountMin","questionsSting","questions","q","convertedText","Blob","createObjectURL","download","getXlsExportLink","token","getTokenFromCookies","baseUrl","getApiUrl","BaseApi","CA_ENDPOINT","termsFilterHandler","updatedTermsSetup","updatedFilteredTermsArr","tooltipStyle","isNotPublic","viewChangeDropdown","TermsViewDropdownContainer","CheckboxStyledHighlights","highlights","setHighlights","PTag","BulkRemoveTermsBtn","TermsContainer","ExportModalTitle","ExportModalDesc","ExportModalButtonsContainer","faFileSpreadsheet","faFileLines","faGoogle","TermsFilterContainer","customBackground","GroupTermsContainer","Menu","sorters","Sort","faArrowUpArrowDown","SortTxt","isRemovingFocusTerms","AddButton","setShowAddFocusTermModal","ExportBtn","AdjustBtnContainer","GearIcon","faSliders","TermsDropdownController_templateObject","TermsDropdownController_templateObject1","TermsDropdownController_templateObject2","TermsDropdownController_templateObject4","TermsDropdownController_templateObject5","TermsDropdownController_templateObject7","TermsDropdownController_templateObject9","TermsDropdownController_templateObject10","TermsDropdownController_templateObject11","TermsDropdownController_templateObject12","TermsDropdownController_templateObject13","TermsDropdownController_templateObject14","TermsDropdownController_templateObject15","TermsDropdownController_templateObject16","TermsDropdownController_templateObject17","TermsDataController","onFilter","isClustersExpanded","setIsClustersExpanded","termsSearchQuery","setTermsSearchQuery","termsSearchInputValue","setTermsSearchInputValue","secondAntIcon","handleOnClusterClick","filteredSearch","clusterName","termSearchHandler","formatInput","trimmedArr","SearchAndSort","prefix","faMagnifyingGlass","ClustersWrapper","ClustersContainer","expandedClusters","ClusterTooltipSingleRow","ClusterTooltipLabel","ClusterTooltipValue","SingleClusterContainer","activeCluster","TermsDataController_templateObject","TermsDataController_templateObject1","TermsDataController_templateObject2","TermsDataController_templateObject3","TermsDataController_templateObject4","TermsDataController_templateObject5","TermsDataController_templateObject6","TermsDataController_templateObject7","AntdInput","focusTerm","removeTermHandler","removeTerms","termContainerSetup","hoverBackground","fitTermInQuota","quote","startIndex","h5","targetKewyordsOnlyArr","getTwoGreenPercentageColor","percentage","requiredCountMax","competitors","competitor","getSiteName","hostname","snippets","snippet","normalizedScore","source","LowerSection","isAnyFocusTermLink","wikipediaLink","wikidataLink","knowledgeGraphLink","crunchbaseLink","ReferencesWrapper","ReferencesTitle","LinksWrapper","SingleLink","faWikipediaW","TermContainer","TermName","BrandedLabel","CopyIcon","FocusTermsTab_SingleTerm_templateObject","FocusTermsTab_SingleTerm_templateObject1","FocusTermsTab_SingleTerm_templateObject2","FocusTermsTab_SingleTerm_templateObject3","FocusTermsTab_SingleTerm_templateObject4","FocusTermsTab_SingleTerm_templateObject5","FocusTermsTab_SingleTerm_templateObject6","SingleTerm_templateObject7","SingleTerm_templateObject8","SingleTerm_templateObject9","SingleTerm_templateObject10","SingleTerm_templateObject11","TermsDropdowns","includedBranded","setIncludeBranded","setQuery","termsToShow","setTermsToShow","isCopied","setIsCopied","standardTerms","setStandardTerms","queryParam","prepTermsArr","filteredTerms","termsToShowParam","TopicalTermsContainer","focusMode","focusTermsExpanded","CopyButton","TermsDropdowns_templateObject","TermsDropdowns_templateObject1","TermsDropdowns_templateObject2","FocusTermsTab","includedTerms","includeMoreTerms","includeLessTerms","EmptyDataBox","FocusTermsTab_templateObject","LinkSuggestionsDropdownController","isSynced","setIsSynced","isSyncing","setIsSyncing","onLinksSync","getInternalLinkSuggestionsv2","FocusModeBtn","setFocusTermsExpanded","faDownLeftAndUpRightToCenter","faUpRightAndDownLeftFromCenter","FocusModeLabel","ExportIcon","faFileDownload","RefetrchBtnContainer","faSyncAlt","LinkSuggestionsDropdownController_templateObject","LinkSuggestionsDropdownController_templateObject2","LinkSuggestionsDropdownController_templateObject3","LinkSuggestionsDropdownController_templateObject4","SingleSuggestion","customCallback","isRemovingTerm","setIsRemovingTerm","isBookmarked","setIsBookmarked","removeInternalLinkSuggestion","bookmarkInternalLinkSuggestion","TitleAndStar","faStarSolid","faStar","SingleISugesstion_templateObject","SingleISugesstion_templateObject1","SingleISugesstion_templateObject2","SingleISugesstion_templateObject3","SingleISugesstion_templateObject4","SingleISugesstion_templateObject5","InternalLinksSuggestions","isQueried","DropdownsContainer","InternalLinkSuggestions_templateObject","SingleCitation","citation","addDefaultSrc","onError","substring","serps","serp","CommonCitations","commonCitations","SidebarTooltip","SuggestionsDataController","visibleKeywords","updateKeywords","linksDropDownFromSuggestion","showEditor","setShowEditor","hostnameEditor","EditorContainer","FormStyled","updateHostname","InputStyeld","ButtonContainer","isUpdatingHostname","UpdateButton","topMessage","HostnameContainer","HostnameLink","addProtocolToDomain","HostnameLinkBtnContainer","AddNewUrlBtn","ViewDropdownContainer","viewControlls","ViewControllsContainer","SearchAndSortWraper","SearchContainer","SuggestionsDataController_templateObject","SuggestionsDataController_templateObject1","SuggestionsDataController_templateObject3","SuggestionsDataController_templateObject4","SuggestionsDataController_templateObject5","SuggestionsDataController_templateObject6","SuggestionsDataController_templateObject7","SuggestionsDataController_templateObject9","CommonBtn","SuggestionsDataController_templateObject12","SuggestionsDataController_templateObject17","SuggestionsDataController_templateObject19","_templateObject20","_templateObject21","LinkSuggestionsTab","perc","setCurrentView","searchQuery","setSearchQuery","dataArr","setDataArr","initialDataArr","setInitialDataArr","setIsQueried","selectedOption","setSelectedOption","domain","setDomain","isVisiblePopover","setIsVisiblePopover","updateLoading","setUpdateLoading","urlsError","setUrlsError","isFetchingIntLinksSug","onDataFilter","filterDataHandler","formattedArr","customDataArr","foundLinks","n","filteredSelectedLinks","foundLink","calculateUsagePercentage","postLInkSuggestion","initValues","handleRadioChange","submitUrl","apiError","kwArr","SuggestionsBannerContainer","TooltipTitle","TooltipDescription","exportLinkIcon","Pill","StyledPopover","PopoverContentWrapper","PopoverTitle","providedUrl","AddDomainSection","DomainDetails","AddDomainTitle","AddDomainDesc","AddDomainInput","ProvideUrlsSection","ProvideUrlsDetails","ErrorMessageForURL","Dismiss","Update","onOpenChange","LinkSuggestionsTab_templateObject","LinkSuggestionsTab_templateObject1","LinkSuggestionsTab_templateObject2","LinkSuggestionsTab_templateObject3","LinkSuggestionsTab_templateObject4","LinkSuggestionsTab_templateObject6","LinkSuggestionsTab_templateObject7","LinkSuggestionsTab_templateObject8","LinkSuggestionsTab_templateObject9","LinkSuggestionsTab_templateObject10","LinkSuggestionsTab_templateObject11","LinkSuggestionsTab_templateObject12","LinkSuggestionsTab_templateObject14","LinkSuggestionsTab_templateObject15","LinkSuggestionsTab_templateObject16","LinkSuggestionsTab_templateObject18","SingleQuestion","question","aiCopied","setAiCopied","setCreatingPage","isAiGenerating","setIsAiGenerating","justify","faMessageCheck","faFilePlus","QuestionsTab","level","htmlString","string","copiedText","textContent","htmlContent","plainTextContent","copyToClipboardWithHtmlAndText","AddFocusTermModal","showAddFocusTermModal","terms","addFocusTerms","isFocusTermsLoading","handleAddFocusTerms","StyledModal","Desc","TextArea","AddFocusTermModal_templateObject1","AddFocusTermModal_templateObject2","AddFocusTermModal_templateObject3","AddFocusTermModal_templateObject4","FocusTermsTabs","setActiveKey","onChangeTab","SCA_PAGE_FOCUS_TERMS_TAB_OPEN","SCA_PAGE_QUESTIONS_TAB_OPEN","SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN","CommonTabsStyled","tabBarStyle","editorScrolled","TabTitleContainer","totalUsedTerms","totalUsedQuestions","totalUsedSuggestions","CommonTabs","CommonTabPane","FocusTermsTabs_templateObject2","SingleMetrics","tooltipLabel","showTooltip","headingData","StyledLable","StyledIcon","RangeValues","h2","h2Min","h2Max","h3Min","h3Max","internalLinks","internalLinksMin","internalLinksMax","externalLinks","externalLinksMin","externalLinksMax","isWithinRecomendedRange","SingleMetrics_templateObject","SingleMetrics_templateObject1","SingleMetrics_templateObject2","SingleMetrics_templateObject3","ContentScore","scoreCounts","scoreExtended","internalLinksData","externalLinksData","avg","h1value","h1Min","h1Max","h2value","h3value","setViewSuggestionsOption","setLinksDropDownFromSuggestion","isWordCountLoading","isScoreLoading","score","suggestedWordCountLimits","viewSuggestionHandler","shouldShowTooltip","tooltipMsg","cur","openText","scrollToText","anchorTag","scrollIntoView","behavior","countsSetup","lower","upper","paragraphs","paragraphsMin","paragraphsMax","headings","headingsMin","headingsMax","StyleHeadingsTooltipTitle","internalLinksLength","externalLinksLength","StyledLinksTabs","StyledRecommender","StyledRecomentedValue","StyledSuggestionLink","showAsLink","StyledCurrentValue","StyledFontAwesomeIcon","StyledLinksDiv","StyledLinkItem","faArrowUpRightFromSquare","ReactEcharts","grid","series","axisLine","roundCap","lineStyle","progress","startAngle","radius","endAngle","pointer","offsetCenter","itemStyle","axisTick","splitLine","distance","splitNumber","axisLabel","detail","RightSection","ContentScore_templateObject","ContentScore_templateObject1","ContentScore_templateObject2","ContentScore_templateObject5","ContentScore_templateObject6","ContentScore_templateObject7","ContentScore_templateObject8","ContentScore_templateObject9","ContentScore_templateObject10","WordCount","WordCount_templateObject","WordCount_templateObject1","HeaderSection","MiniContainer","ScoreAndWordCount","ProgressStyled","strokeLinecap","gapDegree","gapPosition","MiniTitleContainer","HeaderSection_templateObject","HeaderSection_templateObject1","HeaderSection_templateObject2","HeaderSection_templateObject3","HeaderSection_templateObject5","HeaderSection_templateObject6","HeaderSection_templateObject7","termsForInsertion","termsAssistantSuggestions","overflowY","TermsAssistant_MissingPlacementsBanner_templateObject","dots","setDots","saved","dismissed","savedPlacements","dismissedPlacements","placements","Data","PlacementsInfo","generatePlacmenetsInfo","TermsList_SingleTerm_templateObject","TermsList_SingleTerm_templateObject1","TermsList_SingleTerm_templateObject2","TermsList_SingleTerm_templateObject3","TermsList_SingleTerm_templateObject4","TermsList","termOccurances","TermsSelectionDropdown","_filter","selectedTerms","setSelectedTerms","popoverVisible","setPopoverVisible","showLimitError","setShowLimitEror","fetchTaSuggestions","taSuggestionsLoading","handleCheckboxClick","updatedList","onTermsSearchHandler","onBulkSelectTop20Handler","addCompleteTerms","prepcCompleteTerms","completeTermsLength","prepIncludeMoreTerms","onUncheckAllClickHandler","onTriggerClickHandler","HeadingSection","SearchBox","QuotaInfo","ControllsBar","BulkControllBtn","SingleTermRow","opaque","TermUsage","BtnsContainer","Trigger","TermsSelectionDropdown_templateObject","TermsSelectionDropdown_templateObject1","TermsSelectionDropdown_templateObject2","TermsSelectionDropdown_templateObject3","TermsSelectionDropdown_templateObject4","TermsSelectionDropdown_templateObject6","TermsSelectionDropdown_templateObject7","TermsSelectionDropdown_templateObject8","TermsSelectionDropdown_templateObject9","TermsSelectionDropdown_templateObject11","TermsSelectionDropdown_templateObject12","TermsSelectionDropdown_templateObject13","TermsAssistantRightSidebar","RightSidebar_templateObject","RightSidebar_templateObject1","RightSidebar_templateObject2","RightSidebar_templateObject3","RightSidebar_templateObject4","RightSidebar_templateObject5","SingleCompetitor","contentScore","TopRankingCompetitors","topRankingCompetitorActiveKw","competitorsData","setTopRankingCompetitorsActiveKw","openCompetingFocusTermsDrawer","onSelect","dropdownClassName","DrawersTriggers","changeView","loadingTaSuggestions","setLoadingTaSuggestions","handleTriggerAssistant","finalPrepArr","buttonsConf","faListTree","hoverColor","openCompetitorsHeadingsDrawer","faMagicWandSparkles","tooltipContent","faWrench","faChartSimple","updatedButtonConf","SingleItem","DrawersTriggers_templateObject","DrawersTriggers_templateObject1","Analytics","ContentContainer","Analytics_templateObject","Analytics_templateObject1","KeywordSelector","isSubscriber","isCompetitorsTable","setFilteredCompetitorsData","setActiveKw","setCompetitors","activeKw","handleOnSelectChange","KeywordDropdownWrapper","KeywordSelector_templateObject","CompetitorsTable","filteredCompetitorsData","schemaTypesList","allSchemasCount","nullCount","selectedSchema","setSelectedSchema","setShowCompetitorTermsTableDetail","isSmallScreen","setIsSmallScreen","allowScroll","setAllowScroll","onWindowResize","innerWidth","average","reFormatSchemaType","schema","selectedSchemaValue","filteredItems","graph","graphItem","fixed","ellipsis","PageUrlWrapper","lineHeight","dr","parseFloat","toFixed","DRWrapper","schemaLength","schemaItemsList","BlueTextWithUnderline","ULStyled","LinksContainer","paddingRight","LinkWrapper","StyledAnchor","h1Count","h2Count","h3Count","TypesSchemaFilterWrapper","SchemaFilterTitle","SchemaFilterWrapper","SchemaFilter","scroll","y","_dir","CompetitorsTable_templateObject","CompetitorsTable_templateObject1","CompetitorsTable_templateObject2","CompetitorsTable_templateObject3","CompetitorsTable_templateObject4","CompetitorsTable_templateObject5","CompetitorsTable_templateObject6","CompetitorsTable_templateObject7","CompetitorsTable_templateObject8","CompetitorsTable_templateObject9","CompetitorsTable_templateObject10","CompetitorsTable_templateObject11","CompetitorsTable_templateObject12","CompetitorsDetail","competitorSchemaObject","competitorTitle","competitorUrl","competitorSchemaGraphIdx","formats","renderSchemaData","dataObj","LargeLine","mainLebel","mainValue","SchemaLabel","SchemaValue","urlValidationRegex2","isValid","utc","BackArrowContainer","SchemaContainer","SchemaHeader","SchemaPageTitle","context","CompetitorsDetail_templateObject","CompetitorsDetail_templateObject1","CompetitorsDetail_templateObject2","CompetitorsDetail_templateObject3","CompetitorsDetail_templateObject4","CompetitorsDetail_templateObject5","CompetitorsDetail_templateObject6","CompetitorsDetail_templateObject7","CompetitorsDrawerTab","setSchemaTypesList","setAllSchemasCount","setNullCount","showCompetitorTermsTableDetail","squareTooltip","IsRanking","IsNotRanking","focusTermsTooltip","CompetingFocusTermsDrawer","isCompetingFocusTermsDrawerOpen","closeCompetingFocusTermsDrawer","isOpeningKwSuggestionsFromContentResearch","setIsOpeningKwSuggestionFromContentResearch","selectedKeyword","setSelectedKeyword","selectedCompTabKw","setSelectedCompTabKw","isHovered","setIsHovered","maxElemHeight","setMaxElemHeight","allRef","keywordSuggestionsRef","elementsArray","elementsWidthArr","exportSingleNode","node","today","date","getFullYear","getMonth","getDate","html2canvas","then","canvas","toDataURL","onTabChange","schemaCountsHandler","competitorsTypes","countOccurrences","inputArray","counts","prototype","hasOwnProperty","call","afterVisibleChange","focusTermsGridData","TitleStyled","tabPosition","overflowX","Subtitle","data-html2canvas-ignore","SectionHeader","sites","Rank","Site","rotate","wrap","contentScores","focusTermUsageBySites","Square","keywordSuggestionsGridData","keywordSuggestionsUsageBySites","CompetingFocusTermsDrawer_templateObject","CompetingFocusTermsDrawer_templateObject1","CompetingFocusTermsDrawer_templateObject2","CompetingFocusTermsDrawer_templateObject3","CompetingFocusTermsDrawer_templateObject4","CompetingFocusTermsDrawer_templateObject5","CompetingFocusTermsDrawer_templateObject6","CompetingFocusTermsDrawer_templateObject7","CompetingFocusTermsDrawer_templateObject9","CompetingFocusTermsDrawer_templateObject10","CompetingFocusTermsDrawer_templateObject11","NewContentIdeaForm","drawerVisible","usaCode","selectedCountry","setSelectedCountry","onFormSubmit","topic","loadContentIdeasData","SCA_PAGE_CONTENT_IDEAS_GENERATE","SingleContentIdea","setConvertedText","newLineIndex","textWithoutLeadingSpace","firstTitle","breakFileName","fileName","faDownload","SCA_PAGE_CONTENT_IDEA_DOWNLOAD","SCA_PAGE_CONTENT_IDEA_COPY","CopyOutlined","ContentIdeas","csvModel","wordsArray","CsvDownloader","datas","filename","displayName","ExportOutlined","ContentIdeasDrawer","contentIdeas","setDrawerVisible","clearContentIdeas","setIsOpenContentGeneratorDrawer","SimilarKeyword","isIncluded","OverviewPage","addToLoadingArray","loadingArray","onRemoveKeywordFinish","ContentResearchDrawer","keywordDetail","isContentResearchDrawerOpen","closeContentResearchDrawer","getKeywordDetail","removeFromLoadingArray","countryName","similarKeywordsPageNumber","setSimilarKeywordsPageNumber","similarKeywordsPageSize","similarKeywordsData","setSimilarKeywordsData","similarKeywordsList","setSimilarKeywordsList","topCompetitorsData","setTopCompetitorsData","rankingPotentialData","setRankingPotentialData","handleFilterRenderData","dataArray","pageNumber","targetKwArray","similarKeywordsFormattedData","isKwIncluded","similarKeywords","onPaginationChange","relevanceData","competition","typicalTop10","averageContentScores","averageDr","averageWordCount","readAbility","averageReadability","SimilarKeywordConfig","BarChartColumn","numeral","PageTitle","skeletonMarginRight","totalSearchResults","rankingPotential","xAxis","svTrend","interval","formatter","rich","month","year","yAxis","volume","areaStyle","symbolSize","symbol","MiddleContainer","readability","Pagination","showSizeChanger","defaultPageSize","showQuickJumper","termsGrid","ContentResearchDrawer_templateObject","ContentResearchDrawer_templateObject1","ContentResearchDrawer_templateObject2","ContentResearchDrawer_templateObject3","ContentResearchDrawer_templateObject4","ContentResearchDrawer_templateObject5","ContentResearchDrawer_templateObject6","ContentResearchDrawer_templateObject7","ContentResearchDrawer_templateObject8","ContentResearchDrawer_templateObject9","ContentResearchDrawer_templateObject10","KeywordsDrawer","isOpenKeywordsDrawer","isDrawerFromCa","KeywordDetailContent","TechnicalsViewSwitcher","TechnicalsSwitcherContainer","ViewSwitcher_templateObject","PageSpeedIndex","refetchArticle","refetchPage","SpeedIndexContainer","psiMetrics","avgSpeedIndex","SpeedIndexDot","LastFetchContainer","updatedAt","faRotateRight","isInitialPageLoad","isTechnicalsDataLoading","PageSpeedIndex_templateObject","PageSpeedIndex_templateObject1","PageSpeedIndex_templateObject2","PageSpeedIndex_templateObject3","TechnicalScore","technicalsMsgColorMap","technicalScore","TitleAndWordCount","TechnicalScore_templateObject","TechnicalScore_templateObject1","TechnicalScore_templateObject2","TechnicalScore_templateObject3","auditLoader","setAuditLoader","onPageAuditPopoverVisible","setOnPageAuditPopoverVisible","contentAuditStore","loadContentAudit","setNewRecordId","antIconSecond","onRunPageAudit","countryCodeToUse","getId","shouldUseHeadlessBrowser","onPageAuditDetails","TopSeactionContainer","PopoverWrapper","getUniqueKeywords","existingValues","getFieldsValue","AntdCheckbox","PopoverKwContainer","PopoverBtnContainer","RunPageAuditBtn","faFileChartColumn","BtnText","Technicals_HeaderSection_templateObject","Technicals_HeaderSection_templateObject1","Technicals_HeaderSection_templateObject3","Technicals_HeaderSection_templateObject4","Technicals_HeaderSection_templateObject5","Technicals_HeaderSection_templateObject6","HeaderSection_templateObject8","AnalyticsCollapseCard","descriptionColor","colTitle1","colTitle2","sortKey","colTitle3","colTitle4","dataRenderer","isCollapse","defaultActive","plan","warningBar","setPageNumber","checkData","setCheckData","isFilterOpened","setIsFilterOpened","sortOrder","setSortOrder","formatData","setFormatData","sortData","sortBy","bordered","expandIcon","CaretUpFilled","faCaretUp","defaultCurrent","faFilter","ChevronUp","disabledTooltip","SchemaModal","setShowModal","dataList","setExpanded","dataForDisplay","ModalContentWrapper","MainContainer","potentialAction","z","wordBreak","queryInput","SchemaModal_templateObject","SchemaModal_templateObject1","SchemaModal_templateObject2","SchemaModal_templateObject3","SchemaModal_templateObject4","SchemaModal_templateObject5","SchemaModal_templateObject6","TechnicalsData","showMissingAltText","setShowMissingAltText","isActiveInternalBrokenLinks","setIsActiveInternalBrokenLinks","isActiveExternalBrokenLinks","setIsActiveExternalBrokenLinks","showSchemaModal","setShowSchemaModal","internalLinksFilters","statusCode","SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN","uiFormatImageSize","sizeArray","brokenHeaders","translateWord","getMissingAltTotal","imagesFilter","SCA_PAGE_IMAGES_SHOW_MISSING_ALT","externalLinksFilters","SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN","displayStatusCode","displayFollowCode","followCode","jsonLd","metaSummary","meta","field","statusColor","suggestionColor","getStatusColor","Image","getMissingAltText","WarningMiniBar","Video","video","visitable","ExternalLink","generateInternalLinksDesc","msgArr","labelColor","getInternalBrokenLinksCount","getInternalRedirectsCount","anchor","generateExternallLinksDesc","getExternalBrokenCount","getExternalRedirectsCount","List","ButtonLink","linkgraphDomain","Technicals","DataContainer","Technicals_templateObject","Technicals_templateObject1","compListCollapsed","HeadingsTree","activeCompetitor","setShowBulkAddContentBtn","showBulkAddContentBtn","setCheckedCount","checkedCount","setCheckedIndexData","checkedIndexData","setCopiedHeadings","addedHeadings","setAddedHeadings","copiedHeading","setCopiedHeading","tag","setFilters","onCheckboxChecked","curFilters","checkboxClickHandler","headingContent","headingTag","handleCopyClick","updatedCopiedHeadings","textToAdd","headingType","cleanText","curAddedHeadings","updatedAddedHeading","addHeadingsHandler","FiltersWrapper","FiltersContainer","headingsHierarchy","BulkAddAction","faSquareCheck","ActionsWrapper","AddHeadings","CopyAction","CancelAction","FiltersTree","SingleHeading","itemId","HeadingTag","HeadingText","Copy","InsertText","calculateIndent","getTopMargin","calculateFontSize","generateColor","HeadingsTree_templateObject","HeadingsTree_templateObject1","HeadingsTree_templateObject2","HeadingsTree_templateObject3","HeadingsTree_templateObject4","HeadingsTree_templateObject5","HeadingsTree_templateObject6","HeadingsTree_templateObject7","HeadingsTree_templateObject8","HeadingsTree_templateObject9","HeadingsTree_templateObject10","HeadingsTree_templateObject11","HeadingsTree_templateObject12","HeadingsTree_templateObject13","CompetitorHeadingsDrawerContent","setCompListCollapsed","setCheckedHeadingsWithTags","checkedHeadingsWithTags","setActiveCompetitor","updatedCompetitors","currentArticleOutline","generateHeadingOutline","getBlocksAsArray","outline","lastIndexOf","isCurrentArticleOutline","faBars","faBarsSort","competitorsList","CompetitorsList","CurrentArticleOutline","Order","NameLogoUrl","Name","Url","Logo","NameAndUrl","Headingoutlines","DrawerContent_templateObject","DrawerContent_templateObject1","DrawerContent_templateObject2","DrawerContent_templateObject3","DrawerContent_templateObject4","DrawerContent_templateObject5","DrawerContent_templateObject6","DrawerContent_templateObject7","DrawerContent_templateObject8","DrawerContent_templateObject9","DrawerContent_templateObject10","DrawerContent_templateObject11","DrawerContent_templateObject12","DrawerContent_templateObject13","CompetitorsHeadingsDrawer","isCompetitorsHeadingsDrawerOpen","closeCompetitorsHeadingsDrawer","SidebarContent","showTechnicals","setShowTechincals","TechnicalsContainer","LoadingBannerContainer","LongLoadingBanner","isFetchingTargetKw","SidebarContent_templateObject","SidebarContent_templateObject1","SidebarContent_templateObject2","SidebarContent_templateObject3","SidebarContent_templateObject4","RightSidebarV2","onResizeCallback","isHidden","topPosition","setTopPosition","sideBarRef","sidebarUpdate","handleScroll","pageYOffset","passive","_document_querySelector","Resizable","onResize","dir","elRef","enable","topRight","bottomRight","bottomLeft","topLeft","analyzingError","ErrorView","PageEditor","rootStore","loadAiWriterHistory","refetchOneClickDraftResultForArticleCreation","isExportingPageLoader","setIsPublic","setFocusTermsClassNames","setSideBarWidth","setViewers","emailAddress","resultId","triggerFreddySurvey","FREDDY_EVENT_SCA_ARTICLE_CREATED","updateFocusTermsState","sortedFocusTerms","internalLinksClusters","variations","finalData","parts","prepareFinalTerms","regex","multiWordCountRegex","mapFocusTerms","dbRef","firebase","database","snapshot","exists","catch","console","onDisconnect","cancel","setRepollsAllowed","focusedState","moveFocusToStart","afterSelectionMove","firstKey","formattedEditorState","setIsInitialEditorStateFetched","loadProject","getAllProjects","setRefechForBulkArticleCreation","getTime","loadPages","activeProjectId","initialLoadPage","setNewPage","headerStore","setComponent","spend","quotaProps","MainLoader","module","exports"],"sourceRoot":""}
')) {\n return 'h3';\n }\n if (text.startsWith('')) {\n return 'h4';\n }\n if (text.startsWith('')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (taActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (taActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo'| 'acceptAll') => {\n let prepDataArr = toJS(stagingTaSuggestions);\n if (action == 'acceptAll') {\n prepDataArr = prepDataArr?.map(item => ({...item, status: 'accepted'}));\n } else {\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n }\n setStagingTaSuggestions(prepDataArr);\n };\n\n const onDotClickHandler = (order: number) => {\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: order,\n };\n\n setShowOriginalBlockId(null);\n\n setTaActiveTerm(updatedValues);\n };\n\n const checkCurBlockStatus = () => {\n const highlightedNode = document.querySelector(`[data-block-index='${highlightedNodeId}']`);\n let elementStatus = 'default';\n let blockIndex = null;\n\n if (highlightedNode) {\n blockIndex = (highlightedNode as HTMLElement).dataset?.blockIndex;\n\n if (!blockIndex) {\n elementStatus = 'default';\n } else {\n elementStatus = stagingTaSuggestions?.find(item => item.itemIndex == blockIndex)?.status;\n }\n }\n\n if (elementStatus == 'default') {\n return <>\n \n \n onBlockStatusChange('dismiss')}>Dismiss \n ;\n }\n if (elementStatus == 'accepted') {\n return <>\n Accepted\n onBlockStatusChange('undo')} style={{color: '#fff', padding: '5px 15px'}}>Undo \n ;\n }\n if (elementStatus == 'dismissed') {\n return <>\n Dismissed\n onBlockStatusChange('undo')} style={{color: '#fff', padding: '5px 15px'}}>Undo \n ;\n }\n };\n\n const updateImageStyle = html => {\n if (html.includes('figure')) {\n // the following code is setting height and width to 100% in case of initial as this sets defaults and disturb ui\n const newHtml = html.replaceAll('initial', '100%');\n return newHtml;\n } else return html;\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n if (block.isSuggestion) {\n return (\n <>\n term.replaceAll(' ', '-'))), block.status)}>\n {showOriginalBlockId && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {showOriginalBlockId && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(updateImageStyle(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' ')), options)}\n ;\n }\n })}\n\n\n {taActiveTerm?.term ? \n {taActiveTerm?.term} \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(taActiveTerm?.term))?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return onDotClickHandler(idx)}/>;\n if (suggestion.status == 'dismissed') return onDotClickHandler(idx)}/>;\n if (suggestion.status == 'accepted') return onDotClickHandler(idx)}/>;\n })}\n \n {\n if (taActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n }}>\n 0 ? totalOccurances - 1 : 0)}\n onClick={() => {\n if (taActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n }}>\n \n {checkCurBlockStatus()}\n \n \n : null}\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsTaActive(false);\n clearAllTaData();\n setFocusTermsForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n {blocksRenderer(stagingTaSuggestions)}\n\n ;\n});\nconst ButtonsContainer = styled.div`\n display: flex;\n width: fit-content;\n`;\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: auto;\n max-width: 80px;\n margin-right: 10px;\n margin-top: auto;\n margin-bottom: auto;\n // flex-direction: row-reverse;\n`;\n\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n cursor: pointer;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Controller = styled.div`\n position: absolute;\n bottom: 80px;\n width: 900px;\n max-width: 90%;\n padding: 15px 40px;\n margin-left: -40px;\n height: auto;\n background-color: red;\n background: ${opaqueColor('#121212', 96)};\n box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.13);\n border-radius: 12px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Left = styled.div`\n font-weight: 600;\n font-size: 18px;\n color: #fff;\n`;\n\nconst Right = styled.div`\n display: flex;\n flex-wrap: wrap;\n`;\n\nconst Arrow = styled.div<{disabled: boolean}>`\n background: ${p =>!p.disabled ? 'linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%)' : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 40)} 2.81%, ${opaqueColor('#F58069', 40)} 96.58%)`};\n border-radius: 8px;\n width: 32px;\n height: 32px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 900px;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:40px;\n padding-right:40px;\n\n .termsAssistantChanges {\n text-decoration: underline;\n }\n\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n\n .termsAssistantDiffs {\n text-decoration: underline;\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faTriangleExclamation} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n getlinksForInsertion,\n linksAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < getlinksForInsertion?.length; i++) {\n if (!linksAssistantSuggestions?.find(item => item.linksIncluded?.includes(getlinksForInsertion[i]))) {\n prepArr.push(getlinksForInsertion[i]);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(getlinksForInsertion ?? []), ...(linksAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} links` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {Button, Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {faCircleCheck, faCircleX, faCircleDashed, faArrowLeft, faArrowRight} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {toJS} from 'mobx';\nimport {useEffect, useState} from 'react';\n\ninterface SingleTermProps {\n term: any;\n finalTermsList: any;\n setFinalTermsList: any;\n key: any;\n setVisible: any;\n kwUpdate: any;\n}\n\nexport const SingleTerm = observer(({term, finalTermsList, setFinalTermsList, setVisible, kwUpdate}: SingleTermProps) => {\n const [termIndex, setTermIndex] = useState(0);\n const {\n contentOptimizer: {\n currentPage: {\n getstagingLinkSuggestions,\n setStagingLinkSuggestions,\n setLinkActiveTerm,\n linkActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n useEffect(()=>{\n setTermIndex(0);\n }, [kwUpdate, linkActiveTerm]);\n\n const onTermClickHandler = curTerm => {\n const newClass = curTerm?.replaceAll(' ', '-');\n const totalOccurances = document.getElementsByClassName(newClass)?.length;\n const updatedValues = {\n class: curTerm.replaceAll(' ', '-')+`${term[0]?.itemIndex}`,\n term: curTerm,\n order: linkActiveTerm?.order < totalOccurances - 1 ? linkActiveTerm.order : 0,\n itemIndex: term[0].itemIndex,\n };\n\n setLinkActiveTerm(updatedValues);\n };\n\n const acceptLink = (e:any) => {\n e.stopPropagation();\n const newItems = [...term];\n newItems[termIndex].status = 'accepted';\n const updateTerm = finalTermsList.map((val:any)=> val.filter((value:any)=> value.itemIndex == term[termIndex].itemIndex).length > 0 ? newItems : val);\n term?.status !== 'dismissed' && setFinalTermsList([...updateTerm]);\n onBlockStatusChange('accept');\n };\n\n const dismissLink = (e:any) => {\n e.stopPropagation();\n const newItems = [...term];\n newItems[termIndex].status = term[termIndex].status == 'default'? 'dismissed' : 'default';\n const updateTerm = finalTermsList.map((val:any)=> val.filter((value:any)=> value.itemIndex == term[termIndex].itemIndex).length > 0 ? newItems : val);\n setFinalTermsList([...updateTerm]);\n onBlockStatusChange(term[termIndex]?.status == 'dismissed' ? 'dismiss' : 'undo');\n };\n\n const onArrowClickHandler = (e, direction: 'next' | 'prev') => {\n e.stopPropagation();\n const incDec = direction == 'next' ? true : false;\n const updatedValues = {\n class: term[incDec ? termIndex+1 : termIndex-1]?.suggestion[0]?.keyword?.replaceAll(' ', '-')+`${term[incDec ? termIndex+1 : termIndex-1]?.itemIndex}`,\n term: term[incDec ? termIndex+1 : termIndex-1]?.suggestion[0]?.keyword,\n order: direction == 'next' ? linkActiveTerm?.order + 1 : linkActiveTerm?.order - 1,\n itemIndex: term[incDec ? termIndex+1 : termIndex-1]?.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n direction == 'next' ? setTermIndex(termIndex+1) : setTermIndex(termIndex-1);\n };\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions(prepDataArr);\n };\n\n if (!term?.filter((item:any)=> item?.suggestion?.length > 0)) return;\n\n const cardClick = (e:any) => {\n e.preventDefault();\n setVisible(false);\n setTermIndex(0);\n onTermClickHandler(term[0]?.suggestion[0]?.keyword);\n };\n\n const scrollTerms = (e, index) => {\n e.stopPropagation();\n const updatedValues = {\n class: term[index]?.suggestion[0]?.keyword?.replaceAll(' ', '-')+`${term[index]?.itemIndex}`,\n term: term[index]?.suggestion[0]?.keyword,\n order: index < termIndex ? linkActiveTerm?.order - 1 : linkActiveTerm?.order + 1,\n itemIndex: term[index]?.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n setTermIndex(index);\n };\n\n const acceptedStatus = term?.filter((item:any) => item.status == 'accepted')?.length;\n const dismissedStatus = term?.filter((item:any) => item.status == 'dismissed')?.length;\n\n return \n {\n const value = term?.filter((isTerm:any)=> linkActiveTerm?.itemIndex == isTerm?.itemIndex)?.length;\n !( value > 0) && cardClick(e);\n }}>\n 0 ? 'green' : dismissedStatus == term?.length ? 'red' : 'lightgray'}\n icon={acceptedStatus > 0 ? faCircleCheck : dismissedStatus == term?.length ? faCircleX : faCircleDashed} fontSize={14}/>\n {acceptedStatus > 0 ?\n Accepted {acceptedStatus}: {term?.filter((item:any) => item.status == 'accepted').map((val:any)=> val.suggestion[0].keyword).join(', ')} :\n dismissedStatus == term?.length ?\n All Dismissed :\n Review {term?.filter((item:any)=> item?.status !== 'dismissed' && item?.status !== 'accepted')?.length} suggestion }\n \n {term[0]?.title}
\n {term[0].link}
\n \n {(term?.filter((isTerm:any)=> linkActiveTerm?.itemIndex == isTerm?.itemIndex)?.length > 0 && term?.filter((isVal:any)=> linkActiveTerm.term == isVal?.suggestion[0]?.keyword)?.length > 0) &&\n <>\n \n Suggestion {termIndex+1} of {term?.length}
\n {linkActiveTerm?.term}
\n \n \n \n \n \n {term?.length > 1 && \n \n {term?.map((suggestion, idx) => {\n return scrollTerms(e, idx)} color={suggestion.status == 'default' ? '#A3A4A4' : suggestion.status == 'dismissed' ? '#F44343' : '#1FAC47'} key={idx} isActive={highlightedNodeId == suggestion.itemIndex}/>;\n })}\n \n \n \n }\n \n \n }\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: white;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);\n transition: background .3s ease-in;\n // display: flex;\n\n .acceptBtn{\n background-color: rgba(42, 193, 85, 1);\n border: none;\n margin-right: 10px;\n border-radius: 8px;\n color: white;\n }\n .acceptCol{\n color: rgba(42, 193, 85, 1) !important;\n background-color: rgb(42 193 85 / 53%) !important;\n }\n .dismissCol{\n color: red !important;\n background-color: #ff000069 !important;\n }\n .dismissBtn{\n background-color: rgba(242, 242, 245, 1);\n border: none;\n margin-right: 10px;\n border-radius: 8px;\n span{\n color: black;\n }\n }\n .previous, .forward {\n border-radius: 6px;\n background-color: rgba(242, 242, 245, 1);\n height: 32px;\n width: 33px;\n margin-left: 10px;\n .svg{\n margin-left: -5px !important;\n }\n }\n .termName { \n margin: 0px;\n text-overflow: ellipsis;\n overflow: hidden;\n text-wrap: nowrap;\n font-weight: 600;\n font-size: 14px;\n }\n .termLink{\n font-size: 12px;\n color: rgba(45, 108, 202, 1);\n word-break: break-all;\n }\n .termKeyword{\n margin: 0px;\n font-weight: 500;\n text-overflow: ellipsis;\n overflow: hidden;\n text-wrap: nowrap;\n }\n .termsuggestion{\n font-size: 12px;\n color: rgba(78, 81, 86, 1);\n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n }\n`;\n\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin-left: 2%;\n margin-top: 3px;\n}\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\nconst CardTitle = styled.div`\nwidth: 100%;\n`;\n\nconst StatusTitle = styled.span`\nmargin-left: 10px;\nspan{\n color: green;\n}\n`;\n\nconst DividerLine = styled(Divider)`\nbackground-color: lightgray;\nmargin-top: 0;\nmargin-bottom: 12px;\n`;\n\nconst SuggestionCard = styled.div`\nwidth: 100%;\n.actionTerm{\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n margin-bottom: 10px;\n}\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\nimport {toJS} from 'mobx';\n\nexport const LinksList = observer(({kwUpdate, setVisible}:any) => {\n const {\n contentOptimizer: {\n currentPage: {\n getlinksForInsertion,\n setLinkActiveTerm,\n getstagingLinkSuggestions,\n setStagingLinkSuggestions,\n content,\n taLinkSuggestionLoading,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n const [filter, setFilter] = useState([]);\n\n function arrayToObject(givenValue) {\n const expectedValue = {};\n givenValue.forEach(item => {\n // Assuming 'url' is unique for each item\n if (!expectedValue[item.url]) {\n expectedValue[item.url] = {title: item.title, keywords: item.keywords};\n }\n });\n return expectedValue;\n }\n\n const loadLinksData = (linksData:any) => {\n // update staginglinksuggestion to keep a full record for save api\n const expectedData = [];\n for (const outerArray of linksData) {\n for (const innerArray of outerArray) {\n expectedData.push(innerArray.itemIndex);\n }\n }\n const data = getstagingLinkSuggestions?.map((item:any)=>{\n if (expectedData.includes(item.itemIndex)) {\n return item;\n } else {\n return {...item, status: 'default'};\n }\n });\n setStagingLinkSuggestions([...data]);\n // filter duplicate data if any\n const uniqueData = [];\n const seenSet = new Set();\n\n for (const array of linksData) {\n const stringRepresentation = JSON.stringify(array);\n if (!seenSet.has(stringRepresentation)) {\n uniqueData.push(array);\n seenSet.add(stringRepresentation);\n }\n }\n return uniqueData;\n };\n\n useEffect(() => {\n setFinalTermsList([]);\n if (getstagingLinkSuggestions?.length) {\n let suggestionList = [];\n const allLinks = arrayToObject(content?.internalLinkSuggestionsV2?.allLinks.map((link:any)=> link?.url?.endsWith('/') ? {...link} : {...link, url: `${link?.url}/`}));\n const getTerms = (term:any) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(term?.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n };\n const formattedArray = {};\n // create a format and seprate arrays based on link\n getstagingLinkSuggestions?.forEach((term:any)=>{\n if (term.isSuggestion) {\n if (!formattedArray[term?.linksIncluded[0]]) {\n formattedArray[term?.linksIncluded[0]] = [];\n }\n formattedArray[term?.linksIncluded[0]].push(term);\n }\n });\n const resultArray = Object.values(formattedArray).map((arr:any, indx)=>{\n return arr?.map((arrTwo, indexx)=>{\n suggestionList=[];\n getTerms(arrTwo);\n return {display: indx== 0 ? true: false, itemIndex: arrTwo.itemIndex, index: indexx, link: arrTwo?.linksIncluded[0], suggestion: suggestionList?.length ? suggestionList : [], title: allLinks[arrTwo?.linksIncluded[0]]?.title || '', keywords: toJS(allLinks[arrTwo?.linksIncluded[0]]?.keywords), status: arrTwo?.status};\n });\n });\n setFinalTermsList([...resultArray]);\n }\n }, [taLinkSuggestionLoading, getlinksForInsertion, kwUpdate]);\n\n useEffect(()=>{\n let filteredValue = [];\n setFilter([]);\n if (kwUpdate.status) {\n // append data from sourced record when checkbox checked in keyword\n const addData = finalTermsList.filter((item:any)=> item[0].keywords?.includes(kwUpdate.kw));\n filteredValue = [...addData.map((val:any)=> val.map((value:any)=> ({...value, status: 'default'}))), ...filter];\n const returnedData = loadLinksData([...filteredValue]);\n setFilter([...returnedData]);\n } else if (kwUpdate.status == false) {\n // remove data from listed record when checkbox checked in keyword\n const filterMatch = filter?.filter((item:any)=> !item[0]?.keywords?.includes(kwUpdate.kw));\n filteredValue = [...filterMatch];\n const returnedData = loadLinksData([...filteredValue]);\n setFilter([...returnedData]);\n } else {\n filteredValue = [...finalTermsList];\n setFilter([...filteredValue]);\n }\n // open first card whenever data filter\n if (filteredValue?.length) {\n const firstTerm = {...filteredValue[0][0]};\n const updatedValues = {\n class: firstTerm.suggestion[0]?.keyword?.replaceAll(' ', '-') + `${firstTerm.itemIndex}`,\n term: firstTerm.suggestion[0]?.keyword,\n order: 0,\n itemIndex: firstTerm.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n }\n }, [kwUpdate, finalTermsList]);\n\n\n return \n {filter?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Checkbox, Dropdown, Popover, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled, {css, keyframes} from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\nimport {LinksList} from './linksList';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPlus, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport React, {useEffect, useState} from 'react';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const LinkAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsLinkActive,\n setLinksForInsertion,\n editContent,\n stagingLinkSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n updateContentLoadedAt,\n content,\n fetchLinkSuggestions,\n getstagingLinkSuggestions,\n },\n }} = useStore('');\n const {settings: {customer: {getCustomerQuota}}} = useStore('');\n const antIcon =
'));\n }\n\n if (getstagingLinkSuggestions[i].isSuggestion) {\n if (getstagingLinkSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n Show Internal Link Suggestions for following target keywords (does not affect manually provided URLs): \n e.stopPropagation()}>\n {activeKeywordsList?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const addLink = async () => {\n if (inputValue?.length) {\n const allLink = content?.internalLinkSuggestionsV2?.allLinks?.map((item:any)=> item?.url);\n const links = stringToArray(inputValue, keywordNewLineReg, ',');\n const urlWithProtocols = links.map(value => value.startsWith('/') ? value.slice(1) : value);\n setAnyButtonClicked(true);\n await fetchLinkSuggestions([...allLink, ...urlWithProtocols.map((val:any)=> `${new URL(allLink[1]).origin}/${val}`)]);\n getCustomerQuota();\n setAnyButtonClicked(false);\n setVisible(false);\n setUpdated({});\n }\n setInputValue('');\n };\n\n\n const handleInputChange = (e: React.ChangeEvent) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n setInputValue(e?.target?.value);\n }\n };\n\n const popoverContent = (\n \n Add more links you want to get suggestions for: \n \n \n \n \n \n \n );\n\n\n const selectedLink = getstagingLinkSuggestions?.filter((item:any)=> item.status == 'accepted')?.length;\n\n return \n \n \n Links Assistant \n \n \n setVisible(false)}>Keyword: {activeKeywordsList?.filter(kw => kw.active)?.length}/{activeKeywordsList?.length} \n \n \n setVisible(true)}> \n \n \n \n \n
\n Review the suggested link placements to evaluate their fit and relevance within the context of your article.\n
\n {`To finalize and implement the changes, please click on 'Save Changes'.`}\n \n \n \n \n {selectedLink > 0 ? {`${selectedLink} suggestion${selectedLink > 1 ? 's' : ''} accepted`} : <>}\n \n onCancelClickHandler()}>\n {selectedLink > 0 ? 'Discard' : 'Cancel'}\n \n item.status !== 'default')}\n color='green'\n style={{width: '35%', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n Save changes\n {updatingTa ? \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 0px);\n width: 30%;\n // padding-bottom: 20px;\n padding-right: 5%;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n // .ant-checkbox-inner{\n // background-color: #2D6CCA !important;\n // border-color: #2D6CCA !important;\n // }\n`;\n\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\ntext-align: left;\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n padding: 11px;\n display: flex; justify-content: space-between;\n align-items: center;\n border-radius: 14px;\n button{\n width: 63% !important;\n }\n span{\n color:white\n }\n`;\n\nconst LinkSubmitBtns = styled.div`\ndisplay: flex;\nmargin-top: 15px;\n.submitLink{\n margin-left: 0px;\n background-color: #2D6CCA !important;\n color: white;\n &:hover, &:focus, &:active{\n background-color: #2D6CCA !important;\n }\n}\n.dismissLink{\n background-color: #F2F2F5 !important;\n color: black;\n &:hover, &:focus, &:active{\n background-color: #F2F2F5 !important;\n }\n}\n`;\n\n\nconst ButtonStyled = styled.p<{viewSuggestionsOption?: boolean}>`\n background-color: transparent;\n border: 1px solid transparent;\n font-size: 13px;\n cursor: pointer;\n padding: 8px 3px;\n // margin: 0 9px 0 0 !important;\n color: #1890ff;\n &:hover, &:focus {\n background-color: transparent !important;\n }\n span{\n color: #1890ff;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\n\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 337px;\n padding: 12px 20px;\n border-radius: 5px;\n margin-right: 184px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n .header{\n display: flex;\n width: 41%;\n justify-content: space-between;\n font-size: 12px;\n p{\n color: #2D6CCA\n }\n }\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: black;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #6e6e6e;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport parse from 'html-react-parser';\nimport classNames from 'classnames';\nimport {useEffect, useState} from 'react';\nimport {opaqueColor} from '@/utils/colors';\nimport {faRotateLeft} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport {LinkAssistantRightSidebar} from './linkAssistantRightsideBar';\n\nexport const TextSuggestionsLinks = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n content,\n setIsLinkActive,\n setLinksForInsertion,\n getstagingLinkSuggestions,\n linkActiveTerm,\n setLinkActiveTerm,\n setStagingLinkSuggestions,\n isLinkActive,\n highlightedNodeId,\n setHighlightedNodeId,\n showOriginalBlockId,\n setShowOriginalBlockId,\n updatingTa,\n clearAllTaData,\n },\n }} = useStore('');\n\n const [totalOccurances, setTotalOccurances] = useState(document.getElementsByClassName(linkActiveTerm?.class)?.length ?? 0);\n useEffect(() => {\n setTotalOccurances(document.getElementsByClassName(linkActiveTerm?.class || linkActiveTerm?.class)?.length);\n }, [linkActiveTerm?.class, linkActiveTerm?.class]);\n\n const onArrowClickHandler = (direction: 'next' | 'prev') => {\n setTotalOccurances(document.getElementsByClassName(linkActiveTerm.class)?.length ?? 0);\n\n const updatedValues = {\n class: linkActiveTerm.class,\n term: linkActiveTerm.term,\n order: direction == 'next' ? linkActiveTerm.order + 1 : linkActiveTerm.order - 1,\n };\n\n setShowOriginalBlockId(null);\n setLinkActiveTerm(updatedValues);\n };\n\n\n useEffect(() => {\n if (linkActiveTerm) {\n setShowOriginalBlockId(null);\n const nodesWithTerm = document.getElementsByClassName(`${linkActiveTerm.class}`);\n if (nodesWithTerm?.length) {\n const higlightedNode = nodesWithTerm[0];\n if (!higlightedNode) return;\n setHighlightedNodeId(+(higlightedNode as HTMLElement)?.dataset?.blockIndex);\n const elemOffset = (higlightedNode as HTMLElement).offsetTop;\n document.querySelector('.textContainer').scrollTop = elemOffset - ((window.innerHeight - 170) / 2);\n }\n }\n }, [linkActiveTerm?.term, linkActiveTerm?.order, linkActiveTerm?.class, linkActiveTerm]);\n\n\n const blocksRenderer = blocksArray => {\n const options = {\n replace: domNode => {\n if (!domNode.attribs) {\n return;\n }\n },\n };\n\n const typeDettector = (text: string) => {\n if (text.startsWith('')) {\n return 'p';\n }\n if (text.startsWith('
')) {\n return 'h1';\n }\n if (text.startsWith('')) {\n return 'h2';\n }\n if (text.startsWith('')) {\n return 'h3';\n }\n if (text.startsWith('')) {\n return 'h4';\n }\n if (text.startsWith('')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (linkActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (linkActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions([...prepDataArr]);\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n const parser = new DOMParser();\n const doc = parser.parseFromString(block.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n const suggestionList = [];\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n\n if (block.isSuggestion) {\n return (\n <>\n term.keyword?.replaceAll(' ', '-')+`${block?.itemIndex}`)), block.status)}>\n {showOriginalBlockId != null && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n ;\n }\n })}\n\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsLinkActive(false);\n clearAllTaData();\n setLinksForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n \n {blocksRenderer(getstagingLinkSuggestions)}\n ;\n});\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 65%;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:10%;\n padding-right:40px;\n color: rgba(0, 0, 0, 0.85);\n border-right: 1px solid lightgray;\n .linkInsertionChange {\n text-decoration: underline;\n }\n p a{\n color: rgba(0, 0, 0, 0.85);\n }\n .default p span a{\n color: #1890ff;\n }\n .accepted{\n span a{\n text-decoration: underline;\n color: #1FAC47 !important;\n text-decoration-color: #1FAC47 !important;\n\n }\n }\n .dismissed{\n span a{\n text-decoration: underline;\n color: #F44343 !important;\n text-decoration-color: #F44343 !important;\n }\n }\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n img {\n width: 100%;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styles from './content-editor.module.scss';\nimport {EditorSection} from './EditorSection/EditorSection';\n// import {FocusTermsPopups} from './FocusTermsPopups';\nimport {TopSection} from './TopSection/TopSection';\nimport styled from 'styled-components';\nimport {TextSuggestions} from '../RightSidebar/v2-sidebar/Analytics/TermsAssistant/TextSuggestions';\nimport {TextSuggestionsLinks} from '../RightSidebar/v2-sidebar/Analytics/LinkAssistant/TextSuggestionsLinks';\n\n\ninterface Props {\n // allRef: any;\n newPage: any;\n htmlToDraft: any;\n}\n\nexport const LeftSide = observer(({newPage, htmlToDraft}: Props) => {\n const {contentOptimizer} = useStore('');\n const {currentPage} = contentOptimizer;\n const {\n sideBarWidth,\n isSideBarHidden,\n isTaActive,\n isLinkActive,\n } = currentPage;\n\n return \n \n ;\n});\n\n\nconst LeftSideContainer = styled.div<{isNewPage?: boolean; isSideBarHidden?: boolean; sideBarWidth?: string; isLinkSuggestionActive?: boolean}>`\n overflow: hidden;\n text-align: -webkit-center; \n transition: all .3s ease;\n width: 100%;\n max-width: ${p => p.isLinkSuggestionActive ? '100%' : !p.isNewPage ? !p.isSideBarHidden ? `calc(100% - ${p.sideBarWidth} + 15px)` : '100%' : '100%'};\n`;\n","import {WarningOutlined} from '@ant-design/icons';\nimport React from 'react';\nimport styles from './index.module.scss';\n\nexport const Error: React.FC = () => {\n return (\n \n An error has occurred, please try again later.
\n \n );\n};\n","import {FocusTermClusteredType} from '@/store/content-optimizer/currentPage';\nimport {Table} from '@/components/common-components/components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {filterDataInMemory} from '@/utils/filter-data';\nimport styles from './style.module.scss';\nimport {formatLargeNumber} from '@/utils/number';\nimport {ColumnType} from 'antd/es/table';\n\ninterface Props {\n cluster: FocusTermClusteredType;\n isClusterRemoving: boolean;\n}\n\nexport const SingleCluster = observer(({\n cluster,\n isClusterRemoving,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n enum SORT_DIRECTION {\n ascend = 'ascend',\n descend = 'descend'\n }\n\n const [tableData, setTableData] = useState([]);\n const [sortField, setSortField] = useState('requiredCountMin');\n const [sortDirection, setSortDirecion] = useState(SORT_DIRECTION.descend);\n\n\n const removeClusterHandler = (term: string) => {\n if (currentPage.isBulkRemovingCluster) return;\n currentPage.bulkRemoveTerms([term], 'term', cluster.title);\n };\n\n const setTerms = () => {\n const {dataFiltered} = filterDataInMemory(cluster?.focusTerms, '', [], [], 1, cluster?.focusTerms.length, sortField, sortDirection);\n setTableData(dataFiltered);\n };\n\n const handleTableChange = async (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortFieldName} = column || {};\n\n setSortField(sortFieldName);\n setSortDirecion(order);\n if (order) {\n const {dataFiltered} = filterDataInMemory(tableData, '', [], [], 1, tableData.length, sortFieldName, order);\n setTableData(dataFiltered);\n } else {\n setTableData(cluster?.focusTerms);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [cluster]);\n\n type ExtendedColumnsType = ColumnType & {defaultSortOrder?: 'ascend' | 'descend'; sortFieldName?: string};\n\n const tableColumns = (removingTerms: boolean): ExtendedColumnsType[] => {\n return [\n {\n title: 'TOPICAL TERM',\n dataIndex: 'name',\n key: 'name',\n align: 'left' as 'left',\n width: 250,\n render: (_, record) => {\n return \n {record.name}\n {record?.foundIn && record.foundIn.map((item, idx) => {\n return {item} ;\n })}\n {record?.isBranded && {'branded'} }\n ;\n },\n },\n {\n title: 'MSV',\n dataIndex: 'sv',\n key: 'sv',\n align: 'right' as 'right',\n sortFieldName: 'sv',\n width: 60,\n sorter: true,\n render: (_, record) => {\n return {formatLargeNumber(record.sv)};\n },\n },\n {\n title: 'USAGE',\n dataIndex: 'requiredCountMin',\n key: 'requiredCountMin',\n defaultSortOrder: 'descend',\n align: 'right' as 'right',\n width: 60,\n sortFieldName: 'requiredCountMin',\n sorter: true,\n render: (_, record) => {\n return {`${record.usedCount}/${record.idealCountMax}`};\n },\n },\n {\n title: 'REMOVE',\n dataIndex: 'name',\n key: 'name',\n align: 'right' as 'right',\n width: 80,\n render: (_, record) => {\n return removeClusterHandler(record.name)}>\n ;\n },\n },\n\n ];\n };\n\n return \n >;\n}\n\nexport const BulkRemoveTermsModal = observer(({\n isModalOpen,\n setIsModalOpen,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n const [clusteredTerms, setClusteredTerms] = useState([]);\n const [clusterToRemove, setClusterToRemove] = useState('');\n\n const setTerms = () => {\n const clusterTerms = toJS(currentPage?.analytics?.clusters);\n const tempArr = [];\n\n setClusteredTerms(toJS(clusterTerms));\n\n if (currentPage.focusTermsSorter.key) {\n clusterTerms?.forEach((item, id) => {\n let tempCluster = [];\n\n tempCluster = item?.focusTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n\n tempArr.push({\n ...clusterTerms[id],\n focusTerms: tempCluster,\n });\n });\n\n\n setClusteredTerms(tempArr);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n const removeClusterHandler = async (e, clusterTitle: string) => {\n e.preventDefault();\n e.stopPropagation();\n const clusterToRemove = clusteredTerms?.find(cluster => cluster.title === clusterTitle);\n const termsArr = clusterToRemove?.focusTerms?.map(term => term.name);\n setClusterToRemove(clusterTitle);\n try {\n await currentPage.bulkRemoveTerms(termsArr, 'cluster', clusterTitle);\n } catch (e) {\n setClusterToRemove('');\n } finally {\n setClusterToRemove('');\n }\n };\n\n return Bulk Remove Topical Terms \n \n {clusteredTerms?.filter(cluster => cluster.focusTerms?.length > 0)?.map((cluster, idx) => {\n return \n {cluster.title} \n {`(Terms: ${cluster.focusTerms?.length}, MSV: ${formatLargeNumber(cluster.clusterSv)})`} \n }\n extra={ removeClusterHandler(e, cluster.title)}>\n }>\n \n ;\n })}\n \n setIsModalOpen(false)}>Close \n \n \n\n\n ;\n});\n\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 5px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\n\nconst ClusterHeader = styled.div`\n display: flex;\n align-items: baseline;\n`;\nconst ClusterName = styled.div`\n font-weight: 500;\n color: #121212;\n`;\nconst ClusterDesc = styled.div`\n font-size: 12px;\n color: #4E5156;\n margin-left: 5px;\n`;\n\nconst CollapseStyled = styled(Collapse)`\n // background: #fff;\n border: none;\n max-height: calc(75vh - 185px);\n overflow-y: auto;\n\n .ant-collapse-content {\n border-top: 0px solid transparent;\n background-color: #fff;\n }\n\n .ant-collapse-item {\n border-radius: 10px !important;\n margin-bottom: 10px;\n border: 1px solid #E8E8E8;\n background-color: #fff;\n }\n\n .ant-collapse-content-box {\n padding-top: 0px;\n }\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faArrowUpArrowDown, faSliders} from '@fortawesome/pro-regular-svg-icons';\nimport {faFileArrowDown, faFileLines, faFileSpreadsheet} from '@fortawesome/pro-light-svg-icons';\nimport {faPlus, faTrash} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Dropdown, Radio, Tooltip, Spin, Divider, Menu} from 'antd';\nimport {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport {Modal} from '@/components/common-components';\nimport {faGoogle} from '@fortawesome/free-brands-svg-icons';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport {BulkRemoveTermsModal} from '../BulkRemoveTermsModal/BulkRemoveTermsModal';\nimport {toJS} from 'mobx';\nimport {useStore} from '@/store/root-store';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface TopicalProps {\n onViewChange?: Dispatch>;\n onChangeIncludeBranded?: Dispatch>;\n onTermsFilter?: Dispatch>;\n includeBranded: boolean;\n currentView?: 'clusters' | 'completion';\n store: CurrentPageStore;\n onSortTerms?: () => void;\n}\n\n\nexport const TermsDropdownController = observer(({onViewChange, currentView, store, onChangeIncludeBranded, includeBranded, onTermsFilter, onSortTerms}: TopicalProps) => {\n const {Group} = Radio;\n const antIcon = \n e.stopPropagation()}>\n onViewChange(e.target.value)} style={{display: 'flex', flexDirection: 'column'}}>\n Editor settings: \n currentPage?.setHighlights(e.target.checked)}>Enable Terms Highlighting in the Editor \n Terms recommendations: \n onCheckboxClicked(e.target.checked)}>Include Branded Terms \n\n \n {isNotPublic && setShowBulkRemoveTermsModal(true)}> }\n \n ;\n\n return \n setShowExportModal(false)}>\n Export Content Brief \n Export a brief with the SEO and Content data for this article (Meta Data, Word Count, Focus Terms, questions, Link Suggestions, etc.) \n \n setShowExportModal(false)}>Close \n \n window.open(getXlsExportLink(), '_self')}>\n \n downloadFileToTxt()}>\n \n exportToGoogleDocs()} disabled={exportToDocsLoading}>\n {exportToDocsLoading ? \n \n \n \n \n \n {Object.keys(termsFiltersSetup).map((item, idx) => {\n return \n termsFilterHandler(e.target.checked, item)}>\n {getTermsCount(termsFiltersSetup[item].type)}\n \n ;\n })}\n \n \n \n \n {sorters.map((item, index) => (\n handleOnSortChange(item)} key={index}>{item.label} \n ))}\n \n }>\n \n Sort \n \n \n \n\n {store?.isRemovingFocusTerms && \n currentPage.setShowAddFocusTermModal(true)}>\n \n \n \n\n {isNotPublic && setShowExportModal(true)}>\n }\n\n \n \n \n \n \n \n \n \n ;\n});\n\n// TOPICAL TERMS STYLED COMPONENTES\nconst GearIcon = styled.a`\n height: 14px;\n cursor: pointer;\n margin-top: auto;\n margin-bottom: auto;\n display: block;\n`;\nconst GroupTermsContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n`;\n\nconst TermsContainer = styled.div`\n display: flex;\n flex-direction: column;\n background-color: transparent;\n padding: 10px 10px;\n background-color: #2D2F34;\n border-radius: 5px 5px 0 0;\n`;\n\nconst ExportBtn = styled(Button)`\n background: transparent;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: auto;\n margin-right: 0px;\n padding: 7px 10px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst AdjustBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n padding-bottom: 5px;\n cursor: default;\n`;\n\n\nconst TermsViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n padding: 12px 20px;\n border-radius: 17px;\n margin-top: 10px;\n width: 232px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n// margin-left: 3px !important;\n display: flex;\n align-items: flex-start;\n font-weight: 500 !important;\n margin-right: 8px;\n\n .ant-checkbox-inner {\n width: 14px;\n height: 14px;\n padding: 7px;\n border-radius: 4px !important;\n ::after {\n top: 47% !important;\n left: 18.5% !important;\n }\n }\n\n .ant-checkbox {\n padding-right: 0px !important;\n padding-left: 0px !important;\n }\n\n span {\n padding-right: 1px;\n padding-left: 1px;\n font-size: 13px;\n }\n`;\n\nconst PTag = styled.p`\nmargin-left: 10px;\nmargin-bottom: 0px !important;\n`;\n\nconst CheckboxStyledHighlights = styled(CheckboxStyled)`\nmargin-bottom: 4px;\n`;\n\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n margin-bottom:5px;\n`;\n\n\nconst ExportModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n\nconst ExportModalDesc = styled.div`\n color: #4E5156;\n`;\n\nconst ExportModalButtonsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst BulkRemoveTermsBtn = styled.div`\n cursor: pointer;\n margin-top: 6px;\n font-weight: 500;\n`;\nconst TermsFilterContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 103%;\n border-radius: 0px 4px 4px 0px;\n margin-left: -10px;\n padding: 0px 9px 10px 15px;\n`;\n\nconst AddButton = styled.div`\n margin-left: 6px;\n cursor: pointer;\n`;\n\nconst Sort = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n`;\n\nconst SortTxt = styled.span`\n color: var(--Text-gray-light, var(--Gray-light, #E8E8E8));\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {formatLargeNumber} from '@/utils/number';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip, Input as AntdInput} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react-lite';\nimport {ChangeEvent, useState} from 'react';\nimport styled from 'styled-components';\nimport {faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\n\ninterface Props {\n store: CurrentPageStore;\n onFilter: (query: string[]) => void;\n}\nexport const TermsDataController = observer(({\n store,\n onFilter,\n}: Props) => {\n const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n\n const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n return \n \n \n \n {store?.isAnalyzing ? : \n {toJS(store.analytics?.clusters)?.map((cluster, id) => {\n return \n \n Terms in cluster: \n {cluster.focusTerms?.length} \n \n \n Monthly Search Volume: \n {formatLargeNumber(cluster.clusterSv)} \n \n }>\n item.trim() === cluster.title).length > 0}\n onClick={() => handleOnClusterClick(cluster.title)}>{`#${cluster.title} - ${cluster.focusTerms?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n \n ;\n});\n\nconst ClusterTooltipSingleRow = styled.div`\n display: flex;\n justify-content: space-between\n`;\nconst ClusterTooltipLabel = styled.div`\n font-size: 12px;\n font-weight: 400;\n color: #E8E8E8;\n`;\n\nconst ClusterTooltipValue = styled.div`\n font-size: 12px;\n font-weight: 500;\n color: #FFFFFF;\n`;\n\nconst Wrapper = styled.div`\n margin-bottom: 15px;\n border-radius: 8px;\n background: #282B2F;\n box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.02);\n padding: 10px;\n`;\nconst SearchAndSort = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\nconst ClustersWrapper = styled.div`\n display: flex;\n`;\nconst ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n display: flex;\n flex-wrap: wrap;\n\n height: ${p => p.expandedClusters ? 'auto' : '25px'};\n overflow: hidden;\n`;\n\nconst SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n border-radius: 60px;\n padding: 3px 8px;\n width: auto;\n height: 20px;\n font-size: 11px;\n margin-right: 6px;\n margin-bottom: 6px;\n cursor: pointer;\n\n &:hover {\n background-color: #4B4D51 !important;\n }\n`;\n\nconst InputStyled = styled(AntdInput)`\n height: 32px;\n margin-bottom: 5px;\n background: #282B2F;\n border-color: transparent !important;\n .ant-input {\n margin-left: 7px;\n background: #282B2F;\n color: white !important;\n color: var(--Text-gray, var(--Gray, #A3A4A4));\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n }\n .ant-input-affix-wrapper {\n border: none !important;\n }\n &:hover{\n box-shadow: none !important;\n border-color: transparent !important;\n }\n &:focus{\n box-shadow: none !important;\n }\n`;\n","import {useState} from 'react';\nimport {faArrowDown, faCheck, faTrash} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport styles from '../../style.module.scss';\nimport {\n costPerClickFormatter,\n searchVolumeFormatter,\n isScaPublicPage,\n} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/LeftSide/EditorSection/content-editor/utils';\nimport {\n Divider,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport {NextImg} from '@/utils/nextImg';\n\nimport {getTwoGreenPercentageColor} from '@/utils/colors';\nimport classNames from 'classnames';\nimport {useTranslation} from 'next-i18next';\nimport {CurrentPageStore, FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {getDomain, getSiteName} from '@/utils/url';\nimport {isNil} from 'lodash';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport styled from 'styled-components';\nimport {faWikipediaW} from '@fortawesome/free-brands-svg-icons';\n\ninterface Props {\n focusTerm: FocusTermModel;\n i: number;\n store: CurrentPageStore;\n}\n\nexport const SingleTerm = observer(({focusTerm, i, store}: Props) => {\n const {t} = useTranslation('landing-page-optimizer');\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemoving, setIsRemoving] = useState(false);\n\n const antIcon = \n Topical term
\n {focusTerm.name}
\n \n {focusTerm.sv !== undefined && focusTerm.sv !== null && {`SV: ${searchVolumeFormatter(focusTerm.sv)}`}}\n {focusTerm.cpc !== undefined && focusTerm.cpc !== null && {`CPC: ${costPerClickFormatter(focusTerm.cpc)}`}}\n \n {focusTerm?.foundIn && focusTerm?.foundIn.length > 0 ?\n \n Used in \n {focusTerm.foundIn.map((item, i)=> {\n if (focusTerm.foundIn.length === 1) {\n return {`<${item}>`};\n } else {\n if (i === focusTerm.foundIn.length - 1) {\n return <>and {`<${item}>`};\n } else if (i === focusTerm.foundIn.length - 2) {\n return {`<${item}>`} ;\n } else {\n return {`<${item}>`}, ;\n }\n }\n })}\n :\n null}\n {'Current / Recommended # of uses'}
\n \n {store?.content?.targetKewyordsOnlyArr?.includes(focusTerm.name) ?
Target keywords do not have any usage limitations. : null}\n {focusTerm.usedCount}\n of {focusTerm.requiredCountMin}\n {`(Max: ${focusTerm.requiredCountMax || 0})`}\n \n {'Competitors using this term'}
\n \n {focusTerm?.competitors?.results?.map((competitor, index) => (\n \n {competitor.title ?? getSiteName(competitor.hostname)}
\n {competitor.url}\n \n {competitor?.snippets?.map((snippet, idx) => {\n return \n \n {/* {snippet.length > 130 ? snippet.substring(0, 130) + '...' : snippet} */}\n
\n {idx !== (competitor?.snippets?.length - 1) && }>\n \n \n // {`${index + 1}. `}{competitor.hostname}\n ))}\n\n \n {(!isNil(focusTerm?.normalizedScore) || focusTerm?.source) ? \n {focusTerm?.source ?\n {`Keyword source: `}{focusTerm?.source?.join(', ')}
: null}\n {!isNil(focusTerm?.normalizedScore) ? <>\n {`Importance score: `}{focusTerm.normalizedScore}
\n : null\n }\n {isAnyFocusTermLink() ?\n \n Entity References \n \n {focusTerm?.crunchbaseLink ?\n window.open(focusTerm?.crunchbaseLink)} style={{display: 'flex'}}>\n \n Crunchbase\n : ''}\n {focusTerm?.knowledgeGraphLink ?\n window.open(focusTerm?.knowledgeGraphLink)} style={{display: 'flex'}}>\n \n Google\n : ''}\n {focusTerm?.wikipediaLink ?\n window.open(focusTerm?.wikipediaLink)} style={{display: 'flex'}}>\n : ''}\n {focusTerm?.wikidataLink ?\n window.open(focusTerm?.wikidataLink)} style={{display: 'flex'}}>\n \n Wikidata\n : ''}\n \n : ''}\n \n \n }\n >\n\n \n \n {focusTerm.name} \n {focusTerm?.isBranded && {'branded'} }\n {focusTerm?.foundIn && focusTerm.foundIn.map((item, idx) => {\n return {item} ;\n })}\n \n \n {termContainerSetup[focusTerm.status].icon}\n {focusTerm.usedCount} / {focusTerm.requiredCountMin}\n\n \n {\n navigator.clipboard.writeText(focusTerm.name);\n setCopySuccess(true);\n }}>\n \n \n \n\n {!isScaPublicPage() ? {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n {(isRemoving && store.isRemovingFocusTerms) ? \n \n );\n});\n\nconst TermContainer = styled.div`\n margin-right: 5px;\n margin-left: 5px;\n margin-bottom: 9px;\n display: flex;\n max-width: 300px;\n cursor: default;\n\n\n .termControllsContainer {\n position: absolute;\n right: -100%;\n width: 100%;\n height: 100%;\n transition: all .3s ease;\n background: #2D2F34;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n }\n\n &:hover {\n .termControllsContainer {\n right: 0;\n }\n }\n`;\nconst Left = styled.div<{background: string; hoverBackground: string}>`\n padding: 3px 8px;\n background: ${p => p.background};\n width: 100%;\n border-radius: 36px 0 0 36px;\n display: flex;\n flex-wrap: wrap;\n max-width: 260px;\n align-items: center;\n transition: background .2s ease;\n\n &:hover {\n background: ${p => p.hoverBackground};\n }\n`;\nconst TermName = styled.div`\n font-size: 13px;\n color: #fff;\n line-height: 13px;\n`;\nconst BrandedLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n color: #4ebbab;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\nconst FoundInLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\n\nconst Right = styled.div<{border: string}>`\n padding: 5px 7px;\n border: ${p => `2px solid ${p.border}`};\n border-radius: 0 36px 36px 0;\n font-size: 13px;\n display: flex;\n align-items: center;\n line-height: 13px;\n position: relative;\n overflow: hidden;\n min-width: fit-content;\n cursor: pointer;\n \n\n\n`;\n\nconst CopyIcon = styled.div`\n`;\nconst ReferencesTitle = styled.p``;\nconst ReferencesWrapper = styled.div``;\nconst LinksWrapper = styled.div`\ndisplay: flex;\nflex-wrap: wrap;\ngap: 8px;\n`;\nconst SingleLink = styled.div`\ndisplay: flex;\npadding: 3px 6px;\njustify-content: center;\nalign-items: center;\ngap: 4px;\nborder-radius: 6px;\nborder: 1px solid #E8E8E8;\nbackground:#FFF;\ncursor: pointer;\nspan {\n color: #121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n}\n`;\nconst LowerSection = styled.div`\npadding: 10px 21px;\nbackground: #f9f9fb;\n`;\n","import {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {TermsDropdownController} from '../DropdownController/TermsDropdownController';\nimport styled from 'styled-components';\nimport {toJS} from 'mobx';\nimport {TermsDataController} from '../DropdownController/TermsDataController';\nimport {SingleTerm} from './SingleTerm';\nimport {FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {Tooltip} from 'antd';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\n\nexport const TermsDropdowns = observer(() => {\n // const [defaultActiveCluster, setDefaultActiveCluster] = useState(['1']);\n const [includedBranded, setIncludeBranded] = useState(true);\n const [query, setQuery] = useState([]);\n const [termsToShow, setTermsToShow] = useState(['include-more', 'included', 'include-less']);\n const [isCopied, setIsCopied] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const [standardTerms, setStandardTerms] = useState([]);\n\n const setTerms = (queryParam?: string[]) => {\n if (queryParam?.length) {\n setQuery(queryParam);\n } else {\n setQuery([]);\n }\n\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (queryParam?.length) {\n for (let i = 0; i < queryParam.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(queryParam[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n if (currentPage.focusTermsSorter.key === 'leastCount') {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (a.usedCount < b.usedCount) return -1;\n });\n } else {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n }\n\n\n filteredTerms = filteredTerms?.filter(term => termsToShow.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n const filterTermsHandler = (termsToShowParam: string[]) => {\n setTermsToShow(termsToShowParam);\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (query?.length) {\n for (let i = 0; i < query.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(query[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n\n filteredTerms = filteredTerms?.filter(term => termsToShowParam.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n return <>\n \n \n \n \n {standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n }).map((term, idx) => {\n return ;\n })}\n \n {\n if (!visible) {\n setTimeout(() => setIsCopied(false), 300);\n }\n }}>\n {\n if (standardTerms?.length) {\n navigator.clipboard.writeText(standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n })?.map(i => i?.name).join(', '));\n }\n setIsCopied(true);\n }}\n > \n ;\n});\n\nconst TopicalTermsContainer = styled.div`\nbackground-color: #2D2F34;\n \n`;\n\nconst TermsContainer = styled.div<{focusMode?: boolean}>`\n padding-right: 15px;\n padding-bottom: 16px;\n border-radius: 0 0 8px 8px;\n display: flex;\n flex-wrap: wrap;\n max-height: ${p => !p.focusMode ? '476px' : 'calc(100vh - 440px)'};\n overflow-y: auto;\n \n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst CopyButton = styled.button`\n background-color: transparent;\n border: 0px;\n cursor: pointer;\n margin: 6px;\n color: rgb(52, 174, 243);\n`;\n\n","import {observer} from 'mobx-react-lite';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {TermsDropdowns} from './TermsDropdowns';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const FocusTermsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n return currentPage?.analytics?.includedTerms?.length || currentPage?.analytics?.includeMoreTerms?.length || currentPage?.analytics?.includeLessTerms?.length ? (\n \n {/* ;\n});\n\nconst EmptyDataBox = styled.div`\n background: #2d2f34;\n border-radius: 5px;\n box-shadow: 0 4px 21px rgba(0, 0, 0, 0.02);\n display: flex;\n padding: 12px 15px;\n\n .emptyImg {\n display: flex;\n justify-content: center;\n }\n\n .emptyDataTitle {\n color: #a3a4a4;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n margin-left: 17px;\n }\n`;\n\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button} from '@/components/common-components/v2/Button';\n\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faDownLeftAndUpRightToCenter, faFileDownload, faUpRightAndDownLeftFromCenter} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react';\nimport {faCheck, faSyncAlt} from '@fortawesome/pro-regular-svg-icons';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface Props {\n currentView?: 'links' | 'terms';\n store: CurrentPageStore;\n}\n\n\nexport const LinkSuggestionsDropdownController = observer(({currentView, store}: Props) => {\n const [isSynced, setIsSynced] = useState(false);\n const [isSyncing, setIsSyncing] = useState(false);\n const isNotPublic = !isScaPublicPage();\n\n const onLinksSync = async () => {\n try {\n setIsSyncing(true);\n // await store?.getInternalLinkSuggestions(store?.content?.uuid, true);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setIsSynced(true);\n setTimeout(() => {\n setIsSynced(false);\n }, 3000);\n } catch (e) {\n setIsSyncing(false);\n } finally {\n setIsSyncing(false);\n }\n };\n\n const getXlsExportLink = () => {\n const token = getTokenFromCookies();\n if (store?.content?.uuid) {\n const baseUrl = getApiUrl(BaseApi.CA_ENDPOINT, `/api/pages/${store?.content?.uuid}/export-data-to-xls/`);\n const savedKeywordsUrl=`${baseUrl}?&jwt=${token}`;\n return savedKeywordsUrl;\n }\n };\n\n\n return \n \n store.setFocusTermsExpanded(!store.focusTermsExpanded)}>\n {store?.focusTermsExpanded ? 'Default Mode' : 'Focus Mode'} \n \n \n\n {/* \n {currentView === 'links' ? 'Internal' : 'External links'} \n \n\n {currentView === 'links' ? \n Keywords \n : null} */}\n\n {isNotPublic && (currentView === 'links' ? \n : null)}\n\n\n onLinksSync()}>\n \n \n\n ;\n});\n\nconst Container = styled.div<{current: string}>`\n display: flex;\n align-items: center;\n padding: 10px 15px;\n justify-content: ${p => p.current === 'links' ? 'space-between' : 'flex-start'};\n`;\n\n\nconst FocusModeBtn = styled(Button)`\n background: transparent;\n padding: 4px 0px;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: 0px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst FocusModeLabel = styled.span`\n color: #E8E8E8;\n font-size: 12px;\n margin-bottom: -2px;\n`;\n\nconst ExportIcon = styled.a`\n display: flex;\n align-items: center;\n cursor: pointer;\n background: transparent;\n font-size: 12px !important; \n margin-left: auto;\n margin-right: 0px;\n color: #fff;\n padding: 7px 20px;\n height: 28px !important;\n\n &:focus,\n &:hover {\n background: transparent;\n color: #fff;\n }\n`;\n\n\nconst RefetrchBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n margin-right: 0px;\n`;\n","import {InternalLinkType} from '@/store/content-optimizer/CurrentPageModel';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip} from 'antd';\nimport styled from 'styled-components';\nimport {\n faCheck,\n faStar,\n} from '@fortawesome/pro-regular-svg-icons';\nimport {faStar as faStarSolid} from '@fortawesome/pro-solid-svg-icons';\nimport {useEffect, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n link: InternalLinkType;\n customCallback?: () => void;\n}\nexport const SingleSuggestion = observer(({link, customCallback}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemovingTerm, setIsRemovingTerm] = useState(false);\n const [isBookmarked, setIsBookmarked] = useState(link?.isBookmarked);\n const {contentOptimizer: {currentPage: {removeInternalLinkSuggestion, bookmarkInternalLinkSuggestion, content: {uuid}}}} = useStore('');\n\n const antdIcon = \n \n \n \n \n \n \n {link?.title ? link.title : ''}\n \n {isBookmarked ? : null}\n \n\n \n {link?.path}\n \n \n \n \n \n {\n setIsBookmarked(!isBookmarked);\n await bookmarkInternalLinkSuggestion(uuid, link?.url);\n if (typeof customCallback == 'function') customCallback();\n }}>\n \n \n \n \n \n \n \n {\n setIsRemovingTerm(true);\n await removeInternalLinkSuggestion(uuid, link?.url, link?.keywords);\n if (typeof customCallback == 'function') customCallback();\n setIsRemovingTerm(false);\n }}>\n {isRemovingTerm ? : \n \n \n\n ;\n});\n\nconst SingleLinkContainer = styled.div`\n margin-bottom: 12px;\n display: flex;\n justify-content: space-between;\n position: relative;\n\n .actionsMenu {\n display: none;\n font-size: 12px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n cursor: pointer !important;\n position: absolute;\n background: linear-gradient(90deg, #2d2f342b -10.83%, #2d2f34 39.77%);\n padding-left: 30px;\n right: 0;\n }\n\n &:hover {\n .actionsMenu {\n display: flex;\n }\n }\n\n .copyTooltip {\n :global(.ant-tooltip-content) {\n background-color: $color-gray-dark;\n border-radius: 10px !important;\n }\n \n :global(.ant-tooltip-arrow) {\n display: none !important;\n }\n \n :global(.ant-tooltip-inner) {\n border-radius: 10px !important;\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n }\n`;\nconst Right = styled.div`\n width: 90%;\n margin-right: auto;\n`;\nconst Left = styled.div`\n display: flex;\n width: 10%;\n`;\nconst TitleAndStar = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n`;\nconst Title = styled.div`\n cursor: pointer;\n color: #e8e8e8 !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 90%;\n`;\nconst Link = styled.a`\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n color: #34AEF3;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\n\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {SingleSuggestion} from './SingleISugesstion';\nimport styles from '../CommonCitations/style.module.scss';\n\ninterface Props {\n data: any[];\n store?: CurrentPageStore;\n isQueried?: boolean;\n customCallback?: () => void;\n}\n\n\nexport const InternalLinksSuggestions = observer(({data, store, isQueried, customCallback}: Props) => {\n return <>\n \n {data?.length ?\n data?.map((suggestion, id) => (\n \n )) : isQueried ?\n \n No Internal Link Suggestions found that match your search.\n :\n store?.content?.targetKeywords?.length === 0 ?\n \n Please add Target Keywords to get Internal Link Suggestions.\n : \n No Internal Link Suggestions found for these Target Keywords.\n }\n \n\n ;\n});\n\n\nconst DropdownsContainer = styled.div`\n background-color: #2D2F34;\n max-height: 340px;\n overflow-y: auto;\n padding-right: 15px;\n padding-left: 15px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n","\nimport {CommonCitationsType} from '@/store/content-optimizer/CurrentPageModel';\nimport {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n citation: CommonCitationsType;\n}\n\nexport const SingleCitation = observer(({citation}: Props) => {\n const addDefaultSrc = e => {\n e.target.src = '/img/world-wide-web.svg';\n };\n\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)} src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc.length > 90 ?\n \n {citation?.metaDesc.substring(0, 90) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by: \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp.metaDesc.length > 70 ? serp.metaDesc.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 7 && (\n {`+${citation?.serps?.length - 7}`}\n )}\n \n : null}\n\n \n ;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SingleCitation} from './SingleCitation/SingleCitation';\nimport styles from './style.module.scss';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n store: CurrentPageStore;\n}\nexport const CommonCitations = observer(({store}: Props) => {\n return <>\n {store?.analytics?.commonCitations?.length ? \n \n {store?.analytics?.commonCitations.map(citation => {\n return (citation.url || citation.metaDesc) && ;\n })}\n \n :\n !store?.content?.targetKeywords?.length ? \n Please add Target Keywords to get Common Citations.\n : \n No Common Citations found for these Target Keywords.\n }\n ;\n});\n","import {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\n\nexport const SidebarTooltip = observer(props => {\n return \n {props.children}\n ;\n});\n","import {observer} from 'mobx-react';\nimport {ChangeEvent, Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled, {css, keyframes} from 'styled-components';\nimport {Tooltip, Form, Dropdown, Radio} from 'antd';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport Text from 'antd/lib/typography/Text';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {Button as CommonBtn, CommonInput} from '@/components/common-components/components';\nimport {Loader} from '../../../Utils/loader';\nimport {addProtocolToDomain, sanitizeUrl} from '@/utils/url';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPen, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {Button} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {Input} from '@/components/common-components/v2';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\n// import {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\n// import { toJS } from 'mobx';\n// import { LoadingOutlined } from '@ant-design/icons';\n\ninterface Props {\n store: CurrentPageStore;\n currentView?: 'links' | 'terms';\n onViewChange?: Dispatch>;\n visibleKeywords?: any[];\n updateKeywords?: (kwArray) => void;\n onFilter: (query: string[]) => void;\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const SuggestionsDataController = observer(({\n store,\n currentView,\n onViewChange,\n visibleKeywords,\n updateKeywords,\n onFilter,\n viewSuggestionsOption,\n linksDropDownFromSuggestion,\n}: Props) => {\n const [showEditor, setShowEditor] = useState(false);\n const [isCloseClicked, setIsCloseClicked] = useState(false);\n const [form] = Form.useForm();\n const [inputValue, setInputValue] = useState(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n const [submitDisabled, setSubmitDisabled] = useState(true);\n const isNotPublic = !isScaPublicPage();\n\n // const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n const {Group} = Radio;\n useEffect(() => {\n onViewChange(linksDropDownFromSuggestion);\n }, [linksDropDownFromSuggestion]);\n\n\n // const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n const hostnameEditor = \n {\n if (!isCloseClicked) {\n try {\n await store?.updateHostname(inputValue);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setShowEditor(false);\n } catch (e) {\n return Promise.reject(e);\n }\n }\n }}\n initialValues={{\n urlInput: inputValue,\n }}>\n {'Page URL'} \n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n {\n setInputValue(e.target.value);\n if (!e.target.value) {\n setSubmitDisabled(true);\n } else {\n setSubmitDisabled(false);\n }\n }\n }\n placeholder={t('enter-url')} />\n\n \n \n {\n e.preventDefault();\n setInputValue(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n setShowEditor(false);\n }}\n disabled={store?.isUpdatingHostname}\n >\n {store?.isUpdatingHostname ? : t('cancel')}\n \n setIsCloseClicked(false)}\n >\n {store?.isUpdatingHostname ? : 'Update'}\n \n \n\n \n ;\n\n const topMessage = \n {hostnameEditor}\n {isNotPublic && (store?.content?.importedFromUrl || store?.content?.hostname ? <>\n \n Suggestions shown for \n \n {sanitizeUrl(store?.content?.hostname ?? store?.content?.importedFromUrl)}\n \n \n \n setShowEditor(!showEditor)} style={{marginLeft: 'auto'}}>\n \n : <>\n To get Link Suggestions setShowEditor(!showEditor)}>specify a Page URL \n )}\n ;\n\n const viewChangeDropdown = \n e.stopPropagation()}>\n onViewChange(e.target.value)}>\n Internal Link Suggestions \n External Link Suggestions \n \n \n ;\n\n const keywordsDropdown = \n Show Internal Link Suggestions for following target keywords: \n e.stopPropagation()}>\n {visibleKeywords?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const viewControlls = \n \n \n {currentView === 'links' ? 'Internal Links' : 'External links'} \n \n \n\n {currentView === 'links' ? \n Keywords {visibleKeywords?.filter(kw => kw.active)?.length} / {visibleKeywords?.length} \n : null}\n\n ;\n\n const SearchAndSort = \n \n termSearchHandler(e)}/>\n \n {/* \n {store?.isAnalyzing ? : \n {toJS(store.content?.internalLinkSuggestions)?.map((cluster, id) => {\n return \n \n Link Suggestions in cluster: \n {cluster.results?.length} \n \n }>\n item.trim() === cluster.keyword).length > 0}\n onClick={() => handleOnClusterClick(cluster.keyword)}>{`#${cluster.keyword} - ${cluster.results?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n */}\n ;\n\n return \n {topMessage}\n {viewControlls}\n {SearchAndSort}\n ;\n});\n\nconst Wrapper = styled.div`\n margin-bottom: 10px;\n`;\n\nconst EditorContainer = styled.div<{show: boolean}>`\n display: ${p => p.show ? 'block' : 'none'};\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n border-radius: 5px;\n position: absolute;\n top: 20px;\n right: 0;\n padding: 15px 10px;\n width: 300px;\n z-index: 1;\n `;\nconst FormStyled = styled(Form)`\n .ant-form-item {\n margin-bottom: 10px;\n }\n\n .ant-form-item-explain.ant-form-item-explain-error {\n div {\n color: #ff4d4f;\n }\n }\n `;\n\nconst HostnameContainer = styled.div`\n position: relative;\n display: flex;\n font-size: 12px;\n margin-bottom: 10px;\n`;\nconst HostnameLink = styled.a`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 150px);\n margin-left: 5px;\n color: #34AEF3;\n`;\nconst HostnameLinkBtnContainer = styled.div`\n width: 14px;\n height: 14px;\n margin-left: 10px;\n cursor: pointer;\n`;\n\nconst ViewControllsContainer = styled.div`\n display: flex;\n`;\nconst AddNewUrlBtn = styled.div`\n font-size: 12px;\n margin-left: 5px;\n color: #40a9ff !important;\n text-decoration: underline;\n cursor: pointer;\n`;\nconst InputStyeld = styled(CommonInput)`\n `;\nconst ButtonContainer = styled(Form.Item)`\n .ant-form-item-control-input-content {\n display: flex;\n justify-content:flex-end;\n }\n `;\n\nconst CancelButton = styled(CommonBtn)`\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n padding: 5px 15px;\n\n span {\n color: #4E5156 !important;\n }\n\n &:hover, &.active, &.focus {\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n }\n `;\nconst UpdateButton = styled(CommonBtn)`\n padding: 5px 15px;\n margin-left: 10px;\n `;\nconst ViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 255px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\nconst RadioStyled = styled(Radio)`\n .ant-radio-checked .ant-radio-inner {\n background-color: #7f4ead !important;\n border-color: #7f4ead !important;\n\n &::after {\n background-color: #fff !important;\n }\n }\n`;\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst ButtonStyled = styled(Button)<{viewSuggestionsOption?: boolean}>`\n background-color: #323539;\n border: 1px solid transparent;;\n font-size: 13px;\n padding: 8px 14px;\n margin: 0 9px 0 0 !important;\n\n &:hover, &:focus {\n background-color: transparent !important;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 230px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\n\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\n// const ClusterTooltipSingleRow = styled.div`\n// display: flex;\n// justify-content: space-between\n// `;\n// const ClusterTooltipLabel = styled.div`\n// font-size: 12px;\n// font-weight: 400;\n// color: #E8E8E8;\n// `;\n\n// const ClusterTooltipValue = styled.div`\n// font-size: 12px;\n// font-weight: 500;\n// color: #FFFFFF;\n// `;\n\nconst SearchAndSortWraper= styled.div `\n margin-top: 10px;\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\n\n// const ClustersWrapper = styled.div`\n// display: flex;\n// `;\n// const ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n// display: flex;\n// flex-wrap: wrap;\n\n// height: ${p => p.expandedClusters ? 'auto' : '25px'};\n// overflow: hidden;\n// `;\n\n// const SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n// background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n// border-radius: 60px;\n// padding: 3px 8px;\n// width: auto;\n// height: 20px;\n// font-size: 11px;\n// margin-right: 6px;\n// margin-bottom: 6px;\n// cursor: pointer;\n\n// &:hover {\n// background-color: #4B4D51 !important;\n// }\n// `;\n\nconst InputStyled = styled(Input)`\n height: 32px;\n`;\n","import {observer} from 'mobx-react';\nimport React, {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {LinkSuggestionsDropdownController} from '../DropdownController/LinkSuggestionsDropdownController';\nimport {InternalLinksSuggestions} from './InternalLinkSuggestions/InternalLinkSuggestions';\nimport {CommonCitations} from './CommonCitations/CommonCitations';\nimport {useStore} from '@/store/root-store';\nimport {SuggestionsDataController} from '../DropdownController/SuggestionsDataController';\nimport {toJS} from 'mobx';\nimport {Button, Input, Popover, Radio, Spin, Tooltip, Form} from 'antd';\nimport {exportLinkIcon} from '@/utils/icons';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import { SmallBadge } from '@/components/common-components/components/badge';\nimport {Pill} from '@/components/layoutV2/user-menu/styles';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\nimport {notification} from '@/utils/notification-v2';\nimport {apiError} from '@/utils/api';\n\ninterface LinkSuggestionTabPRops {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const LinkSuggestionsTab = observer(({viewSuggestionsOption, linksDropDownFromSuggestion}: LinkSuggestionTabPRops) => {\n const [currentView, setCurrentView] = useState<'links' | 'terms'>('links');\n const [activeKeywordsList, setActiveKeywordsList] = useState([]);\n const [searchQuery, setSearchQuery] = useState([]);\n const [dataArr, setDataArr] = useState([]);\n const [initialDataArr, setInitialDataArr] = useState([]);\n const [isQueried, setIsQueried] = useState(false);\n const [anyButtonClicked, setAnyButtonClicked] = useState(false);\n const antIcon = ) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n if (e.target.value.length) setUrlsError('');\n setInputValue(e?.target?.value);\n }\n };\n\n const addDomainPopoverContent = () => {\n return \n To continue, provide a source of Internal links \n \n \n \n \n \n \n \n Add a domain \n We’ll scan the domain and provide inlinks recommendations \n {selectedOption === 'domain' &&\n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n setDomain(e.target.value)}\n />\n \n }\n \n \n \n \n \n \n \n \n Provide URLs \n Write or paste a list of URLs and we’ll find the best fit for them \n {selectedOption === 'urls' &&\n <>\n \n {urlsError&& {urlsError} }\n \n }\n \n \n \n \n ;\n };\n\n const popoverInnerStyle = {\n width: '500px',\n borderRadius: '10px',\n border: '1px solid #D9D9D9',\n background: 'var(--White, #FFF)',\n boxShadow: '0px 1px 20px 0px rgba(0, 0, 0, 0.19)',\n };\n\n\n return <>\n {\n onDataFilter(kwArr);\n }}\n visibleKeywords={activeKeywordsList}\n onFilter={setLinks}\n viewSuggestionsOption={viewSuggestionsOption}\n />\n \n \n \n \n \n Internal links help search engines understand how your content interrelates.\n \n \n {`Links in of the page: ${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.filter(link => link.isUsed).length ?? 0}/${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.length ?? 0}`}\n \n }>\n \n\n {getMsg(calculateUsagePercentage(toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks))}\n \n \n Add links to content easily with AI
\n {dataArr?.length && (currentView == 'links' || currentView == 'terms') ? {\n (dataArr?.length && (currentView == 'links' || currentView == 'terms')) && postLInkSuggestion(currentView);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
:\n \n \n Launching AI Links Assistant.\n Do not modify your article before this tool is fully loaded\n : ''}>\n {\n setIsVisiblePopover(true);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
\n \n }\n \n {currentView === 'links' ? a.isBookmarked > b.isBookmarked ? -1 : 1)} store={currentPage}/> : }\n \n ;\n});\n\nconst Wrapper = styled.div`\n background-color: #2d2f34;\n border-radius: 5px;\n padding: 0 0 13px 0;\n`;\nconst SuggestionsBannerContainer = styled.div<{percent?: number}>`\n background-color: ${p => p.percent < 75 ? '#F1AA3E1C' : '#1FAC471C'};\n border-radius: 5px;\n padding: 9px 10px;\n font-size: 12px;\n margin: 10px 6px;\n\n .infoBannerIcon {\n width: 15px;\n color: ${p => p.percent < 75 ? '#F1AA3E' : '#1FAC47'};\n margin-right: 5px;\n }\n`;\n\nconst TooltipTitle = styled.div`\n`;\nconst TooltipDescription = styled.div`\n font-size: 12px;\n color: #a3a4a4;\n`;\n\nconst LinksWrapper = styled.div<{anyButtonClicked?: boolean}>`\n\nbackground-image: linear-gradient(to left, rgb(52 174 243 / 9%), rgba(52, 174, 243, 0.42));\ndisplay: flex;\n// justify-content: space-between;\nheight: 35px;\nalign-items: center;\nmargin: 0 7px 20px 7px;\npadding: 0 15px;\nborder-radius: 5px;\np{ \n margin-bottom: 0;\n font-size: 12px;\n &:last-child{\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 30%;\n margin-left: 10px;\n color: #34AEF3;\n cursor: ${props => props.anyButtonClicked ? 'not-allowed' : 'pointer'};\n text-decoration: underline;\n }\n}\n`;\n\nconst StyledPopover = styled(Popover)`\n .ant-popover-inner-content {\n padding: 0px !important;\n }\n`;\n\nconst PopoverContentWrapper = styled.div`\n margin: 6px 4px;\n`;\n\nconst PopoverTitle = styled.p`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin-bottom: 15px !important;\n`;\n\nconst AddDomainSection = styled.div`\n display: flex; \n width: 460px;\n min-height: 50px;\n flex-shrink: 0;\n border-radius: 12px 12px 0px 0px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n padding: 12px 16px;\n`;\n\nconst ProvideUrlsSection = styled.div`\n display: flex;\n width: 460px;\n min-height: 58px;\n flex-shrink: 0;\n border-radius: 0px 0px 12px 12px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n margin-bottom: 15px;\n padding: 12px 16px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n`;\n\nconst AddDomainTitle = styled.div`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 2px;\n`;\n\nconst AddDomainDesc = styled.div`\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 10px;\n`;\n\nconst AddDomainInput = styled(Input)`\n width: 400px;\n height: 32px;\n flex-shrink: 0;\n border-radius: 6px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--White, #FFF);\n`;\n\nconst DomainDetails = styled.div`\n .ant-form-item {\n margin-bottom: 0px !important;\n } \n\n`;\n\nconst ProvideUrlsDetails = styled.div`\n \n`;\n\nconst Dismiss = styled.button`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Body-background, #F2F2F5);\n border: none;\n cursor: pointer;\n`;\n\nconst Update = styled(Button)`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Blue, #2D6CCA);\n color: white;\n min-width: 120px;\n &:hover {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n &:focus {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n`;\n\nconst ErrorMessageForURL = styled.span`\n color: #ff4d4f;\n font-size: 14px;\n line-height: 1.5715;\n`;\n","import {useCallback, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {\n Divider,\n Row,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faFilePlus, faMessageCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useTranslation} from 'next-i18next';\nimport {QuestionModel} from '@/store/content-optimizer/CurrentPageModel';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {debounce, isNil} from 'lodash';\nimport {insertText} from '@/utils/editor-scripts';\nimport {EditorState} from 'draft-js';\n\ninterface Props {\n question: QuestionModel;\n i: number | string;\n}\n\n\nexport const SingleQuestion = observer(({question, i}: Props) => {\n const {contentOptimizer: {\n contentFragment,\n },\n } = useStore('');\n const {contentOptimizer: {currentPage, aiOutline}} = useStore('');\n const [copySuccess, setCopySuccess] = useState(false);\n const [aiCopied, setAiCopied] = useState(false);\n const [creatingPage, setCreatingPage] = useState(false);\n const [isAiGenerating, setIsAiGenerating] = useState(false);\n const {t} = useTranslation('common');\n\n const antIcon = \n {t('question')}
\n {question.keyword ? question.keyword : null}
\n \n {question?.sv !== undefined && question?.sv !== null && {`SV: ${searchVolumeFormatter(question.sv)}`}}\n {question?.cpc !== undefined && question?.cpc !== null && {`CPC: ${costPerClickFormatter(question.cpc)}`}}\n \n {t('number-of-uses')}
\n \n {question?.usedCount ?? ''}\n
\n \n }\n >\n \n \n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n }}>\n \n {question?.keyword ?? ''}\n
\n ;\n});\n","\nimport {Typography, Spin, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleQuestion} from './SingleQuestion';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport {copyToClipboardWithHtmlAndText} from '@/utils/clipboard';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const QuestionsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {t} = useTranslation('common');\n\n const {Title} = Typography;\n const antIcon = \n Questions {currentPage?.isAnalyzing ? <Spin indicator={antIcon} style={{marginRight: '20px'}}/> :\n currentPage?.analytics?.questions?.length ? <span className={styles.totalQuestions}>{`${currentPage?.analytics?.questions?.filter(question => question?.usedCount > 0)?.length}/${currentPage?.analytics?.questions?.length}`}</span> : null}\n <Tooltip\n title={copySuccess ? <span><FontAwesomeIcon icon={faCheck} style={{color: '#2AC155'}}/>{` Copied to clipboard`}</span> : t('copy-to-clipboard')}\n placement='top'\n overlayClassName={styles.copyTooltip}\n onVisibleChange={visible => {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n <div style={{cursor: 'pointer', color: '#34AEF3', marginLeft: 'auto'}}\n onClick={() => {\n let htmlString = '<p></p>';\n let string = '';\n currentPage?.analytics?.questions?.map(question => {\n htmlString += (`<p>${question.keyword}?</p>`);\n string += (`${question.keyword}?`);\n });\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlString, 'text/html');\n const copiedText = doc.body.textContent;\n navigator.clipboard.writeText(copiedText);\n\n // Example usage:\n const htmlContent = htmlString;\n const plainTextContent = string;\n\n copyToClipboardWithHtmlAndText(htmlContent, plainTextContent);\n setCopySuccess(true);\n }}>\n <FontAwesomeIcon icon={faCopy} style={{marginRight: 5}}/> Copy all\n </div>\n </Tooltip>\n \n {currentPage?.analytics?.questions?.length ? \n \n {currentPage?.analytics?.questions?.map((question, i) => {\n return ;\n })}\n \n :\n \n {/* ('');\n const {contentOptimizer: {currentPage: {addFocusTerms, isFocusTermsLoading}}} = useStore('');\n\n const onClose = () => {\n setShowAddFocusTermModal(false);\n setTerms('');\n };\n\n const handleTerms = (e: React.ChangeEvent) =>{\n const value = e.target.value;\n setTerms(value.replaceAll(',', '\\n'));\n };\n\n const handleAddFocusTerms = async () => {\n try {\n await addFocusTerms({terms: stringToArray(terms, keywordNewLineReg, ',' )});\n onClose();\n notification.success('', 'Focus terms added successfully');\n } catch (error) {\n const errorMessage = apiError(error) as string;\n notification.error('', errorMessage || 'Something went wrong please try again');\n }\n };\n\n return (\n \n Add focus terms \n Provide your own terms and get usage recommendations to elevate your writing. \n \n \n \n );\n});\n\nexport default AddFocusTermModal;\n\nconst StyledModal = styled(Modal)`\n .ant-modal-content{\n border-radius: 12px;\n background: var(--White, #FFF);\n }\n`;\n\nconst Title = styled.div`\n color: var(--Text-black, var(--Black, #121212));\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`;\n\nconst Desc = styled.div`\n width: 370px;\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 4px;\n`;\n\nconst TextArea = styled.div`\n margin-top: 22px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 24px;\n\n .cancel-btn {\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n background-color: transparent;\n border: none;\n cursor: pointer;\n }\n\n .add-btn {\n display: flex;\n width: 115px;\n height: 44px;\n /* padding: 13px 60px 14px 30px; */\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 6px;\n background: var(--Green, #2AC155);\n color: white;\n color: var(--White, var(--White, #FFF));\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n }\n .ant-btn[disabled] {\n background: #f5f5f5 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n }\n`;\n","import {useEffect, useState} from 'react';\nimport {\n Tabs as CommonTabs,\n TabPane as CommonTabPane,\n} from '@/components/common-components/components';\nimport {\n Spin,\n} from 'antd';\nimport {\n LoadingOutlined,\n} from '@ant-design/icons';\nimport styles from './style.module.scss';\nimport {useTranslation} from 'next-i18next';\n// import {VideoPopOver} from '@/components/common-components/components/popover';\nimport {FocusTermsTab} from './FocusTermsTab/FocusTermsTab';\nimport {observer} from 'mobx-react';\nimport {LinkSuggestionsTab} from './LinkSuggestionsTab/LinkSuggestionsTab';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {QuestionsTab} from './QuestionsTab/QuestionsTab';\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_FOCUS_TERMS_TAB_OPEN, SCA_PAGE_QUESTIONS_TAB_OPEN, SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN} from '@/constants/events';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\nimport AddFocusTermModal from './DropdownController/AddFocusTermModal';\n\ninterface FocusTermsTabsProps {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\nconst secondAntIcon = onChangeTab(key)}\n >\n \n \n \n {t('topical-terms')}\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedTerms}\n /{currentPage?.analytics?.focusTerms?.length}\n )\n }\n \n \n \n }\n key='1'\n style={{'outline': 'none'}}>\n \n \n \n Questions\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedQuestions}\n /{currentPage?.analytics?.questions?.length}\n )\n }\n \n \n \n }\n key='2'\n style={{'outline': 'none'}}>\n {isNotPublic && \n \n \n Link Suggestions\n \n \n {currentPage?.isFetchingIntLinksSug ?\n () :\n (\n {currentPage?.content?.totalUsedSuggestions}\n /{currentPage?.content?.internalLinkSuggestionsV2?.allLinks?.length}\n )\n }\n \n \n \n }\n key='3'\n style={{'outline': 'none'}}>\n \n \n \n \n );\n});\n\nconst CommonTabsStyled = styled(CommonTabs)`\n .rc-tabs-extra-content {\n background-color: transparent !important;\n border: 1px solid $color-gray-dark-medium;\n border-radius: 5px;\n cursor: pointer;\n font-size: $font-size-12;\n height: 25px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n padding: 0 5px;\n transition: all 0.2s ease-in;\n }\n\n .focusTermsTabTitleValue {\n color: $color-gray-light;\n display: block;\n font-size: $font-size-12;\n font-weight: 400;\n margin-left: 5px;\n\n .ant-spin-spinning {\n height: 10px;\n }\n\n .customSpinner {\n font-size: 12px !important;\n }\n }\n\n .rc-tabs-content-holder {\n background-color: transparent !important;\n padding-top: 15px;\n }\n\n .rc-tabs-nav {\n border-bottom: 1px solid #4E5156;\n }\n .rc-tabs-nav-list {\n justify-content: space-between;\n }\n .rc-tabs-nav-operations {\n display: none !important;\n }\n\n .rc-tabs-tab {\n margin-left: 20px !important;\n\n &:first-child {\n margin-left: 0px !important;\n }\n }\n\n @media screen and (max-width: 1400px) {\n .rc-tabs-tab {\n margin-left: 0px !important;\n margin-right: 15px !important;\n }\n \n }\n\n .rc-tabs-tab-btn {\n padding: 5px 0 !important;\n }\n\n .rc-tabs-ink-bar {\n background-color: #F1AA3E !important;\n border-radius: 2px;\n }\n`;\n\nconst TabsStyled = styled(CommonTabPane)<{expanded: boolean; editorScrolled: boolean}>`\n \n .ant-collapse {\n overflow-y: ${p => p.expanded ? 'auto' : 'inherit'};\n height: ${p => p.expanded ? `calc(100vh - ${p.editorScrolled ? 292 : 300}px)` : 'auto'};\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n }\n`;\n\nconst TabTitleContainer = styled.div<{active: boolean}>`\n\n .tabTitle {\n font-weight: 400;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n\n .tabExtraInfo {\n padding-bottom: 8px;\n\n .tabUsageContainer {\n display: flex;\n\n .usageValue {\n font-size: 18px;\n font-weight: 600;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n .totalValue {\n span {\n font-size: 12px;\n color: #A3A4A4;\n }\n }\n }\n }\n\n`;\n","/* eslint-disable max-len */\n\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {ReactNode} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport styles from './style.module.scss';\n\n\ninterface Props {\n label: string;\n value?: number;\n tooltipLabel?: string | ReactNode;\n showTooltip?: boolean;\n loading?: boolean;\n min?: number;\n max?: number;\n headingData?:{\n h1: number;\n h2: number;\n h3: number;\n h1Min: number;\n h1Max: number;\n h2Min: number;\n h2Max: number;\n h3Min: number;\n h3Max: number;\n };\n linksData?:{\n internalLinks: number;\n externalLinks: number;\n internalLinksMin: number;\n internalLinksMax: number;\n externalLinksMin: number;\n externalLinksMax: number;\n };\n}\n\nexport const SingleMetrics = observer(({label, value, tooltipLabel, showTooltip, loading, min, max, headingData, linksData}:Props) => {\n const secondAntIcon = \n {label === 'Headings:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n \n :\n <>\n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n :\n }\n :\n label === 'Links:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n linksData.internalLinksMax) ? faArrowDown : faCheck} color={(linksData.internalLinks < linksData.internalLinksMin) || (linksData.internalLinks > linksData.internalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '} Internal: {linksData.internalLinks}\n \n {`${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `/` : '/'} ${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `${linksData.internalLinksMin}-${linksData.internalLinksMax}` : ''}`}\n \n \n \n linksData.externalLinksMax) ? faArrowDown : faCheck} color={(linksData.externalLinks < linksData.externalLinksMin) || (linksData.externalLinks > linksData.externalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '}External: {linksData.externalLinks}\n \n {`${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `/` : ''} ${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `${linksData.externalLinksMin}-${linksData.externalLinksMax}` : ''}`}\n \n \n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n :\n <>\n {label} \n {!loading ?\n showTooltip ?\n \n \n max) ? faArrowDown : faCheck} color={(value < min) || (value > max) ? '#FF8536' : '#1FAC47'}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n \n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n cursor: default;\n height: 18px;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1FAC47' : '#F44343'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 2px;\n margin-right: 3px;\n`;\nconst RangeValues = styled.div`\n color: #A3A4A4 !important;\n font-size: 10px;\n display: inline-flex;\n margin-left: 2px;\n\n @media screen and (max-width: 1400px) {\n font-size: 8px;\n }\n`;\nconst StyledLable = styled.p`\n margin-bottom: 0px;\n width: 72px;\n text-align: end;\n margin-right: 5px;\n color: #E8E8E8;\n`;\nconst StyledIcon = styled(FontAwesomeIcon)`\n width: 12px;\n`;\n","/* eslint-disable no-console */\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {isNil} from 'lodash';\nimport {SingleMetrics} from '../SingleMetrics';\nimport {SkeletonHorizontalLoaderGray} from '@/components/common-components';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck, faArrowUpRightFromSquare} from '@fortawesome/pro-regular-svg-icons';\nimport {useState, Dispatch, SetStateAction} from 'react';\nimport {Tabs, Tooltip} from 'antd';\nimport {TabPane} from 'rc-tabs';\nimport {toJS} from 'mobx';\n\ninterface ContentScoreProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const ContentScore = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: ContentScoreProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n isWordCountLoading,\n feTargetKeywords,\n currentEditorState,\n isScoreLoading,\n isFetchingIntLinksSug,\n analytics,\n content: {\n score,\n scoreExtended,\n wordCount,\n suggestedWordCountLimits,\n scoreCounts,\n internalLinkSuggestionsV2,\n },\n },\n }} = useStore('');\n\n const [activeKey, setActiveKey] = useState('internal');\n\n const chartOption={\n grid: {\n top: '0px',\n bottom: '0px',\n },\n series: [{\n min: 0,\n max: 100,\n type: 'gauge',\n axisLine: {\n roundCap: false,\n lineStyle: {\n width: 10,\n color: [\n [0.33, '#f44343'],\n [0.66, '#f1aa3e'],\n [1, '#1ea745'],\n ],\n },\n },\n progress: {\n show: false,\n },\n startAngle: 180,\n radius: '90%',\n endAngle: 0,\n pointer: {\n width: 4,\n icon: 'roundRect',\n length: '25%',\n offsetCenter: [0, '-80%'],\n itemStyle: {\n color: '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n splitLine: {\n distance: -13,\n length: 15,\n lineStyle: {\n color: '#24262a',\n width: 6,\n },\n },\n splitNumber: 3,\n axisLabel: {\n show: false,\n color: 'auto',\n distance: 40,\n fontSize: 20,\n },\n detail: {\n show: false,\n },\n data: [{\n value: score ?? 0,\n }],\n }],\n };\n\n const viewSuggestionHandler = (key: 'links' | 'terms') => {\n setViewSuggestionsOption(true);\n setLinksDropDownFromSuggestion(key);\n setTimeout(() => {\n setViewSuggestionsOption(false);\n }, 1000);\n };\n const scoreLeftPosition = (score?: number) => {\n if (!score || score === 0) return '31%';\n if (score < 100 ) return '27%';\n if (score === 100 ) return '21%';\n };\n const avgTopLeftPosition = (avg?: number, top?: number) => {\n if (!avg && !top) return '25%';\n return '17%';\n };\n\n const shouldShowTooltip = (min?: number, max?: number) => {\n if (isNil(min) || isNil(max)) {\n return false;\n }\n\n return true;\n };\n\n const tooltipMsg = (key: string, min?: number, max?: number, cur?: number) => {\n let msg = '';\n if (cur <= min) msg = `Try to use more ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= max) msg = `Try to use less ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= min && cur <= max) msg = `Good job. You're in the optimal range.`;\n return msg;\n };\n\n const setHeadingsTooltip = (h1value: number, h1Min: number, h1Max: number, h2value: number, h2Min: number, h2Max: number, h3value: number, h3Min: number, h3Max: number) => {\n return \n \n H1 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h1value}/{h1Min}-{h1Max}\n \n
\n \n H2 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h2value}/{h2Min}-{h2Max}\n \n
\n \n H3 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h3value}/{h3Min}-{h3Max}\n \n
\n ;\n };\n const onChangeTab = key => {\n setActiveKey(key);\n };\n\n const openText = scrollToText => {\n const anchorTag = document.querySelector('a[href=\"' + scrollToText + '\"]') as HTMLElement;\n if (anchorTag) {\n anchorTag?.classList.add('animateAnchor');\n anchorTag?.scrollIntoView({behavior: 'smooth', block: 'start'});\n setTimeout(() => {\n anchorTag?.classList.remove('animateAnchor');\n }, 3000);\n }\n };\n\n\n const setLinksTooltip = (internalLinksData, externalLinksData) => {\n return \n onChangeTab(key)}\n >\n \n Recommended:\n {internalLinksData.internalLinksMin} - {internalLinksData.internalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? ()=> viewSuggestionHandler('links') : ()=> {}}>\n {!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {internalLinksData.internalLinksLength}\n internalLinksData.internalLinksMax) ?\n faArrowDown : faCheck}\n color={(internalLinksData.internalLinksLength < internalLinksData.internalLinksMin) ?\n 'red' : (internalLinksData.internalLinksLength > internalLinksData.internalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {internalLinksData?.internalLinks?.map((item, index) => openText(item)}>{item} \n window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n Recommended:\n {externalLinksData.externalLinksMin} - {externalLinksData.externalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? ()=> viewSuggestionHandler('terms') : ()=> {}}>\n {!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {externalLinksData.externalLinksLength}\n externalLinksData.externalLinksMax) ?\n faArrowDown : faCheck}\n color={(externalLinksData.externalLinksLength < externalLinksData.externalLinksMin) ?\n 'red' : (externalLinksData.externalLinksLength > externalLinksData.externalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {externalLinksData?.externalLinks?.map((item, index) => openText(item)}>{item} window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n ;\n };\n\n const countsSetup = [{\n label: 'Word Count:',\n value: wordCount,\n min: suggestedWordCountLimits?.lower,\n max: suggestedWordCountLimits?.upper,\n tooltipLabel: tooltipMsg('words', suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper, wordCount),\n showTooltip: shouldShowTooltip(suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper),\n loading: isWordCountLoading,\n },\n {\n label: 'Paragraphs:',\n value: scoreCounts?.paragraphs,\n min: scoreCounts?.paragraphsMin,\n max: scoreCounts?.paragraphsMax,\n tooltipLabel: tooltipMsg('paragraphs', scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax, scoreCounts?.paragraphs),\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n },\n {\n label: 'Headings:',\n value: scoreCounts?.headings,\n min: scoreCounts?.headingsMin,\n max: scoreCounts?.headingsMax,\n // tooltipLabel: tooltipMsg('headings', scoreCounts?.headingsMin, scoreCounts?.headingsMax, scoreCounts?.headings),\n tooltipLabel: setHeadingsTooltip(scoreCounts?.h1, scoreCounts?.h1Min, scoreCounts?.h1Max, scoreCounts?.h2, scoreCounts?.h2Min, scoreCounts?.h2Max, scoreCounts?.h3, scoreCounts?.h3Min, scoreCounts?.h3Max),\n showTooltip: false,\n loading: isWordCountLoading,\n headingData: {\n h1: scoreCounts?.h1,\n h2: scoreCounts?.h2,\n h3: scoreCounts?.h3,\n h1Min: scoreCounts?.h1Min,\n h1Max: scoreCounts?.h1Max,\n h2Min: scoreCounts?.h2Min,\n h2Max: scoreCounts?.h2Max,\n h3Min: scoreCounts?.h3Min,\n h3Max: scoreCounts?.h3Max,\n },\n },\n {\n label: 'Links:',\n value: 30,\n min: 2,\n max: 12,\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n tooltipLabel: setLinksTooltip(\n {\n internalLinks: toJS(scoreCounts?.internalLinks),\n internalLinksLength: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n },\n {\n externalLinks: toJS(scoreCounts?.externalLinks),\n externalLinksLength: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n externalLinksMin: scoreCounts?.externalLinksMin,\n externalLinksMax: scoreCounts?.externalLinksMax,\n },\n ),\n linksData: {\n internalLinks: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n externalLinks: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n externalLinksMax: scoreCounts?.externalLinksMax,\n externalLinksMin: scoreCounts?.externalLinksMin,\n },\n },\n // {\n // label: 'Images:',\n // value: scoreCounts?.images,\n // min: scoreCounts?.imagesMin,\n // max: scoreCounts?.imagesMax,\n // tooltipLabel: tooltipMsg('images', scoreCounts?.imagesMin, scoreCounts?.imagesMax, scoreCounts?.images),\n // showTooltip: shouldShowTooltip(scoreCounts?.imagesMin, scoreCounts?.imagesMax),\n // loading: isWordCountLoading,\n // },\n ];\n\n const contentProgressMessage = value => {\n if ((feTargetKeywords?.length == 0 || !currentEditorState?.getCurrentContent().hasText()) && value == 0) {\n return <>\n {!isScoreLoading ? \n Add Target Keywords and Start Writing to see how your content ranks\n :\n \n \n \n \n {score ?? 0}/100\n \n \n \n {`Avg: ${scoreExtended?.avg ?? '-'}`}\n \n \n {`Top: ${scoreExtended?.top ?? '-'}`}\n \n \n\n \n \n {countsSetup.map((item, idx) => {\n return ;\n })}\n \n\n \n\n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst RightSection = styled.div`\n\n`;\nconst StyleHeadingsTooltipTitle = styled.div``;\nconst StyledLinksTabs = styled(Tabs)`\ncolor: #4E5156;\nfont-size: 12px;\nfont-weight: 400;\n.ant-tabs-nav {\n margin: 0 0 12px 0;\n \n .ant-tabs-nav-wrap {\n .ant-tabs-nav-list{\n .ant-tabs-tab{\n padding: 4px 0px;\n &:hover{\n color: #121212;\n }\n }\n .ant-tabs-tab-active{\n .ant-tabs-tab-btn {\n color: #121212;\n\n }\n }\n .ant-tabs-ink-bar{\n background: #F1AA3E !important;\n height: 5px;\n border-radius: 2px 2px 0px 0px;\n }\n }\n }\n}\n`;\n\nconst TabsStyled = styled(TabPane)``;\nconst StyledLinksDiv = styled.ul`\nmax-height: 200px;\noverflow-y: auto;\nmargin-left: -15px;\n.linkopen{\n margin-left: 5px !important;\n cursor: pointer;\n &:hover{\n color: #2D6CCA !important;\n }\n}\n::-webkit-scrollbar {\n width: 4px;\n}\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb {\n background: #3E4144;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n`;\n\nconst StyledRecommender = styled.div`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\n`;\nconst StyledRecomentedValue = styled.span`\ncolor: #121212;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 600;\n`;\nconst StyledSuggestionLink = styled.a<{showAsLink}>`\ncolor: ${p=> p.showAsLink ? '#2D6CCA' : '#A3A4A4'};\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\ntext-decoration-line: none;\nmargin-left: 10px;\ncursor: ${p=> p.showAsLink ? 'pointer' : 'default'};\n&:hover{\n color: ${p=> p.showAsLink ? '#5487d4' : '#A3A4A4'};\n text-decoration-line: ${p=> p.showAsLink ? 'underline' : 'none'};\n}\n`;\nconst StyledCurrentValue= styled.p`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\nmargin-bottom: 2px;\nspan{\n color:#121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 600;\n margin-left: 4px;\n}\n`;\nconst StyledLinkItem = styled.span`\ncolor: #000;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 18px;\nmargin-bottom: 2px;\ncursor: pointer !important;\n&:hover{\n text-decoration: underline;\n}\n`;\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\nmargin-left: 6px;\nheight: 10px;\npadding-bottom:1px;\n`;\n\n// const StyledAnchor = styled.a`\n// text-decoration: none;\n// transition: text-decoration 0.2s;\n\n// &:hover {\n// text-decoration: underline;\n// }\n// `;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\n\nexport const WordCount = observer(() => {\n const secondAntIcon = \n Word count:\n {!currentPage?.isWordCountLoading ? <>\n \n = currentPage?.content?.suggestedWordCountLimits?.lower && currentPage?.content?.wordCount <= currentPage?.content?.suggestedWordCountLimits?.upper}/> \n {currentPage?.content?.wordCount} :\n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n height: 18px;\n cursor: default;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1aceb3' : '#ff8436'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 5px;\n margin-right: 5px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {ContentScore} from './ContentScore';\nimport {useTranslation} from 'next-i18next';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {Progress} from 'antd';\nimport {getProgressColor} from '@/utils/colors';\nimport {WordCount} from './WordCount/WordCount';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {Dispatch, SetStateAction} from 'react';\ninterface HeaderSectionProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const HeaderSection = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: HeaderSectionProps) => {\n const {t} = useTranslation('common');\n const {\n contentOptimizer: {\n currentPage: {\n isScoreLoading,\n focusTermsExpanded,\n isTaActive,\n isLinkActive,\n content: {\n score,\n },\n },\n }} = useStore('');\n\n\n return <>\n { (!focusTermsExpanded && (!isTaActive && !isLinkActive)) ? \n \n \n {t('content-score')} \n \n \n \n\n \n \n\n : \n \n {!isScoreLoading ? (score ?? '-') : '-'}} />\n \n \n {t('content-score')} \n \n \n \n \n \n }\n ;\n});\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst MiniTitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n\nconst MiniContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n height: 50px;\n`;\n\nconst ScoreAndWordCount = styled.div`\n display: flex;\n`;\nconst RightSection = styled.div`\n margin-left: 10px;\n`;\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < termsForInsertion?.length; i++) {\n if (!termsAssistantSuggestions?.find(item => item.termIncluded?.includes(termsForInsertion[i].name))) {\n prepArr.push(termsForInsertion[i].name);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(termsForInsertion ?? []), ...(termsAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} terms` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\ninterface SingleTermProps {\n term: any;\n}\n\nexport const SingleTerm = observer(({term}: SingleTermProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n stagingTaSuggestions,\n setTaActiveTerm,\n taActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n const [dots, setDots] = useState({\n total: 0,\n saved: 0,\n dismissed: 0,\n });\n\n useEffect(() => {\n const savedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'accepted');\n const dismissedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'dismissed');\n\n setDots(() => {\n return {\n total: term.placements,\n saved: savedPlacements?.length ?? 0,\n dismissed: dismissedPlacements?.length ?? 0,\n };\n });\n }, [...stagingTaSuggestions]);\n\n\n const generatePlacmenetsInfo = dots => {\n if (dots.saved == 0 && dots.dismissed == 0) return `${dots.total} available placements`;\n\n let response = '';\n if ((dots.total - dots.dismissed - dots.saved) > 0) response = ` ‧ ${dots.total} available`;\n if (dots.dismissed) response = `${dots.dismissed} dismissed ${response}`;\n if (dots.saved) response = `${dots.saved} accepted ${dots.dismissed > 0 ? ` ‧ ` : ``} ${response}`;\n return response;\n };\n\n const onTermClickHandler = curTerm => {\n if (!taActiveTerm?.term || taActiveTerm.term !== curTerm.name) {\n setTaActiveTerm({\n class: curTerm.name.replaceAll(' ', '-'),\n term: curTerm.name,\n order: 0,\n });\n } else {\n const totalOccurances = document.getElementsByClassName(taActiveTerm.class)?.length;\n\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: taActiveTerm.order < totalOccurances - 1 ? taActiveTerm.order + 1 : 0,\n };\n\n setTaActiveTerm(updatedValues);\n }\n };\n\n return onTermClickHandler(term)} className={taActiveTerm?.term == term.name ? 'isActive' : ''}>\n \n {term.name}
\n \n \n {generatePlacmenetsInfo(dots)}\n \n \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name))?.sort(item => item.status == 'accepted' ? -1 : item.status == 'default' ? 0 : 1)?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return ;\n if (suggestion.status == 'dismissed') return ;\n if (suggestion.status == 'accepted') return ;\n })}\n \n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: ${opaqueColor('#4E5156', 30)};\n border-radius: 10px;\n cursor: pointer;\n transition: background .3s ease-in;\n display: flex;\n\n .termName { \n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n`;\n\nconst Data = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst PlacementsInfo = styled.div`\n font-size: 12px;\n color: #A3A4A4 !important;\n`;\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 28%;\n margin-left: 2%;\n margin-top: auto;\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\n\nexport const TermsList = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n\n useEffect(() => {\n setFinalTermsList([]);\n if (termsAssistantSuggestions?.length) {\n for (let i = 0; i < termsForInsertion.length; i++) {\n const termOccurances = termsAssistantSuggestions.filter(suggestion => suggestion.termIncluded?.includes(termsForInsertion[i].name));\n if (termOccurances?.length) {\n setFinalTermsList(cur => [...cur, {...termsForInsertion[i], placements: termOccurances?.length}]);\n }\n }\n }\n }, [...(termsAssistantSuggestions ?? []), ...(termsForInsertion ?? 0)]);\n\n return \n {finalTermsList?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {CommonInput} from '@/components/common-components';\nimport {Button, Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCaretDown, faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover, Spin, Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const TermsSelectionDropdown = observer(() => {\n const [selectedTerms, setSelectedTerms] = useState([]);\n const [popoverVisible, setPopoverVisible] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n const [showLimitError, setShowLimitEror] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n fetchTaSuggestions,\n termsForInsertion,\n analytics,\n taSuggestionsLoading,\n },\n }, settings: {\n customer: {getCustomerQuota},\n }} = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}}}} = useStore('');\n\n const antIcon = \n \n \n onTermsSearchHandler(e.target.value)}/>\n \n \n \n {`AI Quota: ${quotaUtilization?.ca?.allowedAiContentGeneration?.consumed}/${quotaUtilization?.ca?.allowedAiContentGeneration?.total}`}\n \n \n \n\n \n onBulkSelectTop20Handler()}>Select top 20 terms \n onUncheckAllClickHandler()}>Uncheck all \n \n {showLimitError ?\n Please select less than 50 topical terms. :\n null}\n \n {[\n ...(analytics?.includeMoreTerms ?? []),\n ...(analytics?.includedTerms ?? []),\n ...(analytics?.includeLessTerms ?? []),\n ].filter(term => term.name.includes(searchQuery))?.map((term, idx) => {\n return \n item.name).includes(term.name)}\n onChange={e => handleCheckboxClick(e, term)}\n disabled={term.status == 'include-less'}>\n {term.name} \n \n \n \n Current usage:\n {term.usedCount}\n \n \n Recommended usage:\n {term.requiredCountMin}\n \n \n Maximum usage:\n {term.requiredCountMax}\n \n }>\n {`${term.usedCount}/${term.requiredCountMin}`} \n \n ;\n })}\n \n \n setPopoverVisible(false)}>Cancel \n \n \n \n );\n\n\n return \n onTriggerClickHandler()}>\n {`Select terms ${selectedTerms?.length}`}\n \n ;\n});\nconst Trigger = styled.div`\n color: #34aef3 !important;\n font-size: 12px;\n cursor: pointer;\n`;\nconst Wrapper = styled.div`\n\n`;\nconst HeadingSection = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\nconst SearchBox = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst QuotaInfo = styled.div`\n color: #4E5156;\n margin-bottom: 12px;\n`;\nconst CommonInputStyled = styled(CommonInput)`\n border: 0px solid transparent;\n height: 30px;\n\n &:active {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n &:hover {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n\n &::placeholder {\n color: #A3A4A4;\n font-weight: 400;\n font-size: 15px;\n }\n`;\nconst ControllsBar = styled.div`\n display: flex;\n justify-content: space-between;\n color: #2D6CCA;\n font-size: 12px;\n background: #F9F9FB;\n box-shadow: 0px 1px 0px #E8E8E8, 0px -1px 0px #E8E8E8;\n margin-left: -15px;\n margin-right: -15px;\n padding: 10px 15px\n`;\nconst BulkControllBtn = styled.div`\n cursor: pointer;\n`;\n\nconst TermsList = styled.div`\n max-height: 300px;\n overflow-y: scroll;\n margin-right: -15px;\n padding-right: 15px;\n margin-top: 10px;\n\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.12) ;\n scrollbar-track-color: rgba(138,138,138,0.32);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.4);\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n }\n`;\nconst SingleTermRow = styled.div<{opaque: boolean}>`\n display: flex;\n\n opacity: ${p => p.opaque ? '.4' : 1};\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n display: flex;\n width: 100%;\n\n .ant-checkbox-wrapper {\n width: 100%;\n }\n\n .ant-checkbox-inner {\n border-radius: 4px !important;\n }\n .ant-checkbox-checked .ant-checkbox-inner {\n background-color: #2D6CCA !important;\n border-color: #2D6CCA !important;\n border-radius: 4px !important;\n }\n`;\n\nconst TermName = styled.div`\n cursor: default;\n margin-left: 10px;\n color: #4E5156;\n`;\nconst TermUsage = styled.div`\n cursor: default;\n margin-left: auto;\n color: #4E5156;\n`;\nconst BtnsContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding-top: 10px;\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Divider, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {TermsList} from './TermsList';\nimport {TermsSelectionDropdown} from './TermsSelectionDropdown';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const TermsAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n editContent,\n stagingTaSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n },\n }} = useStore('');\n\n const antIcon =
'));\n }\n\n if (stagingTaSuggestions[i].isSuggestion) {\n if (stagingTaSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n \n \n Terms Assistant \n \n \n Go through the suggestions for inserting terms to see how they look like in your article. Accept or dismiss individual ones.\n
\n
\n * Save changes to update your article.\n \n \n \n item.status !== 'default')}\n color='green'\n style={{marginBottom: 10, width: '-webkit-fill-available', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n {updatingTa ? 'Updating Article...' : 'Save & Update Article'}\n {updatingTa ? onCancelClickHandler()}>\n Cancel\n \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 50px);\n padding-bottom: 20px;\n`;\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #e8e8e8;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {getProgressColor} from '@/utils/colors';\nimport {numberWithCommas} from '@/utils/number';\nimport {Progress, Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n competitor: SingleCompetitorType;\n loading: boolean;\n}\n\nexport const SingleCompetitor = observer(({competitor, loading}: Props) => {\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n {competitor.url && addDefaultSrc(e)}\n height={20}\n width={20}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor.url}`} />} \n \n {competitor?.url}}>\n {competitor?.title}\n \n\n \n\n \n {`#${competitor?.position}`}\n \n\n {`-`}\n\n \n \n {competitor?.contentScore}\n }\n className={styles.progress}\n />\n \n \n\n {`-`}\n\n \n \n {`${numberWithCommas(competitor?.wordCount) || 0} words`}\n \n \n \n {/* {competitor?.url && urlValidationRegex.test(competitor?.url) ?\n {competitor?.url} : null} */}\n\n {/* {competitor?.metaDesc && competitor?.metaDesc.length > 90 ? competitor?.metaDesc.substring(0, 90) + '...' : competitor?.metaDesc} */}\n \n ;\n});\n","import {useEffect} from 'react';\nimport {SingleCompetitor} from './SingleCompetitor/SingleCompetitor';\nimport styles from './style.module.scss';\nimport css from '../../index.module.scss';\nimport {Typography, Spin, Select, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const TopRankingCompetitors = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {Option} = Select;\n const {Title} = Typography;\n const antIcon = \n Top Ranking Competitors {currentPage?.isAnalyzing && <Spin indicator={antIcon} style={{marginRight: '20px'}}/>}\n \n currentPage.openCompetingFocusTermsDrawer()}>\n Analyse Content\n \n \n\n {currentPage?.analytics?.competitorsData?.length ? \n \n handleOnSortChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n {currentPage?.analytics?.competitorsData?.filter(item => item.keyword === currentPage?.topRankingCompetitorActiveKw)[0]?.competitors?.map(competitor => {\n return competitor?.title && ;\n })}\n \n :\n !currentPage?.content?.targetKeywords?.length ? \n {/* \n {\n updatedButtonConf().map((item, idx) => {\n return \n {\n if (anyButtonClicked || item.disabled) return;\n item.callback();\n }} disabled={item.disabled}>\n {item.loading ? : \n ;\n })\n }\n ;\n});\n\nconst Wrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n`;\nconst SingleItem = styled.div<{hoverColor: string; anyButtonClicked?: boolean; disabled?: boolean}>`\n width: calc(50% - 5px);\n margin-bottom: 10px;\n transition: background-color .3s ease;\n background-color: #323539;\n cursor: ${p => p.anyButtonClicked || p.disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n padding: 5px;\n border-radius: 6px;\n font-size: 13px;\n opacity: ${p => p.disabled ? .4 : 1};\n\n &:hover {\n background-color: ${p => !p.anyButtonClicked && p.hoverColor};\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {FocusTermsTabs} from './FocusTermsAndQuestions/FocusTermsTabs';\nimport {HeaderSection} from './HeaderSection';\nimport {TermsAssistantRightSidebar} from './TermsAssistant/RightSidebar';\nimport {TopRankingCompetitors} from './TopRankingCompetitors/TopRankingCompetitors';\nimport {DrawersTriggers} from './DrawersTriggers';\nimport {useState} from 'react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Analytics = observer(({changeView}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const [viewSuggestionsOption, setViewSuggestionsOption] = useState(false);\n const [linksDropDownFromSuggestion, setLinksDropDownFromSuggestion] = useState<'links' | 'terms'>('links');\n\n return \n {!currentPage?.isLinkActive && }\n {currentPage?.isTaActive ? \n \n \n {!currentPage.focusTermsExpanded ? }\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst ContentContainer = styled.div`\n overflow-y: auto;\n height: 100%;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n\n","import React from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n isSubscriber: boolean;\n isCompetitorsTable: boolean;\n setFilteredCompetitorsData: React.Dispatch>;\n setCompetitors: React.Dispatch>;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n}\n\nexport const KeywordSelector = observer(({isSubscriber, isCompetitorsTable, setFilteredCompetitorsData, setActiveKw, setCompetitors, activeKw}: Props) => {\n const {Option} = Select;\n const {contentOptimizer: {currentPage}} = useStore('');\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n if (isCompetitorsTable) {\n setFilteredCompetitorsData(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n }\n };\n\n return \n \n Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ ;\n});\n\nconst KeywordDropdownWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {Progress, Tooltip, Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {Table} from '@/components/common-components/components/index';\nimport styles from './style.module.scss';\nimport {numberWithCommas} from '@/utils/number';\nimport {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {KeywordSelector} from './KeywordSelector';\nimport {useStore} from '@/store/root-store';\nimport {NextImg} from '@/utils/nextImg';\n\n\ninterface Props {\n store: CurrentPageStore;\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsTable = observer(({\n store,\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n allSchemasCount,\n nullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n }}} = useStore('');\n const [isSmallScreen, setIsSmallScreen] = useState(true);\n const [allowScroll, setAllowScroll] = useState(false);\n\n const onWindowResize = () => {\n setIsSmallScreen(window.innerWidth < 1441);\n setAllowScroll(window.innerWidth < 768);\n };\n\n useEffect(() => {\n onWindowResize();\n window.addEventListener('resize', onWindowResize);\n return () => {\n window.removeEventListener('resize', onWindowResize);\n };\n }, []);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const getProgressColor = (value: number, min: number, average: number, max?: number) => {\n if (value <= min) {\n return '#F44343';\n }\n if (value <= average && value > min) {\n return '#FF8536';\n }\n if (value > average) {\n if (max && value < max) {\n return '#BFE15E';\n }\n return '#52D477';\n }\n return '#52D477';\n };\n\n const reFormatSchemaType = value => {\n const outputString = value.replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');\n return outputString;\n };\n\n const handleTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...competitors];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n setCompetitors(data);\n } else {\n setCompetitors(store?.analytics?.competitorsData?.filter(item => item.keyword === activeKw)[0]?.competitors);\n }\n };\n\n useEffect(() => {\n if (selectedSchema?.value == 'all-schemas') {\n setFilteredCompetitorsData(competitors);\n } else if (selectedSchema?.value == 'no-schemas') {\n setFilteredCompetitorsData(competitors?.filter(item => item?.schema?.length == 0 || item?.schema == null));\n } else {\n const selectedSchemaValue = selectedSchema?.value;\n\n const filteredItems = [];\n\n competitors?.forEach(item => {\n if (item?.schema) {\n if (Array.isArray(item?.schema)) {\n item?.schema?.forEach(ele => {\n if (ele?.graph) {\n if (Array.isArray(ele?.graph)) {\n ele?.graph?.forEach(graphItem => {\n if (Array.isArray(graphItem?.type)) {\n if (graphItem?.type?.includes(selectedSchemaValue)) {\n filteredItems.push(item);\n }\n } else if (graphItem?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n } else if (ele?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n }\n });\n\n setFilteredCompetitorsData(filteredItems);\n }\n }, [selectedSchema]);\n\n const columns = [\n {\n title: () => #,\n dataIndex: 'position',\n key: 'position',\n sortField: 'position',\n width: 45,\n fixed: allowScroll ? false : 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return {record?.position};\n },\n },\n {\n title: () => {'PAGE / URL'.toUpperCase()},\n dataIndex: 'title',\n key: 'title',\n sortField: 'title',\n fixed: allowScroll ? false : 'left' as 'left',\n width: isSmallScreen ? 300 : 'auto',\n ellipsis: true,\n align: 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${record?.url}`} /> \n {record?.title}
\n {record?.url}}>\n \n {record?.title}\n {record?.url}\n \n ;\n },\n },\n {\n title: () => {'DR'.toUpperCase()},\n dataIndex: 'dr',\n key: 'dr',\n sortField: 'dr',\n sorter: (a: any, b: any) => a.dr - b.dr,\n align: 'center' as 'center',\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.dr ? record?.dr % 1 === 0 ? record?.dr : parseFloat(record?.dr.toFixed(2)) : 0;\n return \n \n {percent}\n ;\n },\n },\n {\n title: () => {'CS'.toUpperCase()},\n dataIndex: 'contentScore',\n key: 'contentScore',\n sortField: 'contentScore',\n align: 'right' as 'right',\n sorter: (a: any, b: any) => a.contentScore - b.contentScore,\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.contentScore ? record?.contentScore % 1 === 0 ? record?.contentScore : parseFloat(record?.contentScore.toFixed(2)) : 0;\n return \n {percent }}\n />\n ;\n },\n },\n {\n title: () => {'Schema'.toUpperCase()},\n dataIndex: 'schema',\n key: 'schema',\n sortField: 'schema',\n align: 'center' as 'center',\n width: 150,\n render: (_, record: SingleCompetitorType) => {\n let schemaLength = 0;\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaLength += 1 : Array.isArray(item?.graph) && item?.graph?.map(graphItem => graphItem?.type ? schemaLength += 1 : '');\n });\n\n const schemaItemsList = [];\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaItemsList.push(item) : Array.isArray(item?.graph) && item?.graph?.map(graphItem => schemaItemsList.push(graphItem));\n });\n return \n {record?.schema != null && record?.schema != undefined && Array.isArray(record?.schema) && record?.schema?.length != 0 ?\n <>\n \n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, 0, record?.schema[0])}>{reFormatSchemaType(String(record?.schema ? (record?.schema[0]?.graph ? record?.schema[0]?.graph[0]?.type : record?.schema[0]?.type) : '-'))} \n {schemaLength > 1 &&\n <>\n , \n {schemaItemsList?.map((item, idx) =>\n <>\n {idx == 0 ? '' :\n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, idx, item)}\n style={{width: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2D6CCA', cursor: 'pointer', paddingLeft: '20px'}}>\n {reFormatSchemaType(String(item?.type))} \n }\n ,\n )}}>\n +{schemaLength - 1} \n \n }\n \n : '-'\n }\n ;\n },\n },\n {\n title: () => <>{'int'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'internalLinks',\n key: 'internalLinks',\n sortField: 'internalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.internalLinks?.length - b?.internalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.internalLinks?.length == 0 ?\n {numberWithCommas(record?.internalLinks?.length) || '-' } :\n \n {record?.internalLinks?.length > 0 ? record?.internalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.internalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => <>{'ext'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'externalLinks',\n key: 'externalLinks',\n sortField: 'externalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.externalLinks?.length - b?.externalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.externalLinks?.length == 0 ?\n {numberWithCommas(record?.externalLinks?.length) || '-' } :\n \n {record?.externalLinks?.length > 0 ? record?.externalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.externalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => {'h1'.toUpperCase()},\n dataIndex: 'h1Count',\n key: 'h1Count',\n sortField: 'h1Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h1Count - b?.h1Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h1Count) || '-' };\n },\n },\n {\n title: () => {'h2'.toUpperCase()},\n dataIndex: 'h2Count',\n key: 'h2Count',\n sortField: 'h2Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h2Count - b?.h2Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h2Count) || '-' };\n },\n },\n {\n title: () => {'h3'.toUpperCase()},\n dataIndex: 'h3Count',\n key: 'h3Count',\n sortField: 'h3Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h3Count - b?.h3Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h3Count) || '-' };\n },\n },\n {\n title: () => {'Word Count'.toUpperCase()},\n dataIndex: 'wordCount',\n key: 'wordCount',\n sortField: 'wordCount',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.wordCount - b?.wordCount,\n width: 115,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.wordCount) || '-' };\n },\n },\n ];\n\n return \n \n \n \n \n Types of Schema Found: \n \n setSelectedSchema({idx: 'all-schemas', value: 'all-schemas'})}>All schemas | {allSchemasCount} \n setSelectedSchema({idx: 'no-schemas', value: 'no-schemas'})}>No schemas | {nullCount} \n {schemaTypesList?.map((item, idx) => {\n return setSelectedSchema({idx: `${idx}`, value: item?.value})} key={idx}>{reFormatSchemaType(String(item?.value))} | {item?.count} ;\n })}\n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst DRWrapper = styled.div`\n background-color: rgba(45, 108, 202, 0.07);\n display: flex;\n border-radius: 6px;\n align-items: center;\n justify-content: center;\n width: 55px;\n height: 32px;\n padding: 7px 12px 8px 12px;\n`;\n\nconst PageUrlWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst TypesSchemaFilterWrapper = styled.div`\n\n`;\n\nconst SchemaFilterTitle = styled.div`\n color: #4E5156;\n font-size: 14px;\n margin-left: 10px;\n margin-bottom: 10px;\n`;\n\nconst SchemaFilterWrapper = styled.div`\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n margin-left: 10px;\n width: 97%;\n overflow-x: auto;\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n`;\n\nconst SchemaFilter = styled.div<{selectedSchema?: boolean}>`\n min-width: fit-content;\n min-height: 28px;\n border-radius: 14px;\n background: ${p => p?.selectedSchema ? 'linear-gradient(0deg, rgba(127, 78, 173, 0.20) 0%, rgba(127, 78, 173, 0.20) 100%), #FFF' : '#FFFF'};\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n border: ${p => p?.selectedSchema ? '1px solid #7F4EAD' : '1px solid #E8E8E8'};\n display: flex;\n padding: 5px 10px 6px 10px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n\nconst LinksContainer = styled.div`\n max-height: 300px;\n overflow-y: auto;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n\nconst LinkWrapper = styled.div`\n width: auto;\n font-size: 12px;\n line-height: 14px;\n color: rgb(45, 108, 202);\n white-space: pre-line;\n overflow-wrap: anywhere;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 8px;\n`;\n\nconst StyledAnchor = styled.a`\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst BlueTextWithUnderline = styled.div`\n color: #2D6CCA;\n cursor: pointer;\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst ULStyled = styled.ul`\n padding-left: 0px;\n max-height: 160px;\n overflow-y: auto;\n padding: 5px;\n margin-bottom: 0;\n width: 200px;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n","import styled from 'styled-components';\nimport {faArrowLeft} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {urlValidationRegex2} from '@/constants/regex';\nimport moment from 'moment';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const CompetitorsDetail = observer(() => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n competitorSchemaObject,\n competitorTitle,\n competitorUrl,\n competitorSchemaGraphIdx,\n }}} = useStore('');\n\n const formats = [\n moment.ISO_8601,\n 'MM/DD/YYYY :) HH*mm*ss',\n ];\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const renderSchemaData = dataObj => {\n return <>\n \n {mainLebel && mainLebel != '0' ? mainLebel == 'type' ? `@${mainLebel}` : mainLebel : ''} \n {typeof mainValue !== 'object' ? {typeof mainValue == 'boolean' ? `${mainValue ? 'Yes' : 'No'}` : (\n urlValidationRegex2?.test(String(mainValue)) ? {String(mainValue)} : (\n moment(mainValue, formats, true)?.isValid() || mainLebel?.includes('date') ? moment(mainValue)?.utc()?.format('DD MMM YYYY') : `${mainValue}`\n )\n )} :\n renderSchemaData(mainValue)}\n ;\n })}\n \n \n ;\n };\n\n return <>\n setShowCompetitorTermsTableDetail(false)\n }>\n \n \n \n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitorUrl}`} />\n \n \n {competitorTitle}\n {competitorUrl}\n \n \n \n @context \n {competitorSchemaObject?.context ?? '-'} \n @graph \n {renderSchemaData(competitorSchemaObject?.graph ? competitorSchemaObject?.graph[competitorSchemaGraphIdx] : competitorSchemaObject)}\n \n \n ;\n});\n\nconst BackArrowContainer = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-left: 33px;\n margin-top: 37px;\n width: max-content;\n`;\n\nconst SchemaContainer = styled.div`\n width: 95%;\n margin-left: 30px;\n margin-top: 27px;\n min-height: 630px;\n background-color: white;\n border-radius: 14px;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n`;\n\nconst SchemaLabel = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 8px;\n`;\n\nconst SchemaValue = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n`;\n\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\n\nconst URL = styled.a`\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst SchemaHeader = styled.div`\n display: flex;\n align-items: center;\n margin-left: 30px;\n margin-top: 20px;\n`;\n\nconst SchemaPageTitle = styled.div`\n\n`;\n","import {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction} from 'react';\nimport {CompetitorsTable} from './CompetitorsTable';\nimport {useStore} from '@/store/root-store';\nimport {CompetitorsDetail} from './CompetitorsDetail';\n\ninterface Props {\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsDrawerTab = observer(({\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n setSchemaTypesList,\n allSchemasCount,\n setAllSchemasCount,\n nullCount,\n setNullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer: {\n currentPage: {\n showCompetitorTermsTableDetail,\n }}} = useStore('');\n\n return showCompetitorTermsTableDetail ? ranking : not ranking }\n {`for `}\n {keyword}\n \n {/* used {keyword} {score} times */}\n \n \n);\nconst focusTermsTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n);\nexport const CompetingFocusTermsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n const {contentOptimizer: {currentPage: {analytics, isCompetingFocusTermsDrawerOpen, closeCompetingFocusTermsDrawer, isOpeningKwSuggestionsFromContentResearch, setIsOpeningKwSuggestionFromContentResearch}}} = useStore('');\n const [selectedKeyword, setSelectedKeyword] = useState('');\n const [selectedCompTabKw, setSelectedCompTabKw] = useState('');\n const [isHovered, setIsHovered] = useState(false);\n const [maxElemHeight, setMaxElemHeight] = useState(0);\n const allRef = useRef(null);\n const keywordSuggestionsRef = useRef(null);\n const [activeTab, setActiveTab] = useState('1');\n\n const antIcon = {\n setActiveTab('1');\n setIsOpeningKwSuggestionFromContentResearch(false);\n closeCompetingFocusTermsDrawer();\n }}\n closeIcon={Competitor Content Analysis \n onTabChange(key)}>\n Top competitors {currentPage?.isAnalyzing && \n \n Relevant terms grid {currentPage?.isAnalyzing && \n \n \n Competing Focus Terms \n Check what focus terms your competitors are using \n \n \n exportSingleNode(allRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => (\n {i === 0 ? 'YOU' : i} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n \n Created From Scratch\n \n \n );\n }\n return (\n \n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n CONTENT SCORE\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.contentScores?.map((score, i) => (\n {percent}}\n />\n ))}\n \n
\n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item?.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}\n \n \n Keyword suggestions {currentPage?.isAnalyzing && \n \n \n {/* Keywords Suggestions */}\n Check out what keywords your competitors are using \n \n \n exportSingleNode(keywordSuggestionsRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => {\n return (\n \n \n \n {x.url}\n \n \n Content Score: \n {x.contentScore}\n \n \n Word Count: \n {x.wordCount}\n \n \n }\n key={x?.url}\n >\n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n
\n \n \n TARGET KEYWORD\n USAGE\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.keywordSuggestionsUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: score ? '#2AC155' : '#F44343'}}> \n \n ))}\n \n ))}\n \n \n \n \n );\n});\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: 20px;\n color: #121212;\n line-height: 28px;\n`;\n\nconst TitleStyled = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n line-height: normal;\n margin: 0 0 15px 30px;\n`;\n\nconst Subtitle = styled.div`\n font-size: 16px;\n line-height: 24px;\n color: #4E5156;\n`;\n\nconst SectionHeader = styled.div`\n background: #e2e2e5;\n border-radius: 3px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Square = styled.div<{isHovered: boolean}>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\nconst SelectStyled = styled(Select)`\n width: 100%;\n\n .ant-select-arrow {\n color: #121212;\n }\n`;\n\nconst Site = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n width: auto;\n display: block;\n align-items: left;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst IsNotRanking= styled.span`\n padding: 2px 7px;\n background-color: #F44343;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import {useEffect} from 'react';\nimport {Form, Select, Spin} from 'antd';\nimport {\n Button,\n CommonInput,\n} from '@/components/common-components/components';\nimport styles from './style.module.scss';\n\nimport {useState} from 'react';\nimport {languages} from '@/components/dashboard/pages/content-ideas/drawer/languages';\nimport Flag from '@/components/common-components/components/flag';\nimport {formatCountryCode} from '@/components/dashboard/pages/content-ideas/drawer/languageUtil';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport {observer} from 'mobx-react';\nimport {LoadingOutlined} from '@ant-design/icons';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_CONTENT_IDEAS_GENERATE} from '@/constants/events';\nimport {useStore} from '@/store/root-store';\n\ninterface Props {\n store: ContentIdeasStore;\n pageId: any;\n drawerVisible: boolean;\n}\n\nexport const NewContentIdeaForm = observer(({store, pageId, drawerVisible}: Props) => {\n const {\n settings: {\n customer: {\n getCustomerQuota,\n },\n },\n } = useStore('');\n\n\n const usaCode = languages.find(lang => lang.code == 'en');\n\n\n const antIcon = Need some inspiration? Here you can generate unlimited article ideas on any topic you can think of.
\n\n \n \n );\n});\n","import {useState, useEffect} from 'react';\nimport styles from './style.module.scss';\nimport {faDownload} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n Button,\n} from '@/components/common-components/components';\nimport {CopyOutlined} from '@ant-design/icons';\n\nimport {Divider, Tooltip} from 'antd';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {SCA_PAGE_CONTENT_IDEA_COPY, SCA_PAGE_CONTENT_IDEA_DOWNLOAD} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {useTranslation} from 'next-i18next';\nimport parse from 'html-react-parser';\n\ninterface Props {\n idea: string;\n}\n\nexport const SingleContentIdea = ({idea}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [convertedText, setConvertedText] = useState(idea);\n\n const {t} = useTranslation('landing-page-optimizer');\n\n useEffect(() => {\n // Removing the leading space from string\n const newLineIndex = idea?.search('\\n');\n const textWithoutLeadingSpace = idea?.slice(0, newLineIndex + 1) + idea?.slice(newLineIndex + 2);\n const firstTitle = idea?.slice(0, newLineIndex + 1);\n const result = textWithoutLeadingSpace.replace(firstTitle, '' + firstTitle + '');\n\n setConvertedText(result);\n }, [idea]);\n\n\n const downloadFileToTxt = () => {\n const element = document.createElement('a');\n const file = new Blob([idea], {type: 'text/plain'});\n element.href = URL.createObjectURL(file);\n const breakFileName = idea.split(' ').length;\n const fileName = breakFileName > 4 ? idea.split(' ').slice(0, 4).join('-') : idea.split(' ').slice(0, breakFileName).join('-');\n element.download = `${fileName}`;\n document.body.appendChild(element);\n element.click();\n };\n\n return (\n \n \n {convertedText && parse(convertedText.trim())}\n
\n {\n downloadFileToTxt();\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_DOWNLOAD, {\n 'description': 'Content idea downloaded',\n });\n }}/>\n {\n navigator.clipboard.writeText(idea);\n setCopySuccess(true);\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_COPY, {\n 'description': 'Content idea copied',\n });\n }}>\n \n \n \n \n );\n};\n","// import {useState} from 'react';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport CsvDownloader from 'react-csv-downloader';\nimport {Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleContentIdea} from './SingleContentIdea';\nimport {ExportOutlined} from '@ant-design/icons';\nimport {Button} from '@/components/common-components/components';\n\ninterface Props {\n store: ContentIdeasStore;\n}\n\nexport const ContentIdeas = observer(({store}: Props) => {\n const csvModel = store?.wordsArray.map(item => ({\n title: item.split('\\n')[0],\n text: item.split('\\n')[1],\n }));\n\n const csvColumns = [\n {\n id: 'title',\n displayName: 'Title',\n },\n {\n id: 'text',\n displayName: 'Text',\n },\n ];\n return <>\n {store?.wordsArray.length ? \n {`${store?.wordsArray?.length} ideas generated for \"${store?.keyword}\" `}\n \n \n \n
: null}\n {store?.wordsArray && store?.wordsArray.map((idea, idx) => {\n return {\n contentIdeas.clearContentIdeas();\n setDrawerVisible(false);\n currentPage.setIsOpenContentGeneratorDrawer(false);\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={styles.contentIdeasDrawer}\n afterVisibleChange={visible => {\n if (visible) setDrawerVisible(true);\n }}\n >\n \n \n Content Helper\n \n \n \n \n \n \n );\n});\n","import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip, Spin} from 'antd';\nimport styles from './style.module.scss';\nimport {faCheck, faPlus, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport classNames from 'classnames';\n\ninterface Props {\n keyword: string;\n isIncluded?: boolean;\n}\n\nexport const SimilarKeyword = observer(({keyword, isIncluded}: Props) => {\n const {\n OverviewPage: {\n addToLoadingArray,\n loadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}, getCustomerQuota}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n const antIcon = \n {keyword ? keyword : '-'}\n \n \n\n {loadingArray && loadingArray.includes(keyword) ?\n \n \n Remove\n :\n // adding a check to disable button if total target kw limit is reached\n currentPage?.feTargetKeywords?.length < 15 ?\n onAddKeywordFinish()}>\n \n \n \n\n }\n\n \n ;\n});\n","import {useEffect, useState, useCallback} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {\n Drawer,\n Progress,\n Tooltip, Select} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport styled from 'styled-components';\nimport {formatNumber, numberWithCommas} from '@/utils/number';\nimport {Table, BarChartColumn, SkeletonRingLoader, Pagination, SkeletonHorizontalLoaderGray, Button} from '@/components/common-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {EChartOption} from 'echarts';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {getProgressColor} from '@/utils/colors';\nimport {faArrowUp} from '@fortawesome/pro-regular-svg-icons';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport numeral from 'numeral';\nimport Flag from '@/components/common-components/components/flag';\nimport {SimilarKeyword} from './SimilarKeyword';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const ContentResearchDrawer = observer(() => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const {\n countries: {getSpecificCountryByCode},\n OverviewPage: {\n isContentResearchDrawerOpen,\n loading,\n keywordDetail,\n closeContentResearchDrawer,\n getKeywordDetail,\n removeFromLoadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const countryName = getSpecificCountryByCode(keywordDetail?.countryCode);\n\n const [activeKw, setActiveKw] = useState('');\n const [similarKeywordsPageNumber, setSimilarKeywordsPageNumber] = useState(1);\n const [similarKeywordsPageSize] = useState(8);\n const [similarKeywordsData, setSimilarKeywordsData] = useState([]);\n const [similarKeywordsList, setSimilarKeywordsList] = useState([]);\n\n const [topCompetitorsData, setTopCompetitorsData] = useState([]);\n const [rankingPotentialData, setRankingPotentialData] = useState([]);\n\n const {Option} = Select;\n\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n getKeywordDetail(currentPage?.content?.targetKeywords?.filter(item => item.keyword === value)[0]?.id);\n };\n\n\n /* SIMILAR KEYWORDS TABLE UPDATE START */\n const handleFilterRenderData = useCallback((dataArray: any, pageNumber: number, pageSize: number) => {\n const targetKwArray = currentPage?.content?.targetKeywords && currentPage?.content?.targetKeywords.length ? toJS(currentPage.content.targetKeywords).map(item => {\n return JSON.stringify({\n keyword: item.keyword,\n countryCode: item.countryCode,\n locationId: item.locationId,\n location: item.location,\n });\n }) : [];\n\n let similarKeywordsFormattedData = [];\n if (dataArray.length && targetKwArray?.length ) {\n const updatedData = toJS(dataArray).map(item => {\n return {\n ...item,\n isKwIncluded: targetKwArray.includes(JSON.stringify({\n keyword: item.keyword,\n countryCode: currentPage.content.countryCode,\n locationId: currentPage.content.locationId,\n location: currentPage.content.location,\n })),\n };\n });\n\n\n similarKeywordsFormattedData = updatedData;\n } else {\n similarKeywordsFormattedData = dataArray;\n }\n setSimilarKeywordsData(similarKeywordsFormattedData.slice((pageNumber - 1) * pageSize, ((pageNumber - 1) * pageSize) + pageSize));\n }, []);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n const kwArray = [...(currentPage?.content?.targetKeywords ?? [])].map(kw => kw.keyword);\n removeFromLoadingArray(kwArray);\n handleFilterRenderData([...keywordDetail.similarKeywords], similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n }, [[...(currentPage?.content?.targetKeywords ?? [])].length, activeKw, toJS(keywordDetail?.similarKeywords)?.length, handleFilterRenderData, keywordDetail?.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize]);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n setSimilarKeywordsList(keywordDetail.similarKeywords);\n }\n }, [toJS(keywordDetail?.similarKeywords)?.length, toJS(keywordDetail?.similarKeywords), activeKw]);\n\n\n const onPaginationChange = async (pageNumber: number, pageSize: number) => {\n setSimilarKeywordsPageNumber(pageNumber);\n handleFilterRenderData(keywordDetail.similarKeywords, pageNumber, pageSize);\n };\n\n const handleIssueTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...similarKeywordsList];\n\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n handleFilterRenderData(data, similarKeywordsPageNumber, similarKeywordsPageSize);\n } else {\n handleFilterRenderData(keywordDetail.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n };\n /* SIMILAR KEYWORDS TABLE UPDATE END */\n\n /* TOP COMPETITORS TABLE UPDATE START */\n useEffect(() => {\n if (keywordDetail?.competitors?.length > 0) {\n setTopCompetitorsData(keywordDetail.competitors);\n }\n }, [toJS(keywordDetail?.competitors)?.length, activeKw]);\n\n\n const handleTopCompetitorsTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...topCompetitorsData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setTopCompetitorsData(data);\n } else {\n setTopCompetitorsData(keywordDetail?.competitors);\n }\n };\n /* TOP COMPETITORS TABLE UPDATE END */\n\n /* RANKING POTENTIAL TABLE UPDATE START */\n useEffect(() => {\n const relevanceData = [];\n relevanceData?.push({\n competition: keywordDetail?.typicalTop10 && Object.keys(keywordDetail?.typicalTop10)[0],\n contentScore: keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n dr: keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n wordCount: keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n readAbility: keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n });\n\n if (relevanceData.length > 0) {\n setRankingPotentialData(relevanceData);\n }\n }, [\n activeKw, keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n ]);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n\n const handleRankingPotentialTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...rankingPotentialData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setRankingPotentialData(data);\n } else {\n setRankingPotentialData(keywordDetail?.competitors);\n }\n };\n /* RANKING POTENTIAL TABLE UPDATE END */\n\n const columns = [\n {\n title: 'AVERAGE PER COMPETION',\n dataIndex: 'competition',\n key: 'competition',\n width: 180,\n align: 'left' as 'left',\n render: (_, data) => {data?.competition || '-'},\n },\n {\n title: 'CONTENT SCORE',\n dataIndex: 'contentScore',\n sorter: true,\n sortField: 'contentScore',\n width: 100,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sorter: true,\n sortField: 'dr',\n width: 80,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n width: 110,\n align: 'center' as 'center',\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readAbility',\n dataIndex: 'readAbility',\n align: 'center' as 'center',\n width: 110,\n render: (_, data) => {\n return {data?.readAbility ? data?.readAbility : '-'};\n },\n\n },\n ];\n\n const topCompetitorColumns = [\n {\n title: 'SITE / URL',\n dataIndex: 'hostname',\n key: 'hostname',\n width: 300,\n align: 'left' as 'left',\n fixed: 'left' as 'left',\n render: (_, data) => {\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sortField: 'dr',\n sorter: true,\n width: 60,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n align: 'center' as 'center',\n width: 100,\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readability',\n dataIndex: 'readability',\n align: 'center' as 'center',\n width: 170,\n render: (_, data) => {\n return {data?.readability ? data?.readability : '-'};\n },\n\n },\n ];\n\n const squareTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n );\n\n const SimilarKeywordConfig = [\n {\n title: 'KEYWORD',\n dataIndex: 'keyword',\n key: 'keyword',\n align: 'left' as 'left',\n width: 240,\n render: (_, record) => {\n return ();\n },\n },\n {\n title: 'TREND',\n dataIndex: 'histSv',\n align: 'center' as 'center',\n key: 'histSv',\n width: 70,\n render: (series: EChartOption.Series[]) => {\n const formatSeries = {\n data: series,\n itemStyle: {color: '#7f4ead'},\n type: 'bar',\n };\n return {\n closeContentResearchDrawer();\n }}\n closeIcon={\n Content Research\n \n \n \n Based on Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n \n\n {loading ? :\n {keywordDetail?.countryCode ? :\n \n KD: 75 ? '#F44343' : keywordDetail?.kd < 76 && keywordDetail?.kd > 50 ? '#e4a469' : keywordDetail?.kd < 51 && keywordDetail?.kd > 25 ? '#bfe15e' : '#1d754e' : '#696777'}}>•{keywordDetail?.kd || '-'}\n }\n {loading ? : SV: {numeral(keywordDetail?.sv).format('0.[0][a]')}}\n\n {loading ? :\n Total Search Results: {keywordDetail?.totalSearchResults ? numeral(keywordDetail?.totalSearchResults).format('0.[0][a]') : '0'}}\n \n \n \n \n Ranking Potential\n {keywordDetail?.rankingPotential ?\n \n \n {keywordDetail?.rankingPotential}\n : null }\n data.date) : [],\n type: 'category',\n show: true,\n axisLabel: {\n interval: 10,\n formatter: label => {\n const date = moment(label);\n return `{month|${date.format('MMM')}}-{year|${date.format('YY')}}`;\n },\n rich: {\n month: {\n color: '#77757D',\n lineHeight: 15.54,\n },\n year: {\n color: '#77757D',\n fontSize: 12,\n lineHeight: 12.95,\n },\n },\n },\n splitLine: {\n show: false,\n },\n },\n yAxis: {\n type: 'value',\n show: true,\n axisLabel: {\n formatter: label => {\n return `${formatNumber(label)}`;\n },\n },\n splitLine: {\n lineStyle: {\n color: '#E8E8E8',\n type: 'dashed',\n width: 1},\n show: true,\n },\n },\n grid: {\n height: '70%',\n left: '10%',\n top: '9%',\n },\n series: [\n {\n data: keywordDetail?.svTrend?.map(data => data.volume) || [],\n type: 'line',\n areaStyle: {},\n symbolSize: 2,\n symbol: '',\n },\n ],\n }} />\n }\n\n \n \n\n\n \n \n Common Citations\n {loading ? :\n \n {keywordDetail?.commonCitations?.length ? keywordDetail?.commonCitations?.map((citation, index) => {\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc?.length > 70 ?\n \n {citation?.metaDesc.substring(0, 70) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by:\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp?.metaDesc?.length > 70 ? serp?.metaDesc?.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 9 && (\n {`+${citation?.serps?.length - 9}`}\n )}\n \n : null}\n\n \n ;\n }) : No data available}\n {/* return \n \n \n \n \n Top competitor content \n\n \n \n Similar keywords \n\n \n {\n closeContentResearchDrawer();\n currentPage.setIsOpeningKwSuggestionFromContentResearch(true);\n currentPage.openCompetingFocusTermsDrawer();\n }}>View all keywords\n \n\n \n \n\n \n \n Relevant terms used by Competitors \n\n \n {loading ? : <>\n \n COMPETITOR RANK\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n Created From Scratch\n \n );\n }\n return (\n \n \n {/* {x?.hostname} */}\n \n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {keywordDetail && keywordDetail?.termsGrid?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n \n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}}\n \n \n ;\n});\n\nconst PageTitle = styled.div`\n font-weight: 600;\n margin-bottom: 10px;\n margin-left: 40px;\n font-size: 20px;\n`;\nconst Header = styled.div`\n display: flex;\n margin-bottom: 10px;\n padding-left: 40px;\n`;\n\nconst TitleContainer = styled.div`\nheight: 60px;\nbackground: #2D2F34;\npadding: 18px;\nborder-radius: 8px 8px 0px 0px;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n line-height: 22px;\n`;\n\nconst SectionHeader = styled.div`\n background: #F7F7F8;\n border-radius: 3px;\n margin-right: 4px;\n margin-left: 4px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst MiddleContainer = styled.div`\n display: flex;\n padding: 0 40px 30px 40px;\n`;\n\nconst Square = styled.div<{ isHovered: boolean }>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\n\nconst Site = styled.div`\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n font-size: 12px;\n color: #2D6CCA;\n width: 40px;\n display: flex;\n align-items: center;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import KeywordDetailContent from '@/components/dashboard/pages/keyword-researcher-v2/keyword-detail-drawer-content';\nimport {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react-lite';\n\nexport const KeywordsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n\n return {\n // scroll to related keywords table automaticaly\n if (visible) {\n if (currentPage?.isDrawerFromCa) {\n document.getElementById('SuggestedKeywordTableId')?.scrollIntoView({block: 'center'});\n }\n }\n }}\n onClose={() => {\n currentPage.setIsDrawerFromCa(false);\n currentPage.setIsOpenKeywordDrawer(false);\n currentPage.setActiveTargetKw('');\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={'drawerCloseIcon'}\n closeIcon={ changeView()}>\n ;\n};\n\nconst TechnicalsSwitcherContainer = styled.div`\n display: flex;\n margin-bottom: 20px;\n font-size: 12px;\n align-items: center;\n cursor: pointer;\n`;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faRotateRight} from '@fortawesome/pro-regular-svg-icons';\n\nexport const PageSpeedIndex = observer(() => {\n const secondAntIcon = \n \n Page Speed Index:\n {!currentPage?.isWordCountLoading ? <>\n {generateDotWithColor(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.status) }\n {!isNil(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score) ? <>{Math.round(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score * 100)}/100 : null}\n :\n }\n \n\n\n \n Last Fetch: \n {!currentPage?.content?.updatedAt ? : moment(currentPage?.content?.updatedAt).format('DD MMM YYYY')} \n refetchArticle(currentPage?.content?.uuid) }/>\n\n \n ;\n});\n\n\nconst Container = styled.div`\n cursor: default;\n`;\nconst SpeedIndexContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n margin-top: 5px;\n`;\nconst LastFetchContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n`;\nconst SpeedIndexDot = styled.div`\n border-radius: 2px;\n height: 4px;\n margin-left: 8px;\n margin-right: 3px;\n width: 4px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {Progress, Spin, Tooltip} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styled from 'styled-components';\nimport {getProgressColor} from '@/utils/colors';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {PageSpeedIndex} from '../PageSpeedIndex';\nimport {LoadingOutlined} from '@ant-design/icons';\n\n\nexport const TechnicalScore = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {t} = useTranslation('common');\n\n const antIcon = \n {!currentPage.isScoreLoading ? (currentPage?.analysis?.technicalScore ?? '-') : \n \n {t('technical-score')} \n \n \n \n\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n height: 30px;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst TitleAndWordCount = styled.div`\n margin-left: 10px;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {routes} from '@/utils/const';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faFileChartColumn} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Checkbox as AntdCheckbox, Form, Popover, Spin, Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {TechnicalsViewSwitcher} from '../../Common/ViewSwitcher';\nimport {TechnicalScore} from './TechnicalScore';\nimport {Checkbox} from '@/components/common-components/v2';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const HeaderSection = observer(({changeView}: Props) => {\n const [auditLoader, setAuditLoader] = useState(false);\n const [onPageAuditPopoverVisible, setOnPageAuditPopoverVisible] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {contentAuditStore: {loadContentAudit, setNewRecordId}} = useStore('');\n\n const antIconSecond = \n \n \n Select 1 to 3 Target Keywords \n \n ({\n validator(_, value) {\n const existingValues = form.getFieldsValue(true);\n if (!value || !existingValues['target-keywords']?.length) return Promise.reject(new Error('Please select at least 1 Target Keyword.'));\n if (existingValues['target-keywords']?.length && existingValues['target-keywords']?.length > 3) return Promise.reject(new Error('You can use maximum of 3 Target Keywords.'));\n\n return Promise.resolve();\n },\n })]}>\n \n \n {currentPage?.getUniqueKeywords?.map((kw, idx) => {\n return \n {kw}\n ;\n })}\n \n \n \n \n setOnPageAuditPopoverVisible(false)}>Cancel \n \n \n \n \n \n }>\n setOnPageAuditPopoverVisible(!onPageAuditPopoverVisible)} color='neonBlue' variant='ghost' mode='dark'>\n {auditLoader ? Run Complete Onpage Audit \n \n : \n \n {auditLoader ? Run Complete Onpage Audit \n \n }\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TopSeactionContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst RunPageAuditBtn = styled(Button)`\n color: #4881f0 !important;\n cursor: pointer;\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst BtnText = styled.div`\n margin-left: 5px;\n display: inline-block;\n color: #34AEF3 !important;\n font-size: 12px;\n\n // &:hover {\n // text-decoration: underline;\n // }\n`;\n\nconst PopoverWrapper = styled.div`\n\n`;\n\nconst PopoverTitle = styled.div`\n font-weight: 600;\n margin-bottom: 20px;\n`;\nconst PopoverKwContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst FormStyled = styled(Form)`\n .ant-checkbox-wrapper + .ant-checkbox-wrapper {\n margin-left: 0px;\n }\n\n .ant-checkbox-wrapper {\n line-height: 22px !important;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n`;\n\nconst PopoverBtnContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\n","import {CaretUpFilled} from '@ant-design/icons';\nimport {Col, Collapse, Row} from 'antd';\nimport {Pagination, Checkbox, Tooltip} from 'antd';\nimport classNames from 'classnames';\nimport {ReactNode, useEffect, useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport styles from './style.module.scss';\nimport {ChevronDown, ChevronUp} from 'react-feather';\nimport classnames from 'classnames';\nimport {faFilter, faCaretDown, faCaretUp} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {NextImg} from '@/utils/nextImg';\n\nimport {toJS} from 'mobx';\ninterface filters {\n label: string;\n checked: boolean;\n disabled?: boolean;\n disabledTooltip?: string;\n onChange: () => void;\n}\n\ninterface columnTitle {\n title?: string;\n sorter?: boolean;\n sortKey?: string | number;\n}\n\ninterface Props {\n className?: string;\n icon?: ReactNode;\n title?: string;\n description?: string | ReactNode;\n descriptionColor?: string;\n colTitle1?: string;\n colTitle2?: columnTitle;\n colTitle3?: string;\n colTitle4?: string;\n data?: any;\n dataRenderer?: any;\n pageSize?: any;\n footer?: ReactNode;\n isCollapse?: boolean;\n defaultActive?: boolean;\n filters?: filters[];\n plan?: any;\n warningBar?: ReactNode;\n}\n\nexport const AnalyticsCollapseCard = ({\n className,\n icon,\n title,\n description,\n descriptionColor,\n colTitle1,\n colTitle2 = {\n title: null,\n sorter: false,\n sortKey: null,\n },\n colTitle3,\n colTitle4,\n data,\n dataRenderer,\n pageSize,\n footer,\n isCollapse = true,\n defaultActive = false,\n filters,\n plan = true,\n warningBar,\n}: Props) => {\n const [pageNumber, setPageNumber] = useState(1);\n const [checkData, setCheckData] = useState(false);\n const [isFilterOpened, setIsFilterOpened] = useState(false);\n const [sortOrder, setSortOrder] = useState('');\n const [formatData, setFormatData] = useState(null);\n const [activeKey, setActiveKey] = useState(['']);\n const {t} = useTranslation('common');\n\n const getData = () => {\n if (pageSize) {\n return formatData?.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\n }\n return formatData;\n };\n useEffect(() => {\n if (getData()?.length > 0 || formatData === undefined || footer) {\n setCheckData(isCollapse);\n }\n }, [getData]);\n\n useEffect(() => {\n let newData = [];\n if (data) {\n newData = data.map(item => {\n return toJS(item);\n });\n }\n setFormatData(newData);\n }, [JSON.stringify(data)]);\n\n useEffect(() => {\n if (defaultActive) {\n setActiveKey([title]);\n }\n }, [defaultActive]);\n\n const sortData = (sortBy: string | number) => {\n const formatArray = [...data];\n if (sortOrder === '') {\n setSortOrder('desc');\n setFormatData(formatArray.sort((a, b) => {\n if (b[sortBy] < a[sortBy]) return -1;\n }));\n } else if (sortOrder === 'desc') {\n setSortOrder('asc');\n setFormatData(formatArray.sort((a, b) => {\n if (a[sortBy] < b[sortBy]) return -1;\n }));\n } else if (sortOrder === 'asc') {\n setSortOrder('');\n setFormatData(data);\n }\n };\n\n const changeActiveKey = key => {\n setActiveKey(key);\n };\n\n\n return (\n isCollapse ? (\n \n \n {icon}\n {title}\n \n \n {description}\n \n \n }\n >\n \n {warningBar && warningBar}\n {/* if we have 4 columns */}\n {colTitle3 && colTitle4 ?\n \n
:\n \n
\n }\n\n {getData()?.map((x, i) => dataRenderer(x, i))}\n \n {pageSize && (pageSize < data?.length) && (\n <>\n\n setPageNumber(pageNumber)}\n disabled={!plan}\n />\n \n )}\n {filters && filters.length >= 1 ?\n ( setIsFilterOpened(!isFilterOpened)}\n className={styles.filters}>\n {/* }\n \n \n {\n isFilterOpened && (\n e.stopPropagation()}>\n \n {filters.map((filter, idx) => (\n filter.disabled ?\n \n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n :\n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n ))\n }\n \n \n )\n }\n ) : null }\n \n {footer}\n \n \n );\n};\n","import React, {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react-lite';\nimport {Modal} from '@/components/common-components';\nimport {Divider} from 'antd';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n visible: boolean;\n schema: any;\n setShowModal: Dispatch>;\n}\n\nexport const SchemaModal = observer(({visible, schema, setShowModal}: Props) => {\n const dataList = schema ? JSON.parse(schema) : [];\n const data = (typeof (dataList) === 'object' && Object.keys(dataList).length === 0) ? [] : dataList?.find(item => item.graph) || [];\n const [expanded, setExpanded] = useState(false);\n const dataForDisplay = expanded ? data?.graph : data?.graph?.slice(0, 1);\n return (\n setShowModal(false)}\n footer={ setShowModal(false)}>Close }>\n \n\n \n Schema.org \n {<>\n @context \n {data?.context ?? '-'} \n @graph \n {dataForDisplay?.map((item, index) => {\n return <>#{index + 1} \n \n {`${x[0]}`} \n {`${x[0]}` == 'potentialAction' ? '' : (`${x[0]}` == 'url' ? {`${x[1]}`} :\n {`${typeof(x[1])!=='object' ? x[1] : '-'}`} )}\n {`${x[0]}` == 'potentialAction' ? item.potentialAction?.length > 0 && item?.potentialAction?.map((z, id) => {\n return \n {z?.type} \n {z?.queryInput} \n \n ;\n }) : ''}\n ;\n })}\n \n ;\n })}\n {data?.graph?.length > 1 ? \n setExpanded(!expanded)}>\n {expanded ? 'Hide schema' : 'Show full schema'}\n : ''}\n }\n \n \n \n\n );\n});\n\nconst MainContainer = styled.div`\n width: 100%;\n padding: 25px;\n background: #FFFFFF;\n`;\n\nconst Title = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\nconst Subtitle = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 10px;\n word-break: break-word;\n`;\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\nconst URL = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst ModalContentWrapper = styled.div`\n max-height: 70vh;\n overflow-y: auto;\n margin-top: 10px;\n // border: 1px solid #E8E8E8;\n // border-radius: 8px;\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n`;\n","import css from '../../index.module.scss';\nimport {\n Typography,\n Row,\n Col,\n Popover,\n Tooltip,\n} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport {AnalyticsCollapseCard} from '../../Common/AnalyticsCollapseCard';\nimport styles from '../style.module.scss';\nimport {useTranslation} from 'next-i18next';\nimport {getStatusColor} from '@/utils/colors';\nimport {NextImg} from '@/utils/nextImg';\n\nimport classNames from 'classnames';\nimport {Code, ExternalLink, Image,\n List,\n Video} from 'react-feather';\nimport {WarningMiniBar} from '@/components/common-components/components';\nimport {\n ButtonLink,\n} from '@/components/common-components/components';\nimport {Button} from '@/components/common-components/v2';\nimport {useState} from 'react';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {observer} from 'mobx-react-lite';\nimport {SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, SCA_PAGE_IMAGES_SHOW_MISSING_ALT, SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN} from '@/constants/events';\nimport {SchemaModal} from '../SchemaModal';\nimport {toJS} from 'mobx';\nimport {linkgraphDomain} from '@/utils/const';\n\n\nexport const TechnicalsData = observer(() => {\n const [showMissingAltText, setShowMissingAltText] = useState(false);\n const [isActiveInternalBrokenLinks, setIsActiveInternalBrokenLinks] = useState(false);\n const [isActiveExternalBrokenLinks, setIsActiveExternalBrokenLinks] = useState(false);\n const [showSchemaModal, setShowSchemaModal] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const {Title} = Typography;\n const {t} = useTranslation('common');\n\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/icon/broken-image.svg';\n // };\n\n const translateWord = (status: string) => {\n switch (status) {\n case 'Good':\n return t('good');\n case 'Average':\n return t('average');\n case 'Bad':\n return t('bad');\n case 'Missing':\n return t('missing');\n case 'Not Included':\n return 'Not Included';\n default:\n return '';\n }\n };\n\n const internalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveInternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.internal?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveInternalBrokenLinks(!isActiveInternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveInternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken internal links',\n });\n }\n },\n }];\n\n const uiFormatImageSize = (size: string) => {\n if (size) {\n let returnSize = null;\n const sizeArray = size.split('x');\n returnSize = {`x ${sizeArray[0]}`}
{sizeArray[1]};\n return returnSize;\n } else {\n return '-';\n }\n };\n\n const brokenHeaders = {currentPage?.analysis?.brokenHeaders?.map((item, i) => {\n return {item.type}{(i + 1) < currentPage?.analysis?.brokenHeaders?.length && `, `};\n })}{translateWord(currentPage?.analysis?.status?.headers)};\n\n const getMissingAltText = () => {\n if (showMissingAltText && currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '');\n } else if (currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img;\n }\n };\n\n const getMissingAltTotal = () => {\n if (!currentPage?.analysis?.images?.img?.length) return null;\n if (currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length;\n } else {\n return null;\n }\n };\n\n const generateInternalLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getInternalBrokenLinksCount || currentPage?.analysis?.getInternalBrokenLinksCount === 0) {\n const msg = currentPage?.analysis?.getInternalBrokenLinksCount > 1 || currentPage?.analysis?.getInternalBrokenLinksCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getInternalBrokenLinksCount} ${msg}`);\n if (currentPage?.analysis?.getInternalBrokenLinksCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getInternalRedirectsCount || currentPage?.analysis?.getInternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getInternalRedirectsCount > 1 || currentPage?.analysis?.getInternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getInternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.internal?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const imagesFilter = [{\n label: 'Show only missing alt text',\n checked: showMissingAltText,\n disabled: currentPage?.analysis?.images?.img?.filter(image => !image.alt || image.alt === '')?.length == 0,\n onChange: () => {\n setShowMissingAltText(!showMissingAltText);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_IMAGES_SHOW_MISSING_ALT, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for images with missing alt text',\n });\n }\n },\n }];\n\n const externalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveExternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.external?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveExternalBrokenLinks(!isActiveExternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken external links',\n });\n }\n },\n }];\n\n const generateExternallLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getExternalBrokenCount || currentPage?.analysis?.getExternalBrokenCount === 0) {\n const msg = currentPage?.analysis?.getExternalBrokenCount > 1 || currentPage?.analysis?.getExternalBrokenCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getExternalBrokenCount} ${msg}`);\n if (currentPage?.analysis?.getExternalBrokenCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getExternalRedirectsCount || currentPage?.analysis?.getExternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getExternalRedirectsCount > 1 || currentPage?.analysis?.getExternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getExternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.external?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const getExternalLinks = () => {\n if (isActiveExternalBrokenLinks && currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const getInternalLinks = () => {\n if (isActiveInternalBrokenLinks && currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const displayStatusCode = (statusCode: number) => {\n if (statusCode) {\n if (statusCode >= 200 && statusCode < 300) {\n return {statusCode};\n } else if (statusCode >= 300 && statusCode < 400) {\n return {statusCode};\n } else if (statusCode >= 400) {\n if (statusCode === 429) {\n return {statusCode};\n } else {\n return {statusCode};\n }\n }\n } else {\n return 'N/A';\n }\n };\n\n const displayFollowCode = (followCode: string) => {\n if (followCode) {\n if (followCode === 'nofollow') {\n return 'NF';\n } else {\n return DF;\n }\n } else {\n return '-';\n }\n };\n\n return <>\n \n \n \n {t('head')}\n \n {currentPage?.analysis?.metaSummary?.map(meta => {\n return (\n \n {meta.value}\n {meta.suggestion}\n \n )}\n />\n );\n })}\n \n \n {t('rich-media-tags')}\n \n \n {header.values.length && header.values.map((heading, i) => {\n return {`<${header.type}> `}\n {heading}\n {` `};\n })}\n \n }\n >\n \n
\n : \n
: \n
;\n }}\n />\n \n addDefaultSrc(e)}\n />\n \n \n {\n navigator.clipboard.writeText(image.src);\n }}>{image.src}\n \n ) : '-'}\n {image.alt || '-'}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n setShowSchemaModal(true)}>\n {t('view-schema-markups')}\n \n \n ) : (\n \n {t('view-schema-markups')}\n \n )\n }\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n \n {\n navigator.clipboard.writeText(js.src);\n }}>{js.src}\n \n )}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n ;\n});\n","import {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {HeaderSection} from './HeaderSection';\nimport {TechnicalsData} from './TechnicalsData';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Technicals = observer(({changeView}: Props) => {\n return \n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nconst DataContainer = styled.div`\n height: auto;\n overflow-y: auto;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n","import React from 'react';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport classNames from 'classnames';\n\ninterface Props {\n isSubscriber: boolean;\n store: CurrentPageStore;\n setCompetitors: (competitors: any[]) => void;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n compListCollapsed: boolean;\n}\n\nexport const KeywordSelector = ({store, isSubscriber, setActiveKw, setCompetitors, activeKw, compListCollapsed}: Props) => {\n const {Option} = Select;\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(store?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n };\n\n return \n \n {compListCollapsed ? 'Kw' : 'Keyword'}\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '250px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={classNames(styles.selectInput, compListCollapsed && styles.minified)}\n suffixIcon={ ;\n};\n","import {Checkbox} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {faCheck, faPlus} from '@fortawesome/pro-solid-svg-icons';\nimport {faSquareCheck} from '@fortawesome/pro-light-svg-icons';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {EditorState, Modifier, SelectionState, ContentState} from 'draft-js';\nimport {debounce} from 'lodash';\nimport {observer} from 'mobx-react';\nimport {useCallback, useState} from 'react';\nimport styled from 'styled-components';\n// import {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n\ninterface Props {\n activeCompetitor: any;\n htmlToDraft: any;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const HeadingsTree = observer(({\n activeCompetitor,\n htmlToDraft,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedIndexData,\n checkedIndexData}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer:\n {currentPage: {\n setCopiedHeadings,\n }}} = useStore('');\n\n\n const [addedHeadings, setAddedHeadings] = useState([]);\n const [copiedHeading, setCopiedHeading] = useState({\n tag: '',\n text: '',\n });\n\n const [filters, setFilters] = useState([\n {\n tag: 'h1',\n active: true,\n },\n {\n tag: 'h2',\n active: true,\n },\n {\n tag: 'h3',\n active: true,\n },\n {\n tag: 'h4',\n active: true,\n },\n {\n tag: 'h5',\n active: true,\n },\n {\n tag: 'h6',\n active: true,\n },\n ]);\n\n const onCheckboxChecked = (checked: boolean, tag: string) => {\n const curFilters = [...filters];\n\n const updatedFilters = curFilters.map(filter => {\n if (filter.tag == tag) {\n return {\n ...filter,\n active: checked,\n };\n } else {\n return {...filter};\n }\n });\n\n setFilters(updatedFilters);\n };\n\n const checkboxClickHandler = (e, headingContent, headingTag, idx) => {\n if (e?.target?.checked) {\n setCheckedCount(checkedCount + 1);\n const newItem = {'id': idx, 'headingContent': headingContent, 'headingTag': headingTag};\n setCheckedIndexData([...checkedIndexData, newItem]);\n } else {\n setCheckedCount(checkedCount - 1);\n\n const updatedCheckedIndexData = checkedIndexData.filter(item => item?.id !== idx);\n setCheckedIndexData(updatedCheckedIndexData);\n }\n };\n\n const handleCopyClick = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n navigator.clipboard.writeText(updatedCopiedHeadings);\n };\n\n // const [blockskMap, setBlocksMap] = useState([]);\n\n // const mapHeadingsToDraftBlockTypes = {\n // 'h1': 'header-one',\n // 'h2': 'header-twp',\n // 'h3': 'header-three',\n // 'h4': 'header-four',\n // 'h5': 'header-five',\n // 'h6': 'header-six',\n // }\n\n // useEffect(() => {\n // if (!currentPage?.getCurrentEditorState) return;\n\n // const contentState = currentPage.getCurrentEditorState.getCurrentContent();\n\n // const map = convertToRaw(contentState).blocks\n // setBlocksMap(map);\n\n // }, [currentPage?.getCurrentEditorState]);\n\n\n // const checkIfEditorContainsHeading = (text: string, type: string) => {\n // if (!blockskMap || !blockskMap.length) return false;\n\n // const included = blockskMap.find(block => block.type == mapHeadingsToDraftBlockTypes[type] && block.text == text);\n\n // return included;\n // }\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n currentPage.editContent(state, isNewDecorations);\n }, 2000);\n\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const insertText = async (textToAdd: any, headingType?: string, cleanText?: string) => {\n // NEW FLOW start\n const {contentBlocks, entityMap} = htmlToDraft(textToAdd);\n // const contentState = convertHtmlToEditorState(textToAdd);\n\n const selection = currentPage.currentEditorState.getSelection();\n\n const newSelection = new SelectionState({\n anchorKey: selection.getAnchorKey(),\n anchorOffset: selection.getEndOffset(),\n focusKey: selection.getAnchorKey(),\n focusOffset: selection.getEndOffset(),\n });\n\n\n const fragment = ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap();\n // const fragment = contentState.getCurrentContent().getBlockMap();\n\n const nonStyledState = Modifier.replaceWithFragment(\n currentPage.currentEditorState.getCurrentContent(),\n newSelection,\n fragment,\n );\n\n // WE are calculating nodes to toggle blue background on new Ai generated nodes\n let firstNewBlockId: number;\n const currentBlock = selection.getAnchorKey();\n const nextBlock = currentPage.currentEditorState.getCurrentContent().getBlockAfter(selection.getAnchorKey())?.getKey();\n\n const existingNodes = document.querySelectorAll('[data-block=\"true\"]');\n existingNodes?.forEach((elem, id) => {\n if (elem.getAttribute('data-offset-key') && elem.getAttribute('data-offset-key') == `${currentBlock}-0-0`) {\n firstNewBlockId = id + 1;\n }\n });\n\n\n const updatedState = EditorState.push(currentPage.currentEditorState, nonStyledState, 'insert-fragment');\n currentPage.setCurrentEditorState(updatedState);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('[data-block=\"true\"]');\n if (newTextElems.length) {\n for (let i = firstNewBlockId; i <= newTextElems.length; i++) {\n if (newTextElems[i]?.getAttribute('data-offset-key') && newTextElems[i]?.getAttribute('data-offset-key') != `${nextBlock}-0-0` && newTextElems[i]?.getAttribute('data-offset-key') != `${currentBlock}-0-0`) {\n newTextElems[i].classList.add('newTextBlock');\n } else {\n return;\n }\n }\n }\n }, 500);\n\n debouncedUpdate(updatedState, currentPage.analytics?.focusTerms, currentPage.focusTermsClassNames, false);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('.newTextBlock');\n if (newTextElems.length) {\n newTextElems.forEach(elem => {\n elem.classList.remove('newTextBlock');\n });\n }\n }, 3500);\n\n const curAddedHeadings = [...addedHeadings];\n const updatedAddedHeading = [];\n checkedIndexData?.map(item => {\n updatedAddedHeading?.push({type: item?.headingTag, text: item?.headingContent});\n });\n if (headingType && cleanText) {\n setAddedHeadings([\n ...curAddedHeadings,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n } else {\n setAddedHeadings([\n ...curAddedHeadings,\n ...updatedAddedHeading,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n }\n // NEW FLOW END\n };\n\n const addHeadingsHandler = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n insertText(`${updatedCopiedHeadings}`);\n setShowBulkAddContentBtn(true);\n setCheckedCount(0);\n setCheckedIndexData([]);\n };\n\n return \n Page structure\n \n \n {filters.map((filter, idx) => {\n if (activeCompetitor?.headingsHierarchy?.find(heading => heading.tag == filter.tag)) {\n return onCheckboxChecked(e.target.checked, filter.tag)}\n key={idx}>\n {filter.tag}\n ;\n }\n })}\n \n {showBulkAddContentBtn && setShowBulkAddContentBtn(false)}> Bulk Add to Content }\n \n {!showBulkAddContentBtn &&\n \n {\n addHeadingsHandler();\n }}> \n \n Copy to clipboard\n }> {\n handleCopyClick();\n }}> Copy \n {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}> Cancel \n \n }\n \n {activeCompetitor?.headingsHierarchy?.filter(heading => filters.filter(filter => filter.active)?.map(filter => filter.tag)?.includes(heading.tag))?.map((heading, idx) => {\n const isIncluded = [...addedHeadings].filter(item => item.text == heading.content && item.type == heading.tag)?.length > 0;\n return \n {!showBulkAddContentBtn && checkboxClickHandler(e, heading.content, heading.tag, idx)} />\n }\n \n {isIncluded ? \n {heading.content} \n \n \n {copiedHeading.tag == heading.tag && copiedHeading.text == heading.content ? <>\n }>\n {\n navigator.clipboard.writeText(`<${heading.tag}>${heading.content}`);\n setCopiedHeading({tag: heading.tag, text: heading.content});\n }}>\n \n \n insertText(`<${heading.tag}>${heading.content}`, heading.tag, heading.content)}>\n \n \n\n ;\n })}\n \n ;\n});\nconst calculateIndent = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '15px';\n case 'h2':\n return '25px';\n case 'h3':\n return '45px';\n case 'h4':\n return '55px';\n case 'h5':\n return '65px';\n case 'h6':\n return '75px';\n }\n};\nconst getTopMargin = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '20px';\n default:\n return '0px';\n }\n};\nconst calculateFontSize = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '21px';\n case 'h2':\n return '18px';\n case 'h3':\n return '16px';\n case 'h4':\n return '14px';\n case 'h5':\n return '14px';\n case 'h6':\n return '14px';\n }\n};\nconst generateColor = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '#233A61';\n case 'h2':\n return opaqueColor('#233A61', 85);\n case 'h3':\n return opaqueColor('#233A61', 70);\n case 'h4':\n return opaqueColor('#233A61', 55);\n case 'h5':\n return opaqueColor('#233A61', 47);\n case 'h6':\n return opaqueColor('#233A61', 40);\n }\n};\n\nconst Wrapper = styled.div`\n\n`;\n\nconst ActionsWrapper = styled.div`\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 10px;\n`;\n\nconst AddHeadings = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst CopyAction = styled.div`\n font-size: 12px;\n cursor: pointer;\n`;\n\nconst CancelAction = styled.div`\n cursor: pointer;\n color: #F44343;\n`;\n\nconst FiltersWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst BulkAddAction = styled.div`\n margin-top: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst FiltersContainer = styled.div`\n display: flex;\n background: #F9F9FB;\n border: 1px solid #E8E8E8;\n border-radius: 8px;\n padding: 12px 14px;\n margin-bottom: 20px;\n width: fit-content;\n`;\n\nconst FiltersTree = styled.div`\n display: flex;\n flex-direction: column;\n`;\nconst SingleHeading = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; itemId: number; isIncluded?: boolean}>`\n display: flex;\n margin-top: ${p => p.itemId == 0 ? '0px' : getTopMargin(p.type)};\n margin-bottom: 0px;\n border-radius: 8px;\n padding: 6px 10px;\n cursor: pointer;\n align-items: center;\n width: 100%;\n opacity: ${p => p.isIncluded ? .5 : 1};\n\n .copyClass {\n display: none;\n margin-left: auto;\n }\n .copyClass.disabled {\n pointer-events: none;\n color: gray;\n }\n\n &:hover {\n background-color: ${opaqueColor('#2D6CCA', 15)};\n\n .copyClass {\n display: block;\n }\n }\n`;\nconst HeadingTag = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n border-radius: 5px;\n margin-left: ${p => calculateIndent(p.type)};\n background-color: ${p => generateColor(p.type)};\n padding: 2px 7px; \n margin-right: 10px;\n color: #fff;\n height: fit-content;\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n position: relative;\n`;\nconst HeadingText = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n color: #121212;\n font-size: ${p => calculateFontSize(p.type)};\n ${p => (p.type == 'h1' || p.type == 'h2') && 'line-height: 24px'};\n`;\n\nconst Copy = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-right: 20px;\n margin-bottom: auto;\n min-width: 50px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\nconst InsertText = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-left: 20px;\n margin-bottom: auto;\n min-width: 105px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\n\nconst CheckboxStyled = styled(Checkbox)<{tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\ntext-transform: uppercase;\n .ant-checkbox-checked {\n .ant-checkbox-inner {\n background-color: ${p => generateColor(p.tag)} !important;\n border-color: ${p => generateColor(p.tag)} !important;\n }\n }\n`;\n","import {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {KeywordSelector} from './KeywordSelector';\nimport {HeadingsTree} from './HeadingsTree';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faBars, faBarsSort} from '@fortawesome/pro-solid-svg-icons';\nimport {Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {faArrowUpRightFromSquare, faListTree} from '@fortawesome/pro-regular-svg-icons';\nimport {generateHeadingOutline} from '@/utils/blockRenderComponents';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n setCompListCollapsed: (value: boolean) => void;\n compListCollapsed: boolean;\n htmlToDraft: any;\n activeKw: string;\n setActiveKw: (value) => void;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const CompetitorHeadingsDrawerContent = observer(({\n htmlToDraft,\n setCompListCollapsed,\n compListCollapsed,\n activeKw,\n setActiveKw,\n setCheckedIndexData,\n checkedIndexData,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedHeadingsWithTags,\n checkedHeadingsWithTags}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n\n const [competitors, setCompetitors] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors ?? []);\n const [activeCompetitor, setActiveCompetitor] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n\n\n useEffect(() => {\n if (currentPage?.topRankingCompetitorActiveKw && currentPage?.analytics?.competitorsData?.length && currentPage?.analytics?.competitorsData.find(item => item.keyword == currentPage?.topRankingCompetitorActiveKw)) {\n !activeKw && setActiveKw(currentPage?.topRankingCompetitorActiveKw);\n } else if (currentPage?.analytics?.competitorsData && currentPage?.analytics?.competitorsData[0]) {\n !activeKw && setActiveKw(currentPage?.analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n }, [...(currentPage?.analytics?.competitorsData ?? ''), currentPage?.analytics?.competitorsData?.length]);\n\n useEffect(() => {\n if (toJS(currentPage).analytics?.competitorsData) {\n const contentState = currentPage.currentEditorState.getCurrentContent();\n const outline = generateHeadingOutline(contentState);\n const currentArticleOutline = [{\n title: 'Current Article Outline',\n headingsHierarchy: outline,\n isCurrentArticleOutline: true,\n }];\n\n const updatedCompetitors = toJS(currentPage).analytics.competitorsData?.map(value => {\n return {\n ...value,\n competitors: [...currentArticleOutline, ...value.competitors],\n };\n });\n setCompetitors(updatedCompetitors?.find(item => item.keyword == activeKw)?.competitors ?? []);\n if (!activeCompetitor) {\n setActiveCompetitor(toJS(currentPage.analytics?.competitorsData)?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n }\n }\n }, [currentPage.analytics?.competitorsData, activeKw, currentPage.currentEditorState]);\n\n const competitorsChangeHandler = (competitorsList: any[]) => {\n setCompetitors(competitorsList);\n\n setActiveCompetitor(competitorsList[0]);\n };\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n \n \n setCompListCollapsed(!compListCollapsed)} fontSize={20} style={{marginTop: 20, marginRight: 10, cursor: 'pointer'}}/>\n \n \n \n {competitors?.length? competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)?.map((competitor, idx) => {\n return <>\n {competitor?.isCurrentArticleOutline ?\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n :\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n {competitors?.filter(value => value?.headingsHierarchy && value?.headingsHierarchy?.length && value?.isCurrentArticleOutline)?.length ? idx : idx + 1} \n \n \n {competitor.title} \n \n {competitor.url}\n \n : null}>\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor?.url}`} style={{width: 20, height: 20}}/>\n \n \n {!compListCollapsed && \n {competitor.title} \n \n {competitor.url}\n window.open(competitor?.url, '_blank')}/>\n \n }\n \n \n };\n }) : Add atleast one target keyword to view the Heading outlines \n }\n\n \n \n \n \n\n\n ;\n});\n\nconst Wrapper = styled.div`\n padding: 10px 30px 30px;\n display: flex;\n cursor: default;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n align-items: center;\n`;\n\nconst Left = styled.div<{isCollapsed: boolean}>`\n width: ${p => p.isCollapsed ? '105px' : 'auto'};\n background: transparent;\n padding-right: 30px;\n`;\nconst Right = styled.div`\n background-color: #fff;\n width: 100%;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px rgba(0, 0, 0, 0.06);\n border-radius: 14px;\n padding: 20px 30px;\n`;\nconst CompetitorsList = styled.div`\n\n`;\nconst SingleCompetitor = styled.div<{isActive?: boolean}>`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 7px;\n padding: 9px;\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n border-radius: 8px;\n transition: background .3s ease;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n ${p => p.isActive && 'color: #fff;'}\n }\n\n :hover {\n background-color: #233A61;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n color: #fff;\n }\n }\n`;\nconst Order = styled.div`\n color: #121212;\n width: 25px;\n`;\nconst NameLogoUrl = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Logo = styled.div`\n margin-right: 10px;\n`;\nconst NameAndUrl = styled.div`\n text-align: left;\n max-width: 200px;\n`;\nconst Name = styled.div`\n color: #121212;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\nconst Url = styled.a`\n color: #2D6CCA;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n display: flex;\n font-size: 12px;\n align-items: center;\n`;\n\nconst Headingoutlines = styled.p`\n color: red;\n margin-left: 30px;\n margin-top: -9px;\n`;\n\nconst CurrentArticleOutline = styled.div<{isActive?: boolean}>`\n display: flex;\n align-items: center;\n gap: 12px;\n padding-left: 32px;\n margin-bottom: 10px;\n cursor: pointer;\n border-radius: 8px;\n ${p => p.isActive && 'color: #fff;'}\n svg {\n width: 16px;\n height: 13px;\n }\n .text {\n font-family: Inter;\n font-size: 14px;\n font-weight: 400;\n line-height: 16.94px;\n text-align: left;\n color: rgba(18, 18, 18, 1);\n ${p => p.isActive && 'color: #fff;'}\n text-decoration: underline;\n padding: 7px;\n }\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n :hover {\n background-color: #233A61;\n color: #fff;\n\n .text {\n color: #fff;\n }\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {CompetitorHeadingsDrawerContent} from './DrawerContent';\nimport {useState} from 'react';\n\ninterface Props {\n htmlToDraft: any;\n}\n\nexport const CompetitorsHeadingsDrawer = observer(({htmlToDraft}: Props) => {\n const {contentOptimizer: {currentPage: {analytics, topRankingCompetitorActiveKw, isCompetitorsHeadingsDrawerOpen, closeCompetitorsHeadingsDrawer, setCopiedHeadings}}} = useStore('');\n\n const [compListCollapsed, setCompListCollapsed] = useState(false);\n const [activeKw, setActiveKw] = useState('');\n const [showBulkAddContentBtn, setShowBulkAddContentBtn] = useState(true);\n const [checkedCount, setCheckedCount] = useState(0);\n const [checkedHeadingsWithTags, setCheckedHeadingsWithTags] = useState('');\n const [checkedIndexData, setCheckedIndexData] = useState([]);\n\n return (\n {\n closeCompetitorsHeadingsDrawer();\n if (topRankingCompetitorActiveKw && analytics?.competitorsData?.length && analytics?.competitorsData.find(item => item.keyword == topRankingCompetitorActiveKw)) {\n setActiveKw(topRankingCompetitorActiveKw);\n } else if (analytics?.competitorsData && analytics?.competitorsData[0]) {\n setActiveKw(analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}\n closeIcon={ {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }} style={{display: isCompetitorsHeadingsDrawerOpen ? 'block' : 'none'}}/>}\n className={styles.competitorsHeadingsDrawerStyle}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n >\n Headings Outline\n \n \n );\n});\n","import {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Spin} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {Analytics} from './Analytics';\nimport {CompetingFocusTermsDrawer} from './SideDrawers/CompetingFocusTermsDrawer';\nimport {ContentIdeasDrawer} from './SideDrawers/ContentIdeasDrawer';\nimport {ContentResearchDrawer} from './SideDrawers/ContentResearchDrawer/ContentResearchDrawer';\nimport {KeywordsDrawer} from './SideDrawers/KeywordsDrawer';\nimport {Technicals} from './Technicals';\nimport {CompetitorsHeadingsDrawer} from './SideDrawers/CompetitorsHeadingsDrawer';\n\nexport const SidebarContent = observer(() => {\n const [showTechnicals, setShowTechincals] = useState(false);\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const antIconSecond = setShowTechincals(!showTechnicals)}/> : setShowTechincals(!showTechnicals)}/>;\n const currentView = <>\n \n setShowTechincals(!showTechnicals)}/>\n \n \n setShowTechincals(!showTechnicals)}/>\n \n ;\n\n return \n \n \n {currentPage.isInitialPageLoad && \n }\n \n {currentView}\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n position: relative;\n`;\n\nconst TechnicalsContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute; \n width: 100%;\n left: ${p => p.showTechnicals ? 0 : '400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => p.showTechnicals ? 0 : '350px !important'};\n }\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst ContentContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute;\n width: 100%;\n left: ${p => !p.showTechnicals ? 0 : '-400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => !p.showTechnicals ? 0 : '-350px !important'};\n }\n\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst LoadingBannerContainer = styled.div`\n background-color: transparent;\n height: 25px;\n width: 100%;\n`;\nconst LongLoadingBanner = styled.div`\nbackground: rgba(84, 41, 125, 0.5);\nborder-radius: 5px;\nfont-size: 12;\nheight: 25px;\npadding-top: 2px;\nwidth: 100%;\n`;\n","import React, {useEffect, useState, useRef} from 'react';\nimport styles from './index.module.scss';\nimport {Loader} from './Utils/loader';\nimport {Error as ErrorView} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/RightSidebar/v2-sidebar/Utils/error';\nimport {Resizable} from 're-resizable';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\nimport {SidebarContent} from './SidebarContent';\n\ninterface Props {\n style?: string;\n onResizeCallback?: (width: number) => void;\n isHidden?: boolean;\n store?: CurrentPageStore;\n}\n\nexport const RightSidebarV2: React.FC = observer(({onResizeCallback, isHidden = false, store}) => {\n const {contentOptimizer: {currentPage: {isPublic, isEditorScrolled}}} = useStore('');\n const [topPosition, setTopPosition] = useState((window?.innerHeight && window?.innerHeight) > 800 ? 78 : 50);\n\n const sideBarRef = useRef(null);\n\n // This changes the width of the editor according to the with of the right sidebar\n useEffect(() => {\n const sidebarUpdate = () => {\n if (sideBarRef?.current?.clientWidth > 350 && window.innerWidth <= 1400) {\n onResizeCallback(350);\n } else if (sideBarRef?.current?.clientWidth <= 350 && window.innerWidth > 1400) {\n onResizeCallback(400);\n }\n };\n window.addEventListener('resize', sidebarUpdate);\n\n return () => {\n window.removeEventListener('resize', sidebarUpdate);\n };\n }, []);\n\n useEffect(() => {\n if (sideBarRef?.current?.clientWidth) {\n onResizeCallback(sideBarRef?.current?.clientWidth);\n }\n }, [sideBarRef?.current]);\n\n const handleScroll = () => {\n const position = window.pageYOffset;\n if (position > 0) {\n if (position <= 70) {\n setTopPosition(topPosition - position);\n } else {\n setTopPosition(0);\n }\n } else {\n setTopPosition(topPosition);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, {passive: true});\n }, []);\n\n\n return (\n \n {\n onResizeCallback(elRef.offsetWidth);\n }}\n enable={{\n top: false,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n className={styles.resize}>\n {store?.content?.isAnalyzing && !store?.content?.analyzingError && ( \n );\n});\n","import {useEffect} from 'react';\nimport {WarningOutlined} from '@ant-design/icons';\nimport {useRouter} from 'next/router';\nimport {RootStoreType, useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styles from './styles.module.scss';\n// import {Drawer} from 'antd';\nimport {EditorState, SelectionState} from 'draft-js';\nimport {mapFocusTerms, multiWordCountRegex, prepareFinalTerms} from './LeftSide/EditorSection/content-editor/utils';\nimport {decoratedState} from './LeftSide/EditorSection/content-editor/decorators';\nimport firebase from 'firebase/app';\nimport 'firebase/database';\n// import {ContentGenerator} from './ContentGenerator/ContentGenerator';\nimport {LeftSide} from './LeftSide/LeftSide';\n// import {AiOutlineDrawer} from './AiOutlineDrawer';\n// import {CaAiQuotaInfo} from '@/components/common-components/v2/CaAiQuotaInfo';\n// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {RightSidebarV2} from './RightSidebar/v2-sidebar';\nimport {MainLoader} from '@/components/common-components/v2/MainLoader';\nimport {FREDDY_EVENT_SCA_ARTICLE_CREATED, triggerFreddySurvey} from '@/utils/scripts';\nimport {headerStore} from '@/store/storeCompTest';\nexport const PageEditor = observer(\n ({rootStore, isPublic}: { rootStore: RootStoreType; isPublic: boolean }) => {\n const {contentOptimizer, settings} = rootStore;\n const {currentPage, pages, aiOutline: {\n loadAiWriterHistory,\n refetchOneClickDraftResultForArticleCreation,\n }} = contentOptimizer;\n const {\n isUploading,\n isExportingPage,\n isExportingPageLoader,\n setIsPublic,\n // isOpenContentGeneratorDrawer,\n focusTermsClassNames,\n setFocusTermsClassNames,\n // setIsOpenContentGeneratorDrawer,\n setSideBarWidth,\n setViewers,\n viewers,\n isSideBarHidden,\n isInitialEditorStateFetched,\n content,\n editTitle,\n highlights,\n } = currentPage;\n const {aiInProgress} = content;\n const {\n customer: {\n profile: {\n id,\n emailAddress,\n },\n getCustomerQuota,\n },\n } = settings;\n const resultId = contentOptimizer.aiOutline.id;\n\n const {contentOptimizer: {\n currentPage: {\n feTargetKeywords,\n isLinkActive,\n },\n aiMetaData: {\n loadAiMetaData,\n metaData,\n },\n }} = useStore('');\n\n useEffect(() => {\n if (pages?.count === 2) {\n triggerFreddySurvey(id, emailAddress, FREDDY_EVENT_SCA_ARTICLE_CREATED);\n }\n }, [pages?.count]);\n\n // const {setShowOutlinesInDrawer, v2AiOutline, showOutlinesInDrawer} = aiOutline;\n // const [allRef, setAllRef] = useState();\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n query: {uuid, newPage},\n } = useRouter();\n const {t} = useTranslation('common');\n\n\n // const setAllRefToState = element => {\n // setAllRef(element);\n // };\n\n /*\n * CONTENT EDITOR METHODS START\n */\n\n\n // We are settings initial focus terms map so we can use it for initial decoration and highlighting\n\n function moveSelectionToStart(editorState) {\n const content = editorState.getCurrentContent();\n const firstBlock = content.getFirstBlock();\n const firstKey = firstBlock.getKey();\n\n return EditorState.acceptSelection(\n editorState,\n new SelectionState({\n anchorKey: firstKey,\n anchorOffset: 0,\n focusKey: firstKey,\n focusOffset: 0,\n hasFocus: true,\n isBackward: false,\n }),\n );\n }\n\n // This method will put cursor to start of the content\n function moveFocusToStart(editorState) {\n const afterSelectionMove = moveSelectionToStart(editorState);\n return EditorState.forceSelection(\n afterSelectionMove,\n afterSelectionMove.getSelection(),\n );\n }\n\n\n // This method will do the focus terms re-mapping after we update the page content\n const updateFocusTermsState = () => {\n const sortedFocusTerms = currentPage.analytics?.focusTerms?.slice()\n .slice()\n .sort((a, b) => b.name.length - a.name.length);\n\n const internalLinksClusters = currentPage.content?.internalLinkSuggestions?.slice()?.map(item => {\n return {\n name: item.keyword,\n status: 'internal-link-suggestion',\n variations: [],\n };\n });\n\n const finalData = [];\n if (sortedFocusTerms?.length) finalData.push(...sortedFocusTerms);\n if (internalLinksClusters?.length) finalData.push(...internalLinksClusters);\n\n if (sortedFocusTerms) {\n const parts = prepareFinalTerms(sortedFocusTerms);\n const regex = multiWordCountRegex(parts, false);\n\n if (regex == null) {\n return;\n }\n\n setFocusTermsClassNames(mapFocusTerms(finalData));\n }\n };\n\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data + 1)\n .then(() => {\n dbRef.on('value', snapshot => {\n if (snapshot.exists()) {\n const data = snapshot.val();\n setViewers(data);\n }\n });\n });\n }).catch(error => {\n console.error(error);\n });\n }\n\n return () => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().cancel();\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data - 1);\n });\n }\n };\n }, []);\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().set(viewers - 1);\n }\n }, [viewers]);\n\n // useEffect(() => {\n // const newState = currentPage?.content?.formattedEditorState();\n // currentPage.setCurrentEditorState(newState);\n // setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n // }, []);\n\n\n // This useEffect is ment to fire only once initially, after we have contentLoadedAt and uuid set\n // It will do initial content populating + highlighting\n useEffect(() => {\n // this prop is used to allow/dissallow all repolls related to editing a page to happen\n currentPage.setRepollsAllowed(true);\n // we are checking current page uuid from url\n // if the response came in and populated the store they will match and only then we update the state\n // we repeat this both here and in content editor compoenent\n\n if (uuid === currentPage.content.uuid && isInitialEditorStateFetched) {\n const newState = currentPage.content?.formattedEditorState();\n const focusedState = moveFocusToStart(newState);\n currentPage.setCurrentEditorState(focusedState);\n\n // This prop is set to false only after initial editor state has been set because\n // we want to prevent the DraftJs from triggering the onChange event on page mount\n currentPage.setIsInitialEditorStateFetched(true);\n\n // This will re-map focus terms and update the state and will trigger the next useEffect\n // which will use that map to re-decorate the content\n updateFocusTermsState();\n } else {\n const newState = currentPage?.content?.formattedEditorState();\n currentPage.setCurrentEditorState(newState);\n setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentPage.contentLoadedAt, currentPage?.content?.uuid, isInitialEditorStateFetched]);\n\n useEffect(() => {\n currentPage.setRepollsAllowed(true);\n currentPage.setCurrentEditorState(decoratedState(currentPage.currentEditorState, focusTermsClassNames));\n }, [focusTermsClassNames, highlights]);\n\n\n // This is to set initial mapping of the focus terms, which is used for decorating\n useEffect(() => {\n updateFocusTermsState();\n }, [JSON.stringify(currentPage.analytics?.focusTerms?.slice()), JSON.stringify(currentPage.content?.internalLinkSuggestions?.slice())]);\n\n const loadProject = async () => {\n await pages.getAllProjects();\n };\n\n useEffect(() => {\n if (!isPublic) loadProject();\n if (isPublic) {\n setIsPublic(true);\n } else {\n setIsPublic(false);\n }\n }, []);\n\n useEffect(() => {\n if (uuid && !isPublic) {\n loadAiWriterHistory(uuid as string);\n }\n }, []);\n\n useEffect(() => {\n if (resultId) {\n setRefechForBulkArticleCreation();\n }\n }, [resultId, aiInProgress]);\n\n const setRefechForBulkArticleCreation = async () => {\n if (content.aiInProgress && resultId) {\n try {\n const now = new Date().getTime();\n await refetchOneClickDraftResultForArticleCreation(uuid, now);\n } catch (e) {\n Promise.reject(e);\n } finally {\n getCustomerQuota();\n }\n }\n };\n\n useEffect(() => {\n async function load() {\n if (uuid) {\n if (!isPublic) {\n pages.loadPages(false, pages.activeProjectId);\n }\n // this is to check if we are on initial page create screen or are we editing page\n if (!newPage) {\n await currentPage.loadPage(uuid as string);\n const targetKwArr = feTargetKeywords.map(kw => kw.keyword);\n if (content.title?.startsWith('New Document') && targetKwArr?.length) {\n const data = await loadAiMetaData(content.title, targetKwArr);\n if (data) {\n editTitle(data[0]?.metaTitle);\n }\n }\n } else {\n currentPage.initialLoadPage(uuid as string);\n }\n }\n }\n load();\n }, [uuid, currentPage.currentStep, metaData]);\n\n useEffect(() => {\n if (newPage) {\n currentPage.setNewPage(true);\n currentPage.setCurrentStep(1);\n } else {\n currentPage.setNewPage(false);\n }\n }, [newPage]);\n\n useEffect(()=> {\n headerStore.setComponent(null, false, [\n {name: '', spend: 0, total: 0, color: 'green', quotaProps: null},\n ]);\n }, []);\n\n const callBack = (width: number) => {\n if (width <= 400 && width > 0) {\n setSideBarWidth(`${width}px`);\n }\n };\n\n\n return currentPage.loading ? (\n \n {!currentPage.isLinkActive && ((currentPage.newPage && currentPage.currentStep === 1) || <>\n \n {t('error-has-ocurred')}
\n \n )}\n \n \n );\n },\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"notification\":\"styles_notification__OR6ac\",\"contactLink\":\"styles_contactLink__dGgfv\",\"success\":\"styles_success__g7z1D\",\"info\":\"styles_info__efwL4\",\"warning\":\"styles_warning__TRTcI\",\"error\":\"styles_error__PUH5a\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"customInput\":\"style_customInput__xWOlg\",\"customSelect\":\"style_customSelect__5SwsV\",\"individualCustomSelect\":\"style_individualCustomSelect__WX92V\",\"customGeneralSelect\":\"style_customGeneralSelect__OeVke\",\"user\":\"style_user__wmBrz\",\"avatar\":\"style_avatar__mO1Yn\",\"info\":\"style_info__bJG8w\",\"email\":\"style_email__7HMCL\",\"permission\":\"style_permission__eKrIo\",\"shareModal\":\"style_shareModal__tgI8u\",\"icon\":\"style_icon__7Sv9l\",\"back\":\"style_back__XA9rM\",\"header\":\"style_header__P07YH\",\"users\":\"style_users__Xet9k\",\"input\":\"style_input__CbDPX\",\"permissions\":\"style_permissions__1_Cd5\",\"notification\":\"style_notification__69SZ_\",\"checkbox\":\"style_checkbox__HLruZ\",\"inputContainer\":\"style_inputContainer__5l1dT\",\"textarea\":\"style_textarea__lBED_\",\"dropdown\":\"style_dropdown__BLJU4\",\"hideDropdown\":\"style_hideDropdown__EAZwo\",\"cancelModalButton\":\"style_cancelModalButton__0Jn_a\",\"shareModalFooter\":\"style_shareModalFooter__c_I4D\",\"suggestion\":\"style_suggestion__sQOqS\",\"name\":\"style_name__YXf18\",\"subTitle\":\"style_subTitle__hpMvF\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__bvdyc\",\"popoverDivider\":\"style_popoverDivider__7kxDv\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__f7Uga\",\"contentIdeasTitle\":\"style_contentIdeasTitle__NFfEv\",\"descriptionText\":\"style_descriptionText__lFbSB\",\"input\":\"style_input__NVKIY\",\"inputLabel\":\"style_inputLabel__di3As\",\"countrySelector\":\"style_countrySelector__RsNJa\",\"selectInput\":\"style_selectInput__bfqDn\",\"generateIdeasButton\":\"style_generateIdeasButton__wefT5\",\"generatedItemsNumb\":\"style_generatedItemsNumb__oULgy\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__Um6PF\",\"ContentIdea\":\"style_ContentIdea___8T06\",\"controlButtons\":\"style_controlButtons__3DdPK\",\"downloadButton\":\"style_downloadButton__b7Dxj\",\"copyButton\":\"style_copyButton__DS99q\",\"refreshAiOutlineBtn\":\"style_refreshAiOutlineBtn__NfuS_\",\"unsplashContainer\":\"style_unsplashContainer__tKyCE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toolbar\":\"style_toolbar__Vwy8G\",\"leftSection\":\"style_leftSection__N1651\",\"rightSection\":\"style_rightSection__E_CRH\",\"share\":\"style_share__NTvX5\",\"robotIcon\":\"style_robotIcon__d_APK\",\"contentIdeasBtnLabel\":\"style_contentIdeasBtnLabel__4qIOI\",\"shareBtnLabel\":\"style_shareBtnLabel__o5HXJ\",\"undoBtn\":\"style_undoBtn__gR9Ad\",\"redoBtn\":\"style_redoBtn__oFeoL\",\"editor\":\"style_editor__Zg73v\",\"zoom05\":\"style_zoom05__1Dz2Y\",\"zoom075\":\"style_zoom075__JA_q0\",\"zoom09\":\"style_zoom09__pWjeK\",\"zoom1\":\"style_zoom1__2IWB9\",\"zoom12\":\"style_zoom12__O5tgJ\",\"zoom15\":\"style_zoom15__3U5We\",\"zoom2\":\"style_zoom2__RtpNm\",\"expandedEditor\":\"style_expandedEditor__6u5oc\",\"divider\":\"style_divider__Y6Ylq\",\"button\":\"style_button__UOe75\",\"expandBtn\":\"style_expandBtn__eggx8\",\"copyTooltip\":\"style_copyTooltip__S3tye\",\"writeForMeContainer\":\"style_writeForMeContainer__5aagG\",\"writeForMeFeatherIcon\":\"style_writeForMeFeatherIcon__yxu8G\",\"editorTopInfo\":\"style_editorTopInfo__xoncP\",\"leftEditorTopInfo\":\"style_leftEditorTopInfo__L9LlC\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__VSP5g\",\"button\":\"style_button__QUeN9\",\"active\":\"style_active__Fv0RE\",\"urlPopup\":\"style_urlPopup__D9ZJn\",\"inputContainer\":\"style_inputContainer__bm_d7\",\"textLabel\":\"style_textLabel__IaVSL\",\"urlInput\":\"style_urlInput__hn8MM\",\"inputControlls\":\"style_inputControlls__aQiLB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__62ic4\",\"button\":\"style_button__jl08j\",\"active\":\"style_active__7OpW7\",\"urlPopup\":\"style_urlPopup__QdWSN\",\"inputContainer\":\"style_inputContainer__cNQp7\",\"textLabel\":\"style_textLabel__XLCPG\",\"urlInput\":\"style_urlInput__g2XBm\",\"inputControlls\":\"style_inputControlls___Lrie\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__q5NYO\",\"button\":\"style_button__rOfd5\",\"active\":\"style_active__8ok_g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__JEFtz\",\"button\":\"style_button__tWAPP\",\"active\":\"style_active__1Ub_o\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__vN_zL\",\"header-modal\":\"style_header-modal__zaVfr\",\"header-modal__option\":\"style_header-modal__option__uBrLT\",\"header-modal__selected\":\"style_header-modal__selected__HRX68\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__Y7Msi\",\"button\":\"style_button__qE27E\",\"active\":\"style_active__vcuPU\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7_9Fm\",\"button\":\"style_button__I4eBO\",\"active\":\"style_active__vWrUg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__F4Eq3\",\"button\":\"style_button__zXaNR\",\"active\":\"style_active__QB8X9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7hrU8\",\"button\":\"style_button__lBpTe\",\"active\":\"style_active__Vy5N_\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__ngc_6\",\"button\":\"style_button__bwqJh\",\"active\":\"style_active__pcv99\",\"urlPopup\":\"style_urlPopup__MeYFu\",\"inputContainer\":\"style_inputContainer__Yr1Ib\",\"textLabel\":\"style_textLabel__paAwp\",\"urlInput\":\"style_urlInput__u0l_s\",\"inputControlls\":\"style_inputControlls__GUFA1\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"step-one_button__LmGnF\",\"purple\":\"step-one_purple__Dr_VM\",\"teal\":\"step-one_teal__pq6oT\",\"welcome\":\"step-one_welcome__uDuo3\",\"welcomeHeader\":\"step-one_welcomeHeader__qKSL7\",\"welcomeSubHeader\":\"step-one_welcomeSubHeader__yAtvD\",\"welcomeCards\":\"step-one_welcomeCards__lU5iT\",\"welcomeCard\":\"step-one_welcomeCard__K1Ils\",\"welcomeCardHeader\":\"step-one_welcomeCardHeader__YmBsP\",\"welcomeCardSubHeader\":\"step-one_welcomeCardSubHeader__v1GbY\",\"divider\":\"step-one_divider___K9R9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"uploadForm\":\"styles_uploadForm__RQvO_\",\"urlinput\":\"styles_urlinput__NNaUR\",\"uploadBtn\":\"styles_uploadBtn__zNHxo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"keywordContainer\":\"style_keywordContainer__vPXS3\",\"keywordEditIcons\":\"style_keywordEditIcons__3jaVk\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__S1Uen\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__zFqeU\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__5qWYw\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Fg9Sz\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__UBnRt\",\"keywordLocationIcon\":\"style_keywordLocationIcon__uVBJh\",\"showIcons\":\"style_showIcons__gIQdT\",\"keywordDetailsButtonContainer\":\"style_keywordDetailsButtonContainer__nKs7u\",\"keywordDetailsIcon\":\"style_keywordDetailsIcon__6AAJ0\",\"editKwButtonContainer\":\"style_editKwButtonContainer__437ne\",\"editKwButtonIcon\":\"style_editKwButtonIcon__7aEsS\",\"keywordName\":\"style_keywordName__KZoSi\",\"targetKwContainer\":\"style_targetKwContainer__W_edh\",\"keywordMetric\":\"style_keywordMetric__BgvpY\",\"keywordMetricContainer\":\"style_keywordMetricContainer__1Xtmz\",\"expandingContainer\":\"style_expandingContainer__Ty15F\",\"expandBtn\":\"style_expandBtn__bfM2c\",\"keywordsAndSuggestionsContainer\":\"style_keywordsAndSuggestionsContainer__WHZZr\",\"collapsed\":\"style_collapsed___mhNq\",\"targetKeywordsSectionContainer\":\"style_targetKeywordsSectionContainer__MA1nu\",\"expanded\":\"style_expanded__jeR4g\",\"targetKeywordsContainer\":\"style_targetKeywordsContainer__RASzp\",\"locationToggler\":\"style_locationToggler__pes3z\",\"targetKeywordsTitle\":\"style_targetKeywordsTitle__Xiu43\",\"selectRelatedKeywords\":\"style_selectRelatedKeywords__UsR3o\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__iu89Z\",\"suggestedKwSectionTitle\":\"style_suggestedKwSectionTitle__UtMLo\",\"targetKwLoadingMsg\":\"style_targetKwLoadingMsg__vEgdP\",\"kwSuggestionsContainer\":\"style_kwSuggestionsContainer__2wt_G\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__ACSfR\",\"singleSugestedKwInnerContainer\":\"style_singleSugestedKwInnerContainer__b0ror\",\"svAndCpc\":\"style_svAndCpc__c_8wW\",\"controllsBar\":\"style_controllsBar__ALl9x\",\"clickToAdd\":\"style_clickToAdd__xtgcn\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__80skR\",\"suggestedKwTitle\":\"style_suggestedKwTitle__9QaV3\",\"closeSuggestedKW\":\"style_closeSuggestedKW__330Se\",\"secondary-text\":\"style_secondary-text__emnsR\",\"keywords\":\"style_keywords__wjpPt\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__Lm1gP\",\"cpcMetricsProgressBar\":\"style_cpcMetricsProgressBar__LTmQK\",\"focusTermPopover\":\"style_focusTermPopover__pkvY4\",\"popoverTitle\":\"style_popoverTitle__pH9eH\",\"popoverCountrySv\":\"style_popoverCountrySv__3zElP\",\"sv\":\"style_sv__qOMD7\",\"emoji\":\"style_emoji__xv7Ls\",\"popOverTitle\":\"style_popOverTitle__v_wFU\",\"competitors\":\"style_competitors__YGYr0\",\"competitor\":\"style_competitor__GWmTF\",\"popoverDivider\":\"style_popoverDivider__XCRSU\",\"headingsPopover\":\"style_headingsPopover__jTD85\",\"headingTooltipValue\":\"style_headingTooltipValue__dRrjD\",\"countrySelectorPopover\":\"style_countrySelectorPopover__RhvA2\",\"divider\":\"style_divider__0ifEI\",\"columnTitlesRow\":\"style_columnTitlesRow__oKXV2\",\"columnTitle\":\"style_columnTitle__fLfkI\",\"defaultLocationName\":\"style_defaultLocationName__K60S8\",\"locationInfo\":\"style_locationInfo__DGWFc\",\"setAsDefaultText\":\"style_setAsDefaultText__q4qk_\",\"countryReach\":\"style_countryReach__5HPf_\",\"singleCountryRow\":\"style_singleCountryRow__6YTEm\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__lSqDc\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__OhW7Z\",\"newKwFormContainer\":\"style_newKwFormContainer__ysNll\",\"addNewKwBtn\":\"style_addNewKwBtn__aHUY2\",\"addKeywordStyle\":\"style_addKeywordStyle___NjDc\",\"plusIconStyle\":\"style_plusIconStyle__dmf5B\",\"disabledBtn\":\"style_disabledBtn__z9Cbs\",\"addNewKwForm\":\"style_addNewKwForm__5iXKx\",\"newKwInputControllsContainer\":\"style_newKwInputControllsContainer__Hc69J\",\"newKwInputContainer\":\"style_newKwInputContainer__bkNBM\",\"customInputField\":\"style_customInputField__g9Ppg\",\"addNewKwBtnLabel\":\"style_addNewKwBtnLabel__SWOIT\",\"quota\":\"style_quota__MfYRt\",\"quotaValues\":\"style_quotaValues__6t772\",\"plusIcon\":\"style_plusIcon__lL8Wh\",\"newEmphasizedFormStyle\":\"style_newEmphasizedFormStyle__xmFMZ\",\"pulse-purple\":\"style_pulse-purple__P7U1V\",\"newFormStyle\":\"style_newFormStyle__lqdiW\",\"editKwForm\":\"style_editKwForm__Q_jdR\",\"editKwInputContainer\":\"style_editKwInputContainer__WBOeM\",\"editKwControllsContainer\":\"style_editKwControllsContainer__D2l73\",\"populateButton\":\"style_populateButton__aGc27\",\"confirmButton\":\"style_confirmButton__DZXoJ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentOptimizerContainer\":\"bread-crumb_contentOptimizerContainer__rqiMo\",\"divider\":\"bread-crumb_divider__VKsLJ\",\"scrolledEditor\":\"bread-crumb_scrolledEditor__4iLHS\",\"contentOptimizerHeader\":\"bread-crumb_contentOptimizerHeader__mSsmj\",\"title\":\"bread-crumb_title__8VW90\",\"back\":\"bread-crumb_back__VYwHf\",\"share\":\"bread-crumb_share__7_i4v\",\"backWrapper\":\"bread-crumb_backWrapper__XPOW2\",\"headerExtra\":\"bread-crumb_headerExtra__lVFkV\",\"kebab\":\"bread-crumb_kebab__NIs_t\",\"kebabMenu\":\"bread-crumb_kebabMenu__oJYmb\",\"kebabMenuItem\":\"bread-crumb_kebabMenuItem__YYQHl\",\"redText\":\"bread-crumb_redText__WFg6A\",\"exportBtn\":\"bread-crumb_exportBtn__qzHGF\",\"modal\":\"bread-crumb_modal__QLBQN\",\"modalTitle\":\"bread-crumb_modalTitle__0lf8D\",\"websiteLabel\":\"bread-crumb_websiteLabel__uP_MN\",\"editContainer\":\"bread-crumb_editContainer__ok1vS\",\"btn\":\"bread-crumb_btn__lZxTx\",\"exportToPdfButton\":\"bread-crumb_exportToPdfButton__HCYl1\",\"exportToDocsButton\":\"bread-crumb_exportToDocsButton__dtrrC\",\"exportDropdown\":\"bread-crumb_exportDropdown__7llmi\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerKeywords\":\"styles_headerKeywords__xxGL0\",\"popoverDivider\":\"styles_popoverDivider__zaO9y\",\"draftToolkit\":\"styles_draftToolkit__n9jPZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"content-editor_container__QYw4p\",\"left-side\":\"content-editor_left-side__l1TXd\",\"pageEditorError\":\"content-editor_pageEditorError__H_8Vw\",\"headerKeywords\":\"content-editor_headerKeywords__Nu5m7\",\"popoverDivider\":\"content-editor_popoverDivider__m2Vuv\",\"draftToolkit\":\"content-editor_draftToolkit__jDD0p\",\"loaderSpinnerContainer\":\"content-editor_loaderSpinnerContainer__3w2sl\",\"loaderSpinner\":\"content-editor_loaderSpinner__IxzP_\",\"spin\":\"content-editor_spin__6tOJb\",\"selectionTooltip\":\"content-editor_selectionTooltip__Qo0Ri\",\"arrowBottom\":\"content-editor_arrowBottom__3KZVT\",\"textInputNotification\":\"content-editor_textInputNotification__lnemm\",\"contentGeneratorDrawer\":\"content-editor_contentGeneratorDrawer__XXSAo\",\"closeIcons\":\"content-editor_closeIcons__5_3Bw\",\"outlineDrawerBackArrow\":\"content-editor_outlineDrawerBackArrow__GwHmD\",\"contentGeneratorTitle\":\"content-editor_contentGeneratorTitle__Agz_h\",\"selectedTextInfoContainer\":\"content-editor_selectedTextInfoContainer__WRKBY\",\"dataAndIcon\":\"content-editor_dataAndIcon__6OcYR\",\"textAndUrl\":\"content-editor_textAndUrl__XUxuw\",\"text\":\"content-editor_text__21AKd\",\"url\":\"content-editor_url__v_O1a\",\"textUrlControlls\":\"content-editor_textUrlControlls__thYuv\",\"urlPopup\":\"content-editor_urlPopup__gHOHE\",\"inputContainer\":\"content-editor_inputContainer__Mb2tQ\",\"textLabel\":\"content-editor_textLabel__mnezc\",\"urlInput\":\"content-editor_urlInput__2P2Tu\",\"inputControlls\":\"content-editor_inputControlls__qFkMX\",\"linkSuggestionsPopover\":\"content-editor_linkSuggestionsPopover__FFCdv\",\"extensionButton\":\"content-editor_extensionButton__bBbw0\",\"iconButton\":\"content-editor_iconButton__Cfbam\",\"ctaTitle\":\"content-editor_ctaTitle__ssOd0\",\"extensionButtonStyle\":\"content-editor_extensionButtonStyle__PN0ie\",\"closeIcon\":\"content-editor_closeIcon__UKkJM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"modal\":\"style_modal__rZesC\",\"tableOuterClusters\":\"style_tableOuterClusters__qcXJL\",\"roundEdgesTable\":\"style_roundEdgesTable__iZjyo\",\"ant-table-content\":\"style_ant-table-content__S_Fgs\",\"purpleRow\":\"style_purpleRow__bot_O\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"citationsContainer\":\"style_citationsContainer__oVqah\",\"citationsInnerContainer\":\"style_citationsInnerContainer__ZHHEU\",\"singleCitation\":\"style_singleCitation__qbxUz\",\"citationIcon\":\"style_citationIcon___x2Qc\",\"citationInfo\":\"style_citationInfo__tZ76P\",\"citationName\":\"style_citationName__pdvkB\",\"citationUrl\":\"style_citationUrl__RdI_o\",\"citationText\":\"style_citationText__BdN5t\",\"serpUsedByContainer\":\"style_serpUsedByContainer__azyj8\",\"citationSerpsContainer\":\"style_citationSerpsContainer__iipYx\",\"serpIcon\":\"style_serpIcon__w_LvR\",\"metaDescTooltip\":\"style_metaDescTooltip__nuDt4\",\"serpTooltip\":\"style_serpTooltip__QLWro\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__6RNd6\",\"serpTitle\":\"style_serpTitle__RXoga\",\"serpUrl\":\"style_serpUrl__tu4XQ\",\"emptyDataBox\":\"style_emptyDataBox__Mo6mN\",\"emptyImg\":\"style_emptyImg__9U7Nu\",\"emptyDataTitle\":\"style_emptyDataTitle__R5BVL\",\"subTitle\":\"style_subTitle__rYSu7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"questionsContainer\":\"style_questionsContainer__yjLcX\",\"questionsInnerContainer\":\"style_questionsInnerContainer__2asTx\",\"questionsNameAndCopy\":\"style_questionsNameAndCopy__lm2Dj\",\"customQuestionsName\":\"style_customQuestionsName___Vs5R\",\"serpUsedByContainer\":\"style_serpUsedByContainer__AobiD\",\"citationSerpsContainer\":\"style_citationSerpsContainer__jAx_o\",\"serpIcon\":\"style_serpIcon__6QGH4\",\"emptyDataBox\":\"style_emptyDataBox__1nQ8c\",\"emptyImg\":\"style_emptyImg__3_6YA\",\"emptyDataTitle\":\"style_emptyDataTitle__ApBiU\",\"focusTermPopover\":\"style_focusTermPopover__eCy11\",\"popOverTitle\":\"style_popOverTitle__q_bNa\",\"popoverDivider\":\"style_popoverDivider__0eu5_\",\"copyTooltip\":\"style_copyTooltip__kgoSh\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__7gwcB\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__cm2nS\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__RT8Gn\",\"copyIcon\":\"style_copyIcon__j24nu\",\"totalQuestions\":\"style_totalQuestions__2A_bv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__zQsc0\",\"limitedAccess\":\"style_limitedAccess__B2vHw\",\"flexRow\":\"style_flexRow__R2pUv\",\"quota\":\"style_quota__iFHMf\",\"focusTermDropdown\":\"style_focusTermDropdown__L17PC\",\"scoreContainer\":\"style_scoreContainer__stcBp\",\"scoreDescription\":\"style_scoreDescription__QkW_1\",\"scoreDescTitle\":\"style_scoreDescTitle__qa_Kd\",\"scoreDescText\":\"style_scoreDescText__Hprrn\",\"speedIndexContainer\":\"style_speedIndexContainer__Dejs9\",\"speedIndexDot\":\"style_speedIndexDot__ykTus\",\"refecthButtonContainer\":\"style_refecthButtonContainer__NDBTa\",\"popoverInfoContainer\":\"style_popoverInfoContainer__jZwn6\",\"customSpinner\":\"style_customSpinner__I9jMh\",\"keywords\":\"style_keywords__VUAeg\",\"keywordMetric\":\"style_keywordMetric__jFkNF\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__nk_Rf\",\"viewers\":\"style_viewers__3GdID\",\"avatar\":\"style_avatar__nAZ3X\",\"progress\":\"style_progress__Emagh\",\"smallProgress\":\"style_smallProgress__b2LvX\",\"needHelp\":\"style_needHelp__pVjFU\",\"userIcon\":\"style_userIcon__X7Oyb\",\"readabilityLetter\":\"style_readabilityLetter__RlwFP\",\"readabilityAActive\":\"style_readabilityAActive__etxiG\",\"readabilityBActive\":\"style_readabilityBActive__1xJXN\",\"readabilityCActive\":\"style_readabilityCActive__u9Z0Q\",\"readabilityDActive\":\"style_readabilityDActive__xdRpu\",\"readabilityEActive\":\"style_readabilityEActive__VQ8_a\",\"readabilitySecondary\":\"style_readabilitySecondary__2EAQH\",\"focusTermsCollapse\":\"style_focusTermsCollapse__kVGtj\",\"header\":\"style_header__YUb4w\",\"number\":\"style_number__q8kh0\",\"expandedIcon\":\"style_expandedIcon__l8nCj\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin___4hbN\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__ePTwm\",\"focusTermContent\":\"style_focusTermContent__CK3KM\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__DQAwe\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__EA8m7\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__QpYDT\",\"copyIcon\":\"style_copyIcon__3wT4i\",\"focusTermAndTags\":\"style_focusTermAndTags__Kp9wt\",\"icon\":\"style_icon__moQAn\",\"focusTermName\":\"style_focusTermName__Ly6am\",\"foundInElement\":\"style_foundInElement__tEiL_\",\"customFocusTermName\":\"style_customFocusTermName__LzC2O\",\"brandedLabel\":\"style_brandedLabel__6T1gS\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__rwsPG\",\"focusTermUsageCount\":\"style_focusTermUsageCount__1j6I7\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__qBdnF\",\"removeFocusTerms\":\"style_removeFocusTerms__07IkA\",\"removeTermLabel\":\"style_removeTermLabel__VbKWK\",\"removeTermIcon\":\"style_removeTermIcon__cKkeI\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__u3c18\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__SLkEY\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__xzq3T\",\"writingStylePopover\":\"style_writingStylePopover__sHjLJ\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__iCD9H\",\"focusTermPopover\":\"style_focusTermPopover__FKP8t\",\"innerPopover\":\"style_innerPopover__UbNja\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__RFjzG\",\"withArrow\":\"style_withArrow__I_XFV\",\"popoverTitle\":\"style_popoverTitle__lUKZy\",\"popoverCountrySv\":\"style_popoverCountrySv__geNG6\",\"sv\":\"style_sv__kQDDv\",\"emoji\":\"style_emoji__YGsrS\",\"popOverTitle\":\"style_popOverTitle__ahuD1\",\"competitors\":\"style_competitors__hwtcD\",\"competitor\":\"style_competitor__IqYyC\",\"singleCompetitor\":\"style_singleCompetitor__FwGi3\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__4CKN9\",\"snippetsContainer\":\"style_snippetsContainer__ot3Ml\",\"singleSnippet\":\"style_singleSnippet__XCQdn\",\"popoverDivider\":\"style_popoverDivider__chO8P\",\"popOverTermsTitle\":\"style_popOverTermsTitle__NKa1t\",\"headingsPopover\":\"style_headingsPopover__hbinC\",\"headingTooltipValue\":\"style_headingTooltipValue__bTPOI\",\"collapseContainer\":\"style_collapseContainer__TNTaa\",\"collapsableContainer\":\"style_collapsableContainer__HGsnN\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__MGXVA\",\"collapseButton\":\"style_collapseButton__kR3ue\",\"commonPopover\":\"style_commonPopover__kfD05\",\"editKeywordsBtn\":\"style_editKeywordsBtn__IvUg6\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__b8_ix\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__lUYBT\",\"isKeywordRemoving\":\"style_isKeywordRemoving__0Y5Pv\",\"suggestedKwContainer\":\"style_suggestedKwContainer__IrJwP\",\"svAndCpc\":\"style_svAndCpc__eV3Ml\",\"clickToAdd\":\"style_clickToAdd__Rf3jy\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__e16rv\",\"closeSuggestedKW\":\"style_closeSuggestedKW__vmyEL\",\"cancelButton\":\"style_cancelButton__vFlju\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon__hp2tW\",\"keywordContainer\":\"style_keywordContainer__o4y1J\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__HyXGY\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__n0rhQ\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__0GIsE\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Nbr1J\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__C4CXq\",\"keywordLocationIcon\":\"style_keywordLocationIcon__YjZTQ\",\"showIcons\":\"style_showIcons__PKtA1\",\"editKwButtonContainer\":\"style_editKwButtonContainer__5310p\",\"editKwButtonIcon\":\"style_editKwButtonIcon__09bVC\",\"keywordName\":\"style_keywordName__85ap5\",\"keywordMetricContainer\":\"style_keywordMetricContainer__0AxnT\",\"link\":\"style_link__vZDiF\",\"orderContentBtn\":\"style_orderContentBtn__uNKgi\",\"footerText\":\"style_footerText__iKsz1\",\"divider\":\"style_divider__mevUB\",\"viewSchemaBtn\":\"style_viewSchemaBtn__pU_vK\",\"tabs\":\"style_tabs__m6jOQ\",\"truncateText\":\"style_truncateText__hYHYr\",\"darkenTechnical\":\"style_darkenTechnical__gwrKF\",\"importUrlButton\":\"style_importUrlButton__KuVWa\",\"scoreDescHeader\":\"style_scoreDescHeader__hWDqY\",\"popOver\":\"style_popOver__f04Uy\",\"subtitle\":\"style_subtitle__OIvMk\",\"scrollBarSidebar\":\"style_scrollBarSidebar__Br9J8\",\"focusTermsExpanded\":\"style_focusTermsExpanded__6qt2U\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__9vao9\",\"selectContainer\":\"style_selectContainer___uIb5\",\"customSelectInput\":\"style_customSelectInput__eHqgt\",\"globeContainer\":\"style_globeContainer__63VkK\",\"globeIcon\":\"style_globeIcon__jyZcv\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__QGb2A\",\"countryInfo\":\"style_countryInfo__x__GX\",\"countrySearch\":\"style_countrySearch__BmySQ\",\"topDiv\":\"style_topDiv__wvomn\",\"locationArea\":\"style_locationArea__zWDch\",\"addKwBtnContainer\":\"style_addKwBtnContainer__FBfop\",\"tooltipInner\":\"style_tooltipInner___CBL_\",\"writingStyleContainer\":\"style_writingStyleContainer__keOla\",\"singleReadabilityItem\":\"style_singleReadabilityItem__Fe4pT\",\"activeReadabilityItem\":\"style_activeReadabilityItem__UpNZT\",\"prevReadabilityItem\":\"style_prevReadabilityItem__BGp7b\",\"nextReadabilityItem\":\"style_nextReadabilityItem__EGWMl\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__pUSoR\",\"addNewKwForm\":\"style_addNewKwForm__UIbcE\",\"populateButton\":\"style_populateButton__uUxBA\",\"customInputField\":\"style_customInputField__PqCdR\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs__e5i_W\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__ymRtc\",\"questionsTab\":\"style_questionsTab__BzJZ3\",\"countrySelectorPopover\":\"style_countrySelectorPopover__rkd0q\",\"columnTitlesRow\":\"style_columnTitlesRow__gDyYX\",\"columnTitle\":\"style_columnTitle__NsuCR\",\"defaultLocationName\":\"style_defaultLocationName__t5x2F\",\"locationInfo\":\"style_locationInfo__xzAIt\",\"setAsDefaultText\":\"style_setAsDefaultText__URXN3\",\"countryReach\":\"style_countryReach__Vqlx_\",\"singleCountryRow\":\"style_singleCountryRow__pNmS5\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__1cgyK\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__mvCk5\",\"copyTooltip\":\"style_copyTooltip__M8waz\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__RCmbz\",\"miniMetrics\":\"style_miniMetrics__uglSl\",\"miniMetricsLabel\":\"style_miniMetricsLabel__C7fe6\",\"miniMetricsValue\":\"style_miniMetricsValue__lweAH\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__L1MLr\",\"longLoadingBanner\":\"style_longLoadingBanner__n1_Co\",\"customSchemaBtn\":\"style_customSchemaBtn__L967y\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"linkToolTip\":\"style_linkToolTip__bhIce\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsContainer\":\"style_competitorsContainer__SfNOS\",\"competitorsInnerContainer\":\"style_competitorsInnerContainer___TbD7\",\"singleCompetitor\":\"style_singleCompetitor__U87HC\",\"competitorDetailsContainer\":\"style_competitorDetailsContainer__StWBo\",\"competitorPosition\":\"style_competitorPosition__M88ib\",\"competitorContentScore\":\"style_competitorContentScore__KDgTT\",\"competitorWordCount\":\"style_competitorWordCount__GBsaT\",\"splitter\":\"style_splitter__eGmIb\",\"progress\":\"style_progress__2Uzzo\",\"competitorIcon\":\"style_competitorIcon__FaDSp\",\"competitorInfo\":\"style_competitorInfo__V54hG\",\"competitorName\":\"style_competitorName__F92CB\",\"competitorUrl\":\"style_competitorUrl__s2401\",\"competitorText\":\"style_competitorText__Fzphu\",\"emptyDataBox\":\"style_emptyDataBox__4N8UY\",\"emptyImg\":\"style_emptyImg__CYXAU\",\"emptyDataTitle\":\"style_emptyDataTitle__Js1W9\",\"selectInput\":\"style_selectInput___gVgJ\",\"keywordChecked\":\"style_keywordChecked__C87zU\",\"ant-select\":\"style_ant-select__7CoFi\",\"ant-select-disabled\":\"style_ant-select-disabled__ju49Y\",\"ant-select-selector\":\"style_ant-select-selector__r_4up\",\"ant-select-single\":\"style_ant-select-single__R__La\",\"ant-select-customize-input\":\"style_ant-select-customize-input__4fC4G\",\"tooltipOverlay\":\"style_tooltipOverlay__6zcSe\",\"competitorTooltipUrl\":\"style_competitorTooltipUrl__U2ss8\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"analyticsCollapseCard\":\"style_analyticsCollapseCard__sEtSW\",\"expandIcon\":\"style_expandIcon__nKE6c\",\"header\":\"style_header__hnfX_\",\"headerRight\":\"style_headerRight__YroUz\",\"title\":\"style_title__ICalb\",\"divider\":\"style_divider__zJoLJ\",\"colTitle\":\"style_colTitle__nPW60\",\"pageText\":\"style_pageText__eXO_c\",\"analyticsHideArrow\":\"style_analyticsHideArrow__dF_7X\",\"paginationStyle\":\"style_paginationStyle__DHqNy\",\"singlePageBlur\":\"style_singlePageBlur__xKJPI\",\"filters\":\"style_filters__l5Lmi\",\"filtersText\":\"style_filtersText__Ri9O_\",\"filtersItems\":\"style_filtersItems__wtY3s\",\"chevron\":\"style_chevron__PPxCQ\",\"OptionContainer\":\"style_OptionContainer__9w4R7\",\"checkboxLabel\":\"style_checkboxLabel__mF6_s\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__DXBXv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorIcon\":\"style_competitorIcon__77Of4\",\"pageTitleUrl\":\"style_pageTitleUrl__l8xBO\",\"selectInput\":\"style_selectInput__bKQhM\",\"tableOuterPages\":\"style_tableOuterPages__AgusG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__l3WUN\",\"truncate\":\"style_truncate__5_fss\",\"tabsContainer\":\"style_tabsContainer__UYJo0\",\"tooltipContent\":\"style_tooltipContent__yIv6r\",\"title\":\"style_title__vbncV\",\"stat\":\"style_stat__2U44j\",\"label\":\"style_label__oCj7Z\",\"value\":\"style_value__OatCd\",\"competingTermsDrawerStyle\":\"style_competingTermsDrawerStyle__98Cfv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"selectInput\":\"style_selectInput__RDSGZ\",\"minified\":\"style_minified__rLAna\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsHeadingsDrawerStyle\":\"style_competitorsHeadingsDrawerStyle__ejLJA\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__fymKP\",\"popoverDivider\":\"style_popoverDivider__TIZ7J\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__4jpzP\",\"contentIdeasTitle\":\"style_contentIdeasTitle__rDNWa\",\"descriptionText\":\"style_descriptionText__dkTjD\",\"input\":\"style_input__ULYYv\",\"inputLabel\":\"style_inputLabel__ItSkl\",\"countrySelector\":\"style_countrySelector__DElA_\",\"selectInput\":\"style_selectInput__bf__m\",\"generateIdeasButton\":\"style_generateIdeasButton__AqGzy\",\"generatedItemsNumb\":\"style_generatedItemsNumb__iz2UY\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__4mBeR\",\"ContentIdea\":\"style_ContentIdea__2PlUV\",\"controlButtons\":\"style_controlButtons__YpGL7\",\"downloadButton\":\"style_downloadButton__iWffV\",\"copyButton\":\"style_copyButton___gD7q\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"overViewContainer\":\"style_overViewContainer__gRQCk\",\"title\":\"style_title__HNTaD\",\"boldTitle\":\"style_boldTitle__6f4Ii\",\"searchVolume\":\"style_searchVolume__kmSSg\",\"commonCitations\":\"style_commonCitations__g_Ylt\",\"citationScroll\":\"style_citationScroll__spbFE\",\"singleCitation\":\"style_singleCitation__0mNxO\",\"citationIcon\":\"style_citationIcon__UfZKe\",\"citationInfo\":\"style_citationInfo__fh1eJ\",\"citationName\":\"style_citationName__0_jeb\",\"citationUrl\":\"style_citationUrl____8Xs\",\"citationText\":\"style_citationText__j1sAb\",\"serpUsedByContainer\":\"style_serpUsedByContainer__82DwT\",\"citationSerpsContainer\":\"style_citationSerpsContainer__8KMGG\",\"serpIcon\":\"style_serpIcon__2dcxZ\",\"serpTooltip\":\"style_serpTooltip__mFPIs\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__tXyUj\",\"serpTitle\":\"style_serpTitle__KxJsy\",\"serpUrl\":\"style_serpUrl__oCtSk\",\"rankingContainer\":\"style_rankingContainer__V9EQL\",\"statusBar\":\"style_statusBar__qUtAS\",\"barTitle\":\"style_barTitle__yUiCm\",\"barSubTitle\":\"style_barSubTitle__ltuLr\",\"createButton\":\"style_createButton__4IncC\",\"rankingTable\":\"style_rankingTable__hRQEi\",\"firstColumnText\":\"style_firstColumnText__WROJq\",\"progress\":\"style_progress__Ft_pg\",\"dot\":\"style_dot__n0CLC\",\"topCompetitorTable\":\"style_topCompetitorTable__StrGn\",\"td\":\"style_td__vaRRm\",\"th\":\"style_th__e9zfY\",\"similarKeywordsTable\":\"style_similarKeywordsTable__53Snx\",\"paginationContainer\":\"style_paginationContainer__jJX9i\",\"titleText\":\"style_titleText__Z96eD\",\"urlText\":\"style_urlText__Qo1bK\",\"competitorImg\":\"style_competitorImg__Ct7If\",\"topTagsContainer\":\"style_topTagsContainer__30JuF\",\"topTags\":\"style_topTags__lUSuL\",\"addToProjectBtnExpanded\":\"style_addToProjectBtnExpanded___r13i\",\"addToProjectBtn\":\"style_addToProjectBtn__t13df\",\"disabledBtn\":\"style_disabledBtn__iGVvR\",\"addedToProjectBtnExpanded\":\"style_addedToProjectBtnExpanded__y3OYB\",\"iconRemove\":\"style_iconRemove__r5k98\",\"iconAdded\":\"style_iconAdded__KtJk2\",\"addedToProjectBtn\":\"style_addedToProjectBtn__AQ2cX\",\"viewAllKWButton\":\"style_viewAllKWButton__mqQ1f\",\"tooltipOverlay\":\"style_tooltipOverlay__EQTVG\",\"truncate\":\"style_truncate___oeK6\",\"contentResearchDrawerStyle\":\"style_contentResearchDrawerStyle__zXIxG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__V9bN1\",\"limitedAccess\":\"style_limitedAccess__9hmvs\",\"flexRow\":\"style_flexRow__TypB_\",\"quota\":\"style_quota__rhh52\",\"focusTermDropdown\":\"style_focusTermDropdown__AOpQn\",\"scoreContainer\":\"style_scoreContainer__loUPZ\",\"scoreDescription\":\"style_scoreDescription__fydWp\",\"scoreDescTitle\":\"style_scoreDescTitle__N5Fq9\",\"scoreDescText\":\"style_scoreDescText__49I_N\",\"speedIndexContainer\":\"style_speedIndexContainer__hpZ7E\",\"speedIndexDot\":\"style_speedIndexDot__XHb3w\",\"refecthButtonContainer\":\"style_refecthButtonContainer__jX7gt\",\"popoverInfoContainer\":\"style_popoverInfoContainer__zv0v3\",\"customSpinner\":\"style_customSpinner___6GwX\",\"keywords\":\"style_keywords__fho0v\",\"keywordMetric\":\"style_keywordMetric__8JKbU\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__UMcSb\",\"viewers\":\"style_viewers__L2oXV\",\"avatar\":\"style_avatar__fZe_c\",\"progress\":\"style_progress__JMqDz\",\"smallProgress\":\"style_smallProgress__gDgKa\",\"needHelp\":\"style_needHelp__wFCHN\",\"userIcon\":\"style_userIcon__ByzNC\",\"readabilityLetter\":\"style_readabilityLetter__hQD0j\",\"readabilityAActive\":\"style_readabilityAActive__X2_dk\",\"readabilityBActive\":\"style_readabilityBActive__fAWmd\",\"readabilityCActive\":\"style_readabilityCActive__i1lv3\",\"readabilityDActive\":\"style_readabilityDActive__VivCX\",\"readabilityEActive\":\"style_readabilityEActive__H5ftS\",\"readabilitySecondary\":\"style_readabilitySecondary__QWVvd\",\"focusTermsCollapse\":\"style_focusTermsCollapse__UdsfG\",\"header\":\"style_header__PDtnu\",\"number\":\"style_number__G29Vf\",\"expandedIcon\":\"style_expandedIcon__VyaR6\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin__fA2SL\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__PWpsl\",\"focusTermContent\":\"style_focusTermContent__erOS3\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__ih_4n\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__lXX3f\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__uE5uE\",\"copyIcon\":\"style_copyIcon__Yl1p4\",\"focusTermAndTags\":\"style_focusTermAndTags__e71fF\",\"icon\":\"style_icon__SlMha\",\"focusTermName\":\"style_focusTermName__2byG0\",\"foundInElement\":\"style_foundInElement__W0Nx4\",\"customFocusTermName\":\"style_customFocusTermName__Ms_Z_\",\"brandedLabel\":\"style_brandedLabel__RK_ob\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__z9yEJ\",\"focusTermUsageCount\":\"style_focusTermUsageCount__2P6MT\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__pHGc3\",\"removeFocusTerms\":\"style_removeFocusTerms__ERiTh\",\"removeTermLabel\":\"style_removeTermLabel__Hngc_\",\"removeTermIcon\":\"style_removeTermIcon__M1_JE\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__Oa1Mz\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__DyVeh\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__glCbD\",\"writingStylePopover\":\"style_writingStylePopover__C3ut3\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__5vHOV\",\"focusTermPopover\":\"style_focusTermPopover__VnTU3\",\"innerPopover\":\"style_innerPopover__lSYg1\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__24Dg6\",\"withArrow\":\"style_withArrow__5GtWL\",\"popoverTitle\":\"style_popoverTitle__ExoBo\",\"popoverCountrySv\":\"style_popoverCountrySv__XjYX9\",\"sv\":\"style_sv__uUHFn\",\"emoji\":\"style_emoji__YIvMa\",\"popOverTitle\":\"style_popOverTitle__QEfN0\",\"competitors\":\"style_competitors___oTWx\",\"competitor\":\"style_competitor__xaN9N\",\"singleCompetitor\":\"style_singleCompetitor__y4FaW\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__IGy_S\",\"snippetsContainer\":\"style_snippetsContainer__ujuID\",\"singleSnippet\":\"style_singleSnippet__VPWpj\",\"popoverDivider\":\"style_popoverDivider__boUZ7\",\"headingsPopover\":\"style_headingsPopover__y8sGr\",\"headingTooltipValue\":\"style_headingTooltipValue__fgpE6\",\"collapseContainer\":\"style_collapseContainer__pts2d\",\"collapsableContainer\":\"style_collapsableContainer__H44WO\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__88ikQ\",\"collapseButton\":\"style_collapseButton__so3g3\",\"commonPopover\":\"style_commonPopover__GswDO\",\"editKeywordsBtn\":\"style_editKeywordsBtn__u6kSF\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__NVC47\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__PZNMQ\",\"isKeywordRemoving\":\"style_isKeywordRemoving__juQLI\",\"suggestedKwContainer\":\"style_suggestedKwContainer__szYtD\",\"svAndCpc\":\"style_svAndCpc__KtqVX\",\"clickToAdd\":\"style_clickToAdd__GtPlI\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__uAxIa\",\"closeSuggestedKW\":\"style_closeSuggestedKW__g89NG\",\"cancelButton\":\"style_cancelButton__CSqoR\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon___PuoH\",\"keywordContainer\":\"style_keywordContainer__4fdS3\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__2uDTM\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__Num0E\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__Qqz06\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__aT7_s\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__ceI0z\",\"keywordLocationIcon\":\"style_keywordLocationIcon__eF4lH\",\"showIcons\":\"style_showIcons__iTCoZ\",\"editKwButtonContainer\":\"style_editKwButtonContainer__saLfy\",\"editKwButtonIcon\":\"style_editKwButtonIcon__gMi05\",\"keywordName\":\"style_keywordName__q2NAW\",\"keywordMetricContainer\":\"style_keywordMetricContainer___q6X_\",\"link\":\"style_link__01A4S\",\"orderContentBtn\":\"style_orderContentBtn__DE32O\",\"footerText\":\"style_footerText__s81Rx\",\"divider\":\"style_divider__kuakJ\",\"viewSchemaBtn\":\"style_viewSchemaBtn__4XAB1\",\"tabs\":\"style_tabs__yKF1D\",\"truncateText\":\"style_truncateText__uv_Dk\",\"darkenTechnical\":\"style_darkenTechnical__xbbue\",\"importUrlButton\":\"style_importUrlButton__gFSge\",\"scoreDescHeader\":\"style_scoreDescHeader__jw8OS\",\"popOver\":\"style_popOver__TgfyK\",\"subtitle\":\"style_subtitle__py_8r\",\"scrollBarSidebar\":\"style_scrollBarSidebar__7vCov\",\"focusTermsExpanded\":\"style_focusTermsExpanded__K1IrF\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__gHhKR\",\"selectContainer\":\"style_selectContainer__dc_Qg\",\"customSelectInput\":\"style_customSelectInput__4LY7U\",\"globeContainer\":\"style_globeContainer__wDM6e\",\"globeIcon\":\"style_globeIcon__Grl8C\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__a4Cas\",\"countryInfo\":\"style_countryInfo__fnbn7\",\"countrySearch\":\"style_countrySearch__67Vea\",\"topDiv\":\"style_topDiv__VdAWB\",\"locationArea\":\"style_locationArea__aoXon\",\"addKwBtnContainer\":\"style_addKwBtnContainer__fZ77F\",\"tooltipInner\":\"style_tooltipInner__vtG3X\",\"writingStyleContainer\":\"style_writingStyleContainer___9YQW\",\"singleReadabilityItem\":\"style_singleReadabilityItem__eEjir\",\"activeReadabilityItem\":\"style_activeReadabilityItem__wuJaK\",\"prevReadabilityItem\":\"style_prevReadabilityItem__Tp5ZP\",\"nextReadabilityItem\":\"style_nextReadabilityItem__bvcj1\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__q2__N\",\"addNewKwForm\":\"style_addNewKwForm__RKuU2\",\"populateButton\":\"style_populateButton__GrfTY\",\"customInputField\":\"style_customInputField__zvN4C\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs___0OIs\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__Gd2PJ\",\"questionsTab\":\"style_questionsTab__dppHa\",\"countrySelectorPopover\":\"style_countrySelectorPopover__T8e40\",\"columnTitlesRow\":\"style_columnTitlesRow__NMSYq\",\"columnTitle\":\"style_columnTitle__7VIWu\",\"defaultLocationName\":\"style_defaultLocationName__F5x15\",\"locationInfo\":\"style_locationInfo__NpXoS\",\"setAsDefaultText\":\"style_setAsDefaultText__cnlk2\",\"countryReach\":\"style_countryReach__pE0aL\",\"singleCountryRow\":\"style_singleCountryRow__pUxir\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__3i839\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__qu_SS\",\"copyTooltip\":\"style_copyTooltip__3916s\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__pm0sj\",\"miniMetrics\":\"style_miniMetrics__zV6fP\",\"miniMetricsLabel\":\"style_miniMetricsLabel__EtBkz\",\"miniMetricsValue\":\"style_miniMetricsValue__TOlMK\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__kw3Fc\",\"longLoadingBanner\":\"style_longLoadingBanner__Xqc_5\",\"customSchemaBtn\":\"style_customSchemaBtn__R0sVb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarError\":\"error_sidebarError__2cjOS\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"resize\":\"v2-sidebar_resize__QB3FU\",\"sidebar\":\"v2-sidebar_sidebar__q6cEA\",\"ant-typography\":\"v2-sidebar_ant-typography__ta5hf\",\"title\":\"v2-sidebar_title__OlAx5\",\"subTitle\":\"v2-sidebar_subTitle__LhneY\",\"secondary-text\":\"v2-sidebar_secondary-text__4LWw2\",\"divider\":\"v2-sidebar_divider__9z9OB\",\"link\":\"v2-sidebar_link___z0EU\",\"fullWidth\":\"v2-sidebar_fullWidth__k3Ujx\",\"back\":\"v2-sidebar_back__FYZmn\",\"close\":\"v2-sidebar_close__0lvVI\",\"edit\":\"v2-sidebar_edit__YifNd\",\"green\":\"v2-sidebar_green__KFjaa\",\"orange\":\"v2-sidebar_orange__cSWrx\",\"red\":\"v2-sidebar_red__JmlMA\",\"disable\":\"v2-sidebar_disable__nfA52\",\"upgradeCard\":\"v2-sidebar_upgradeCard__c27O9\",\"upgradeCardTitle\":\"v2-sidebar_upgradeCardTitle__HzPcb\",\"fullAccess\":\"v2-sidebar_fullAccess__tvMBu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__NBfKV\",\"left-side\":\"styles_left-side__LpfI5\",\"pageEditorError\":\"styles_pageEditorError__I7i3p\",\"headerKeywords\":\"styles_headerKeywords__2WBVR\",\"popoverDivider\":\"styles_popoverDivider__1cFJJ\",\"draftToolkit\":\"styles_draftToolkit__UgO6K\",\"loaderSpinnerContainer\":\"styles_loaderSpinnerContainer__unc8w\",\"loaderSpinner\":\"styles_loaderSpinner__qi_LK\",\"spin\":\"styles_spin__YiR1L\",\"selectionTooltip\":\"styles_selectionTooltip__DsvgJ\",\"arrowBottom\":\"styles_arrowBottom__usbcz\",\"textInputNotification\":\"styles_textInputNotification__5FRSY\",\"contentGeneratorDrawer\":\"styles_contentGeneratorDrawer__T7pXe\",\"closeIcons\":\"styles_closeIcons__8uuC5\",\"outlineDrawerBackArrow\":\"styles_outlineDrawerBackArrow__mEByX\",\"contentGeneratorTitle\":\"styles_contentGeneratorTitle__fm_kc\",\"selectedTextInfoContainer\":\"styles_selectedTextInfoContainer__lwCTc\",\"dataAndIcon\":\"styles_dataAndIcon__NAyfz\",\"textAndUrl\":\"styles_textAndUrl__cOjPy\",\"text\":\"styles_text__TfrwZ\",\"url\":\"styles_url__p8_St\",\"textUrlControlls\":\"styles_textUrlControlls__L9_rW\",\"urlPopup\":\"styles_urlPopup__3ZEur\",\"inputContainer\":\"styles_inputContainer__ACZFh\",\"textLabel\":\"styles_textLabel__yKZPz\",\"urlInput\":\"styles_urlInput__DVTni\",\"inputControlls\":\"styles_inputControlls__Ynfjt\",\"linkSuggestionsPopover\":\"styles_linkSuggestionsPopover__2c_Jo\"};"],"names":["notificationType","Notification","type","text","showContactSupportLink","param","settings","customer","isGHLAccount","useStore","openLiveChat","chatBtn","document","querySelector","click","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","div","className","classnames","styles","jsx","NextImg","src","span","onClick","CaAiQuotaInfo","observer","quotaUtilization","mode","size","customLabel","isMinified","colorSetup","useState","dark","textColor","light","gray","sizeSetup","small","fontSize","normal","profile","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","Wrapper","Label","ca","allowedAiContentGeneration","consumed","total","styled","_templateObject","p","_templateObject1","VideoPlayerModal","iconPath","title","subTitle","button1","videoLink","button2","FontAwesomeIcon","icon","faCheck","style","marginRight","buttonMinimize","onClickButton1","onClickButton2","button3","onClickButton3","home","videoPlayerModal","setVideoPlayerModal","minimized","setMinimized","Fragment","ModalStyled","destroyOnClose","width","display","alignSelf","visible","onClose","maskStyle","background","justifyContent","marginBottom","TitleText","SubTitleText","Button","color","variant","faArrowDownLeftAndArrowUpRightToCenter","iframe","height","frameBorder","allow","allowFullScreen","borderRadius","SmallPopupStyled","position","CloseOutlinedStyled","faArrowUpRightAndArrowDownLeftFromCenter","Modal","_templateObject3","_templateObject4","Table","props","block","blockProps","editor","getData","get","target","concat","createPortal","jsx_runtime","EditorBlock","data","tableKey","tableShape","colgroup","isArray","table","borderCollapse","margin","id","dangerouslySetInnerHTML","__html","tbody","map","row","i","tr","cell","j","element","th","border","padding","backgroundColor","textAlign","colSpan","colspan","rowSpan","rowspan","data-position","defaultValue","td","BlockImage","image","useRef","contentState","content","alt","getEntityAt","getEntity","widthImg","includes","heightImg","ref","iframeRegex","test","srcMatch","match","widthMatch","heightMatch","titleMatch","urlPattern","referrerPolicy","getNumberFromEnglishCounting","WriteForMe","htmlToDraft","contentOptimizer","currentPage","contentFragment","getCustomerQuota","isFullBtn","setIsFullBtn","currentEditorState","focusTermsClassNames","isSideBarHidden","antIcon","LoadingOutlined","spin","antIconLarge","useEffect","preventingDefaultMenu","e","stopPropagation","querySelectorAll","forEach","elem","addEventListener","removeEventListener","setTimeout","editorWrapperElem","getElementById","editorElem","clientWidth","offsetWidth","getEditorRealMargin","window","debouncedChange","debounce","state","focusTerms","isNewDecorations","editContent","debouncedUpdate","useCallback","getSelection","editorState","insertText","isBlock","firstNewBlockId","contentBlocks","entityMap","fragment","html","selection","newSelection","SelectionState","anchorKey","getKey","anchorOffset","getText","length","focusKey","focusOffset","getAnchorKey","getEndOffset","ContentState","createFromBlockArray","getBlockMap","nonStyledState","Modifier","replaceWithFragment","getCurrentContent","currentBlock","nextBlock","getBlockAfter","existingNodes","getAttribute","updatedState","EditorState","push","setCurrentEditorState","setAiTooltip","show","newTextElems","classList","add","analytics","remove","getParams","currentContent","fetchAndInsertText","action","selectedText","start","getAnchorOffset","getFocusOffset","end","getBlockForKey","isCollapsed","slice","fetchFragment","aiTooltip","Promise","reject","isTextSelected","isEmptyContent","Container","Tooltip","WriteForMeStyled","cursor","fragmentLoading","Spin","marginTop","indicator","faFeather","WriteForMeMiniStyled","BasedOn","isSelection","UsedQuota","used","_templateObject2","CustomBlock","blockRef","Option","Select","isOpen","setIsOpen","require","typesMap","hotKeysLabelMap","blockType","getType","dropdownRef","handleClickOutside","event","current","contains","onEditorChange","prevSelection","prevEditorState","forceSelection","BlockContainer","blockHeight","offsetHeight","topOffset","writeForMeTopOffset","isScaPublicPage","DropdownContainer","onContextMenu","currentValue","open","onChange","value","hasFocus","isBackward","newEditorState","RichUtils","toggleBlockType","dropdownStyle","dropdownMatchSelectWidth","suffixIcon","faCaretDown","Object","keys","idx","CustomBlock_templateObject","CustomBlock_templateObject1","Input","CommonInput","UploadFromUrlForm","store","form","Form","useForm","t","useTranslation","onUploadHandler","url","setIsCreateFromUrl","uploadFromUrl","updateContentLoadedAt","setCurrentStep","initialValues","onFinish","Item","name","rules","required","message","validator","_","isURL","require_protocol","resolve","inputType","placeholder","buttonType","loading","isUploading","Step1","setIsCreateFromScratch","setIsFirstArticleEdit","router","useRouter","onStartFromScratchClick","setIsFetchingTargetKw","analysis","clearUrl","createWithContent","createFromText","routes","landingPageOptimizer","query","uuid","undefined","shallow","br","Welcome","currentStep","styleMap","ContentEditor","getEditorState","showAiBanner","editorContainer","heroSection","lastScrollPosition","setLastScrollPosition","addHeroImageLoading","setAddHeroImageLoading","localStorage","setItem","aiOutline","aiMetaData","pages","getHeroImageById","clearFocusTermsClusters","getCurrentEditorState","zoomLevel","newPage","clearFeTargetKeywords","clearTargetKeywords","isInitialEditorStateFetched","setIsEditorScrolled","isEditorScrolled","setFocusTermsSorter","resetRepollCounters","clearAllTaData","setIsUnspashDrawerOpen","updateHeroImage","isHeroImageLoading","setContentType","clearAiOutline","isOpenAiOutlineDrawer","setIsOpenAiOutlineDrawer","clearV2AiOutline","setIsOpenAiContentToolsDrawer","clearTemplateOutlines","clearTemplates","setIsOpenAiWriterDrawer","clearOneClickIdea","clearOneClickOutlines","setAiWriter","aiWriterController","setAiTemplate","aiTemplatesController","clearMetaData","navBar","setIsDockedSider","heroImage","aiInProgress","setHeroImage","heroImageAltText","antIconOrange","windowHeight","innerHeight","showForm","label","key","removeSizeDataFromBlock","delete","set","blockMap","handleTabInTable","direction","collapsed","targetKey","targetBlock","getBlockBefore","merge","getLength","splitBlock","getLastBlock","createEmpty","setBlockType","isTargetTable","endOffset","setSelectionIfNone","getHasFocus","moveSelectionToStart","toggleInlineStyle","inlineStyle","customStyleMap","existingMatch","getCurrentInlineStyle","filter","split","toList","kebabCase","endsWith","rexp","RegExp","newString","replace","toggleListType","listType","getCurrentBlockType","handleDeleteKey","startBlock","getStartKey","endBlock","getEndKey","handleKeypressWhenSelectionNotCollapsed","toggleBlockData","newData","selectionState","newContentState","setBlockData","setIndent","listMax","indentMax","setDepth","adjustment","startKey","endKey","blocks","toSeq","skipUntil","k","takeUntil","depth","getDepth","maxDepth","newDepth","Math","max","min","selectionBefore","selectionAfter","isEditorFocus","focus","setIsEditorFocus","oneClick","getSingleUrlParam","writeWithAi","onEditorBlockTypeChange","getCurrentBlock","blockKey","currentSelection","handleChangeBlockType","keysMap","curPressKeys","checkKey","preventDefault","keyCode","multipleExist","keysArray","every","clearPressKeysArr","checkTitle","titleArray","handleAddHeroImage","targetKeywordsCount","cleanedHtml","res","loadPage","notification","error","warning","scrollTo","top","addHtmlToDocument","newHtml","hasText","reset","convertHtmlToEditorState","newBlockMap","newContent","currentEditor","blur","chars","prevBlock","firstCell","getStartOffset","firstTableKey","lastCell","lastTableKey","sameTable","startOffset","v","toOrderedMap","has","genKey","ContentBlock","Map","firstBlock","removeRange","first","butLast","subSelection","notLastTable","notFirstTable","notTable","separatorBlock","notTableStart","find","selectionKey","handlePastedText","pastedHtml","replaceText","moveFocusToEnd","getFirstBlock","blockRendererFn","contentBlock","component","editable","templateUsed","templateIcon","templateName","templateDesc","isStandaloneTool","toJS","isUseMask","onScroll","scrollTop","classNames","isExportingPage","getZoomLevel","editorHeightOffset","breadcrumbHeight","keywordsHeight","opaqueColor","alignItems","boxShadow","faBrainCircuit","fontWeight","marginLeft","faArrowRight","HeroImageWrapper","SkeletonRingLoader","HeroSection","HeroImage","ButtonsContainer","getPopupContainer","trigger","ButtonWrapper","faArrowsRotate","faICursor","faTrash","AiBanner","shouldPopulatePageHtml","Editor","editorKey","draftEditorState","scrollY","blockStyleFn","handleKeyCommand","command","offset","blockBefore","currentBlockType","acceptSelection","onBackspace","getFocusKey","float","keyBindingFn","KeyBindingUtil","hasCommandModifier","getDefaultKeyBinding","content_editor_templateObject","content_editor_templateObject1","content_editor_templateObject2","img","content_editor_templateObject3","content_editor_templateObject4","_templateObject5","User","avatar","email","isOwner","permission","onPermissionChange","activePermission","setActivePermission","Avatar","CaretDownFilled","share_modal_Option","ShareModal","pagePermissions","shareDialog","setEmail","setPermission","globalPermission","setGlobalPermission","isEditableByAnyone","handleGlobalPermissionsUpdate","location","existingPermission","existingViewPermission","isViewableByAnyone","navigator","clipboard","writeText","href","success","editPagePermissions","closeDialog","MixPanel","track","SCA_PAGE_SHARED","handleInviteUser","closeAfterSubmit","emails","warn","closable","closeIcon","faXmark","bodyStyle","Title","Head","InputContainer","V2Button","disabled","emailReg","EmailError","Body","ul","li","createdByUser","users","sort","user","toLowerCase","Divider","Footer","GrayButton","paddingBottom","paddingTop","share_modal_templateObject1","share_modal_templateObject2","share_modal_templateObject3","share_modal_templateObject4","share_modal_templateObject5","_templateObject6","_templateObject7","AiTooltip","activeOption","setActiveOption","urlCopy","setUrlCopy","setIsCopy","onLinkRemove","updatedSelection","toggleLink","sendTextToEditor","insertLinkToText","decorator","createCompositeDecorators","formatUrl","urlValue","entityKey","newContentWithEntity","createEntity","getLastCreatedEntityKey","newNewContent","textValue","withLinkText","withProperCursor","getSelectionAfter","isLinkEdit","bottom","left","onMouseDown","flexDirection","ButtonV2","paddingLeft","faEarthAmerica","faPen","isLink","faLinkSimpleSlash","word","faCopy","internalLinkSuggestions","link","keyword","trim","Popover","placement","overlayClassName","overlayStyle","SuggestionsContainerTitle","faCircleInfo","SuggestionsTitle","results","suggestion","SingleLinkContainer","Left","Link","Right","isUsed","SuggestionsMenuItem","faLink","faAngleRight","AiTooltip_templateObject","AiTooltip_templateObject1","AiTooltip_templateObject2","AiTooltip_templateObject3","AiTooltip_templateObject4","AiTooltip_templateObject5","AiTooltip_templateObject6","a","AiTooltip_templateObject7","Unsplash","contentType","UNSPLASH_ACCESS_KEY","UnsplashReact","namedExports","searchInput","onAddImage","imageUrl","onImageUpload","insertImage","accessKey","Uploader","withDefaultProps","InsertIntoApplicationUploader","onFinishedUploading","FreeStockTab","gap","Radio","RadioStyled","ImageComponent","setImagesList","historyCopyStatus","setShowSelectedHistoryImage","setShowHistoryImage","rootElement","setImagesAddedCount","imagesAddedCount","elemIdx","setElemIdx","imagesLoadedCount","setImagesLoadedCount","setShowAddHeroCheck","setShowAddToArticleCheck","setShowCopiedCheck","showAddHeroCheck","showAddToArticleCheck","showCopiedCheck","templatesHistory","currentElement","IntersectionObserver","entries","entry","intersectionRatio","unobserve","imagesLoading","item","imageList","images","root","threshold","observe","handleHistoryImageCopyClick","execCommand","result","inputs","fieldValue","selectedHistoryImageAdd","index","imgOnLoad","onMouseLeave","Col","onMouseOver","ColCardContainer","hide","ColCardImage","String","onLoad","button","copyIconWhite","viewImageCheck2","imageComponent_templateObject","imageComponent_templateObject1","ImageListComponent","buttonTitle","dummyImages","imagesDummy","setImagesDummy","imagesList","Row","gutter","overflow","maxHeight","val","CardStyle","load","Card","AICreateImagesTab","activeTab","isUnsplashDrawerOpen","setHistoryCopyStatus","aspectRatio","setAspectRatio","imagesAspectRatio","setImagesAspectRatio","isRealistic","setIsRealistic","loadAiTemplateOutlinesHistory","loadAiGeneratedImage","setDummyImages","setImageGenerateInputValue","imageGenerateInputValue","historyLoading","setCopyStatus","projects","setShowScaTopUpModal","isWhitelabel","isAllowedAiContentGenerationQuotaLimitReached","plans","showSidebarPaymentDrawer","setButtonTitle","showError","setShowError","showSelectedHistoryImage","showHistoryImage","selectSuffixIcon","filteredObj","projectId","defaultAiSettings","onGenerateBtnClick","subtitle","QuotaWrapper","QuotaInfoDetail","consumedData","totalData","heading","description","ctaLabel","showCta","customCta","isCenter","InputWrapper","CommonInputStyled","onFocus","whiteSpace","SettingContainer","SelectContainer","OptionLabel","SelectStyled","grayBackground","aspectRatioOptions","Checkbox","autoFocus","defaultChecked","checked","ModalImage","centered","footer","onOk","onCancel","ai_create_images_tab_templateObject","ai_create_images_tab_templateObject1","ai_create_images_tab_templateObject4","ai_create_images_tab_templateObject5","ai_create_images_tab_templateObject6","AddImageDrawer","checkTab","setActiveTab","handleClose","URL","queryParams","URLSearchParams","search","newURL","origin","pathname","toString","hash","history","pushState","path","Drawer","mask","maskClosable","TabsStyled","Tabs","tabBarGutter","activeKey","copyAndModifyQueryParams","TabPane","tab","AddImageDrawer_templateObject","EditorSection","isCopy","setEditorHeightOffset","setShowAiBanner","showEditAltModal","setShowEditAltModal","altText","setAltText","setElement","modalEditorStates","setModalEditorStates","hideButton","setHideButton","noFirstVisit","getItem","handleModalOpen","currentAlt","handleUpdateAlt","tagkey","attributes","blockList","next","newEntity","entity","mergeEntityData","promptForLink","pageX","pageY","closeContextMenu","headerKeywordsRef","updateKeywordsRef","isNil","isManualUpdate","debouncedHighlightingChange","decorated","changeType","acceptedTypes","decoratedState","debouncedHighlighting","errorMessage","isImportError","isCreatedFromScratch","prevOffset","blockWithLinkAtBeginning","linkKey","characterList","getCharacterList","initialSelectedText","generateSelectedText","lastWasEnd","selectedBlocks","blockArray","selectedTextFromBlocks","join","xSelection","x","prevChar","nextChar","prevEntity","nextEntity","finalPrevOffset","finalNextOffset","char","blockLength","finalAnchorOffset","rangeCount","getRangeAt","getBoundingClientRect","noEntityCase","noSelectionLeft","noSelectionTop","noSelectionBottom","tempX","clientY","clientX","linkInstance","startsWith","getLastChangeType","lastChangedBlockKey","lastChangedBlock","lastChangedBlockType","addCrossIcon","isExtensionInstalled","handleShowNotification","checkDate","getCount","date1","hoursDifference","Number","diffInMs","abs","date2","now","Date","maxWidth","checkCount","CloseOutlined","rel","transform","zIndex","InputTitle","InputStyled","ButtonsWrapper","CancelButton","ButtonStyled","EditorSection_templateObject","EditorSection_templateObject1","EditorSection_templateObject3","EditorSection_templateObject5","Header_Option","Header","blockTypeEnhancement","CaretDownOutlined","pointerEvents","UnorderedList","UnorderedListOutlined","Bold","inlineStyleEnhancement","BoldOutlined","Italic","ItalicOutlined","Underline","UnderlineOutlined","OrderedList","OrderedListOutlined","Code","CodeOutlined","Anchor","updateText","showNewUrlEditor","setShowNewUrlEditor","editorValues","setEditorValues","selectionRange","setSelectionRange","customSelection","dateRef","onkeydown","ctrlKey","shiftKey","metaKey","iconClicked","LinkOutlined","AnchorRemove","entityTypeEnhancement","removeLink","faUnlink","AddImage","openDrawer","faImage","Dragger","Upload","BrowseImage","loader","setLoader","isError","setIsError","altValue","parentElement","setImgFile","setImage","contentStateWithEntity","AtomicBlockUtils","insertAtomicBlock","formData","FormData","append","imgFile","CONTENT_ASSISTANT_API","uploadImage","ele","which","handleImageChange","selectedFile","reader","FileReader","onloadend","readAsDataURL","RequiredFileType","faTrashXmark","StyleDragger","multiple","showUploadList","customRequest","file","onDrop","getFile","dataTransfer","files","faCloudArrowUp","InputWraper","AtributeWrapper","Pwrapper","CancelBtn","AddBtn","browseFile_templateObject","browseFile_templateObject1","browseFile_templateObject2","UploadURL","imgRegex","imageFormat","urlUpload_templateObject","urlUpload_templateObject1","urlUpload_templateObject2","UploadImage","FileBtn","faFileImage","Popup","StyledInputContainer","StyledTabs","defaultActiveKey","UploadImage_templateObject2","UploadImage_templateObject3","InsertIframe","showIframeEditor","setShowIframeEditor","setUrl","contentData","iframeUrl","faRectangleCode","LargeBadge","alpha","StyledPopup","StyledUrlContainer","InsertButton","insertIframe_templateObject1","Textarea","Toolkit","isTaActive","setIsSideBarHidden","setZoomLevel","isPublic","updatingFolder","isLinkgraph","newState","undo","UndoOutlined","redo","RedoOutlined","faWandMagicSparkles","arrowPointAtCenter","faChevronRight","transition","useClickedOnPageHandler","callback","SingleKeywordDataCard","getSpecificCountryByCode","kw","keywordsFormProps","countries","Text","Typography","updateKeyword","useWatch","keywordResearcherV2","postNewKeywords","keywordDetails","loadKeywordDetailList","loadKeywordDetails","setDetailsRepolling","isKwNameEdit","setIsKwNameEdit","showLocationSelector","setShowLocationSelector","isEditDefaultLocation","setIsEditDefaultLocation","popRef","showKwErrorMsg","setShowKwErrorMsg","showMessage","r","removeTargetKeywords","err","payload","keywordsArray","feTargetKeywords","feKw","updateFeTargetKeywords","locationId","countryCode","editKeywords","response","status","allowedFocusTerms","isEmpty","setFieldsValue","postAndGetData","keywords","kwClickHandler","targetKeywords","setIsDrawerFromCa","setActiveTargetKw","setIsOpenKeywordDrawer","values","formKeyword","formatArray","preparedKeyword","kwArray","locationSelected","reach","updatelocationData","keywordForFrontendArray","JSON","stringify","SCA_PAGE_UPDATE_KEYWORD_LOCATION","locationDebouncerChange","country","updateCountriesList","openLocationSelector","searchForLocation","shouldUpdate","resetFields","faTimes","toUpperCase","overlayInnerStyle","faLocationDot","mouseLeaveDelay","mouseEnterDelay","openClassName","faArrowLeft","faSearch","faInfoCircle","faGlobe","formatNumber","faMapMarkerAlt","serpTaskStatus","Flag","code","searchVolumeFormatter","sv","Globe","globalSv","svTopCountries","indx","_countryCode","searchVolume","Progress","showInfo","strokeWidth","percent","round","trailColor","strokeColor","getProgressColor","SkeletonHorizontalLoaderGray","lightLoader","skeletonHeight","skeletonMarginTop","kd","getInverseProgressColor","costPerClickFormatter","cpc","TargetKeywords","expanded","isAddingNewKw","setIsAddingNewKw","newKwValue","setNewKwValue","kwLengthErr","setKwLengthErr","targetrKeywordsContainer","addHorizontalScroll","topScroll","leftScroll","scrollX","onscroll","deltaY","scrollLeft","newKwLocation","setNewKwLocation","popoverRef","onAddKeywordFinish","format","faPlus","numberWithCommas","textOverflow","faExclamationTriangle","SCA_PAGE_ADD_KEYWORD","SuggestedKeywordCard","isRemoving","setIsRemoving","addSuggestedKwToTargetKw","passedKw","stagedForAddingKw","SCA_PAGE_ADD_KEYWORD_SUGGESTION","removeTargetKeyword","removeSuggestedKeyword","strong","KeywordSuggestions","keywordSuggestionsContainer","showAllSuggestionsHandler","kwSuggestions","isFetchingSuggestedKw","editorText","TargetKeywordsAndSuggestions","isExpanded","setIsExpanded","containerRef","parentRef","ChevronDown","faChevronDown","faChevronsDown","faChevronUp","MetaIdeasList","metaIdeas","onIdeaUse","metaCopied","setMetaCopied","copyMetaHandler","desc","IdeasContainer","idea","SingleIdeaContainer","MetaTitle","metaTitle","MetaDesc","metaDesc","MetaIdeasList_templateObject","MetaIdeasList_templateObject1","MetaIdeasList_templateObject2","MetaIdeasList_templateObject3","MetaTagGenerator","updateMetaData","setIsExternalTitleEdit","isMetaUpdating","editTitle","setLoading","loadAiMetaData","metaData","showMetaDataModal","setShowMetaDataModal","customMetaTitle","setCustomMetaTitle","customMetaDesc","setCustomMetaDesc","showAiMetaResults","setShowAiMetaResults","antdIcon","updateMetadata","meta_title","meta_desc","checkPageTitle","regexp","aiButtonTooltipMsg","msg","generateSingleMetaIcon","metaValue","faHexagonExclamation","metaValueMinLength","metaValueMaxLength","largerThenMax","smallerThanMin","idealSize","missing","largerBy","smallerBy","statusMsg","faTriangleExclamation","faCircleCheck","updateMetaDataHandler","aiMetaDataHandler","targetKwArr","aiSuggestionMsg","metaDataTooltipContent","destroyTooltipOnHide","onVisibleChange","MetaDataBtnStyled","OneClickPublisherV2","extractOptions","wpArray","syncedAt","postStatus","synced","publishedAtUrl","topicalMapName","errorId","setErrorId","smallPageLoad","setUnsavedChanges","unsavedChangesInContent","wpPublish","fetchWpPublishData","postingData","showDataModal","setShowDataModal","publishWpPage","setShowAddSiteModal","isApiError","isShopifyApiError","updateApiError","setShowIndividualPopover","showIndividualPopover","setLoadingData","loadShopifyBlogs","blogs","creatingPage","creatingBlog","createNewShopifyPage","createNewShopifyBlog","getVendorAccounts","vendorAccounts","ottoV2Store","loadIssueTableData","ottoUrls","selectedWpSite","setSelectedWpSite","triggerSites","setTriggerSites","selectedShopifySite","setSelectedShopifySite","showWpVideo","setShowWpVideo","filteredObject","setFilteredObject","selectedUser","setSelectedUser","selectedWpSiteUsers","setSelectedWpSiteUsers","setTrigger","showSynchronizeTypeDropdown","setShowSynchronizeTypeDropdown","synchronizeType","setSynchronizeType","parent","setParent","project","setProject","reloadProjectUuid","refOne","refTwo","newBtnLabelOptions","setNewBtnLabelOptions","currentProject","offerPublishUrl","importedFromUrl","wpPublishedAtUrl","cleanWpArr","getDomain","showWpFormType","setShowWpFormType","syncWp","createNewWp","syncShopify","shopifySynced","createNewShopify","wpPostCategories","wpPostStatus","wpPostType","wpPublishedAtWebsiteId","defaultWpPostCategories","defaultWpPostStatus","defaultWpPostType","defaultWpWebsiteId","shopifyContentType","wpPostParent","shopDomain","wpWebsite","wpPostCategory","account_id","accountId","postParent","wpNewPostCategory","author","wpPostAuthorId","selectedWPsiteData","articles","updatedArticles","setShopifyInitialValues","newBtnLabel","setNewBtnLabel","syncBtnLabel","setSyncBtnLabel","Group","antdIconLarge","wpPostMetaDesc","getTopLinkUrl","getTopLinkId","publishWpPageHandler","notificationV2","topicalMapObject","obj","issueType","params","issue_type","page_size","pageSize","page","is_loading","pageId","pageUrl","postType","postAuthor","postCategories","selectedVendor","shopifySite","shop_domain","shopifyPayload","blog_title","ca_page_id","post_type","tags","new_post","permalink","getSyncedPill","SyncedPill","faCircleXmark","setFields","errors","categories","options","category","children","wpPublisherSyncSection","WpUpdatePostSection","isActive","CustomRadioButton","VideoTutorialBtn","InputsContainer","wpSyncedAt","shopifySyncedAt","wpSynced","shopifyContentUrl","WpLastSyncLeft","moment","WpSyncedPostDetails","sanitizeUrl","faUpRightFromSquare","InputLabelWrapper","FormLabel","initialValue","PurpleRadioButton","blueColor","getFieldValue","StyledFormItem","blog","on","userEmail","itemsArray","areCategoriesSame","Array","PublishButton","htmlType","wpPublisherNewPostSection","WpNewPostSection","borderRadiusTop","wpSite","OptionalTag","pattern","wordCount","wpPublishTooltipContent","WpPublishTooltipContentWrapper","ErrorNotificationContainer","ErrorNotification","textDecoration","onClickShopify","alignConfig","points","handleClick","shopifyBlogId","shopifyBlogTitle","shopifyPostType","shopifyAuthor","shopifyAccountId","shopifyTags","Dropdown","overlay","DropdownContentContainer","align","SynchronizeType","isCleanedHtmlUpdated","_content_wpPostAuthorId","faWordpressSimple","faCaretRight","isShopifyCustomer","faShopify","SynchronizeBtn","faRotate","OneClickPublisherV2_templateObject","OneClickPublisherV2_templateObject1","OneClickPublisherV2_templateObject2","OneClickPublisherV2_templateObject3","OneClickPublisherV2_templateObject4","OneClickPublisherV2_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject19","TitleEditor","languages","contentLoadedAt","isAnalyzing","isExternalTitleEdit","viewers","setShowQuickSyncModal","showQuickSyncModal","userAiSettings","updateUserAiSettings","getUserAiSettings","titleLeft","setTitleLeft","setTitle","modalUrl","setModalUrl","editPageUrl","setEditPageUrl","isCloseClicked","setIsCloseClicked","showDownloadConfirmationModal","setShowDownloadConfirmationModal","submitDisabled","setSubmitDisabled","renderWithbrowser","setRenderWithBrowser","keepContentModal","setKeepContentModal","titleContainerWidth","setTitleContainerWidth","calculateWidth","collapsedViewers","setCollapsedViewers","titleRef","getTitleLeft","urlInput","debouncedChangeFocusOut","URL_PATTERN","popupRef","language","setLanguage","defaultLanguage","onLanguageChangeHandler","option","selectSufixIcon","onEditUrlSubmit","updateUrlHandler","shouldOverwriteContent","renderWIthBrowser","SCA_PAGE_URL_UPDATE","titleWidth","ctx","createElement","getContext","measureText","formatedTitleWidth","WpInstructionsModal","WpAddSiteModal","CommonModal","EditUrlModalTitle","EditUrlModalSub","EditUrlLink","EditUrlModalButtons","CheckboxStyled","input","onBlur","readOnly","ScaArticleStatusSelectorV2","articleUuid","articleStatus","ProjectsSelector","projectName","pageUuid","minifiedVersion","EditUrlContainer","valuePropName","Loader","faArrowDownToBracket","faArrowUpFromBracket","opacity","StyledSelect","showSearch","filterOption","indexOf","onMouseEnter","lang","formatCountryCode","title_editor_templateObject","title_editor_templateObject2","title_editor_templateObject3","title_editor_templateObject4","title_editor_templateObject5","dropdownColors","grey","listItemsBackgroundColor","borderColor","BreadCrumb","headerTopRef","isKebabOpen","setIsKebabOpen","isModalOpen","setIsModalOpen","exportToDocsLoading","setExportToDocsLoading","briefAntIcon","copySuccess","setCopySuccess","clearAnalytics","isExporting","isSaving","exportToGoogledoc","deleteDialog","incrementInTotalArticle","setPageRemovedFromEditor","isAllowedPagesQuotaLimitReached","clientHeight","createPage","PAGES_API","SCA_CREATE_PAGE","exportToGoogleDocs","exportPageToGoogleDocs","PageHeader","onBack","login","backIcon","extra","ShareButton","openDialog","faShareNodes","ExportButton","faFileArrowDown","faEllipsisV","ButtonComponent","googledocLink","SCA_PAGE_EXPORT_TO_DOCS","GoogleOutlined","resp","exportArticleAsHtml","setAttribute","encodeURIComponent","body","appendChild","removeChild","allowedPages","DeleteModal","removeFromEditorCallback","h1","Btn","TopSection","minWidth","DraftToolkit","TextSuggestions","setIsTaActive","setFocusTermsForInsertion","stagingTaSuggestions","taActiveTerm","setTaActiveTerm","setStagingTaSuggestions","highlightedNodeId","setHighlightedNodeId","showOriginalBlockId","setShowOriginalBlockId","updatingTa","totalOccurances","setTotalOccurances","getElementsByClassName","class","onArrowClickHandler","updatedValues","term","order","nodesWithTerm","_higlightedNode_dataset","higlightedNode","dataset","blockIndex","elemOffset","offsetTop","Heading","blocksRenderer","blocksArray","domNode","attribs","typeDettector","onBlockStatusChange","prepDataArr","itemIndex","onDotClickHandler","updateImageStyle","replaceAll","TextContainer","regExp","isSuggestion","SingleBlockWithSuggestion","showingOriginalBlock","currNodeId","data-block-index","termIncluded","right","textTransform","parse","faRotateLeft","BlockWrapper","Controller","DotsContainer","Dot","Arrow","faArrowUp","faArrowDown","checkCurBlockStatus","highlightedNode","elementStatus","_highlightedNode_dataset","TextSuggestions_templateObject","TextSuggestions_templateObject1","TextSuggestions_templateObject2","TextSuggestions_templateObject3","TextSuggestions_templateObject4","TextSuggestions_templateObject5","TextSuggestions_templateObject6","TextSuggestions_templateObject7","TextSuggestions_templateObject8","TextSuggestions_templateObject9","TextSuggestions_templateObject10","TextSuggestions_templateObject11","TextSuggestions_templateObject12","MissingPlacementsBanner","setShow","termsWithNoSuggestions","setTermsWithNoSuggestions","getlinksForInsertion","linksAssistantSuggestions","prepArr","linksIncluded","noPlacementsTermsCount","autoAdjustOverflow","MissingPlacementsBanner_templateObject","SingleTerm","finalTermsList","setFinalTermsList","setVisible","kwUpdate","termIndex","setTermIndex","getstagingLinkSuggestions","setStagingLinkSuggestions","setLinkActiveTerm","linkActiveTerm","onTermClickHandler","curTerm","newClass","incDec","cardClick","scrollTerms","acceptedStatus","dismissedStatus","CardTitle","isTerm","faCircleX","faCircleDashed","StatusTitle","isVal","DividerLine","SuggestionCard","newItems","updateTerm","SingleTerm_templateObject","SingleTerm_templateObject1","SingleTerm_templateObject2","SingleTerm_templateObject3","SingleTerm_templateObject4","SingleTerm_templateObject6","LinksList","taLinkSuggestionLoading","setFilter","loadLinksData","expectedData","outerArray","linksData","innerArray","uniqueData","seenSet","Set","array","stringRepresentation","suggestionList","allLinks","arrayToObject","givenValue","expectedValue","internalLinkSuggestionsV2","getTerms","elements","DOMParser","parseFromString","innerText","formattedArray","arr","arrTwo","indexx","filteredValue","addData","firstTerm","LinkAssistantRightSidebar","inputValue","activeKeywordsList","setIsLinkActive","setLinksForInsertion","stagingLinkSuggestions","setIsTaUpdating","fetchLinkSuggestions","setActiveKeywordsList","updated","setUpdated","setInputValue","anyButtonClicked","setAnyButtonClicked","activeKwArr","active","onCheckboxClicked","elemId","filteredKw","findIndex","onCancelClickHandler","onSubmitHandler","finalHtmlOutput","updatedEditorState","keywordsDropdown","KeywordsDropdownContainer","OverlayTitle","addLink","allLink","urlWithProtocols","links","stringToArray","keywordNewLineReg","popoverContent","CustomTextarea","paddingToNumber","paddingToText","isKeyWordv2","autoSize","minHeight","autoSizeCheck","nativeEvent","LinkSubmitBtns","selectedLink","TaWrapper","TermsMainWrapper","TitleContainer","Description","ActionButtonsContainer","some","linkAssistantRightsideBar_templateObject","linkAssistantRightsideBar_templateObject1","linkAssistantRightsideBar_templateObject3","linkAssistantRightsideBar_templateObject4","linkAssistantRightsideBar_templateObject5","linkAssistantRightsideBar_templateObject7","viewSuggestionsOption","css","blinkAnimation","keyframes","linkAssistantRightsideBar_templateObject9","linkAssistantRightsideBar_templateObject10","linkAssistantRightsideBar_templateObject11","linkAssistantRightsideBar_templateObject12","TextSuggestionsLinks","isLinkActive","doc","TextSuggestionsLinks_templateObject","TextSuggestionsLinks_templateObject1","TextSuggestionsLinks_templateObject2","TextSuggestionsLinks_templateObject3","TextSuggestionsLinks_templateObject4","TextSuggestionsLinks_templateObject5","LeftSide","sideBarWidth","LeftSideContainer","isLinkSuggestionActive","isNewPage","LeftSide_templateObject","Error","WarningOutlined","h3","SingleCluster","SORT_DIRECTION","removingTerms","cluster","isClusterRemoving","tableData","setTableData","sortField","setSortField","sortDirection","setSortDirecion","removeClusterHandler","isBulkRemovingCluster","bulkRemoveTerms","setTerms","dataFiltered","filterDataInMemory","handleTableChange","pagination","filters","sorter","column","sortFieldName","dataSource","loadingRows","columns","dataIndex","render","record","foundIn","FoundInLabel","isBranded","formatLargeNumber","defaultSortOrder","usedCount","idealCountMax","RemoveClusterBtn","rowKey","SingleCluster_templateObject","SingleCluster_templateObject1","BulkRemoveTermsModal","clusteredTerms","setClusteredTerms","clusterToRemove","setClusterToRemove","clusterTerms","clusters","tempArr","focusTermsSorter","tempCluster","b","clusterTitle","termsArr","ModalTitle","CollapseStyled","expandIconPosition","Collapse","Panel","header","ClusterHeader","ClusterName","ClusterDesc","clusterSv","BulkRemoveTermsModal_templateObject","BulkRemoveTermsModal_templateObject1","BulkRemoveTermsModal_templateObject2","BulkRemoveTermsModal_templateObject3","BulkRemoveTermsModal_templateObject5","TermsDropdownController","onViewChange","currentView","onChangeIncludeBranded","includeBranded","onTermsFilter","onSortTerms","showExportModal","setShowExportModal","showBulkRemoveTermsModal","setShowBulkRemoveTermsModal","getTermsCount","termsFiltersSetup","setTermsFiltersSetup","handleOnSortChange","downloadFileToTxt","pageTitle","articleUrl","imagesCount","count","videosCount","videos","iframesCount","iframes","internalLinksCount","internal","externallLinksCount","external","socialCount","social","javascriptCount","js","headersSum","headers","headersCount","pageTechnicalsString","includedFocusterms","notIncludedFocusTerms","ft","requiredCountMin","questionsSting","questions","q","convertedText","Blob","createObjectURL","download","getXlsExportLink","token","getTokenFromCookies","baseUrl","getApiUrl","BaseApi","CA_ENDPOINT","termsFilterHandler","updatedTermsSetup","updatedFilteredTermsArr","tooltipStyle","isNotPublic","viewChangeDropdown","TermsViewDropdownContainer","CheckboxStyledHighlights","highlights","setHighlights","PTag","BulkRemoveTermsBtn","TermsContainer","ExportModalTitle","ExportModalDesc","ExportModalButtonsContainer","faFileSpreadsheet","faFileLines","faGoogle","TermsFilterContainer","customBackground","GroupTermsContainer","Menu","sorters","Sort","faArrowUpArrowDown","SortTxt","isRemovingFocusTerms","AddButton","setShowAddFocusTermModal","ExportBtn","AdjustBtnContainer","GearIcon","faSliders","TermsDropdownController_templateObject","TermsDropdownController_templateObject1","TermsDropdownController_templateObject2","TermsDropdownController_templateObject4","TermsDropdownController_templateObject5","TermsDropdownController_templateObject7","TermsDropdownController_templateObject9","TermsDropdownController_templateObject10","TermsDropdownController_templateObject11","TermsDropdownController_templateObject12","TermsDropdownController_templateObject13","TermsDropdownController_templateObject14","TermsDropdownController_templateObject15","TermsDropdownController_templateObject16","TermsDropdownController_templateObject17","TermsDataController","onFilter","isClustersExpanded","setIsClustersExpanded","termsSearchQuery","setTermsSearchQuery","termsSearchInputValue","setTermsSearchInputValue","secondAntIcon","handleOnClusterClick","filteredSearch","clusterName","termSearchHandler","formatInput","trimmedArr","SearchAndSort","prefix","faMagnifyingGlass","ClustersWrapper","ClustersContainer","expandedClusters","ClusterTooltipSingleRow","ClusterTooltipLabel","ClusterTooltipValue","SingleClusterContainer","activeCluster","TermsDataController_templateObject","TermsDataController_templateObject1","TermsDataController_templateObject2","TermsDataController_templateObject3","TermsDataController_templateObject4","TermsDataController_templateObject5","TermsDataController_templateObject6","TermsDataController_templateObject7","AntdInput","focusTerm","removeTermHandler","removeTerms","termContainerSetup","hoverBackground","fitTermInQuota","quote","startIndex","h5","targetKewyordsOnlyArr","getTwoGreenPercentageColor","percentage","requiredCountMax","competitors","competitor","getSiteName","hostname","snippets","snippet","normalizedScore","source","LowerSection","isAnyFocusTermLink","wikipediaLink","wikidataLink","knowledgeGraphLink","crunchbaseLink","ReferencesWrapper","ReferencesTitle","LinksWrapper","SingleLink","faWikipediaW","TermContainer","TermName","BrandedLabel","CopyIcon","FocusTermsTab_SingleTerm_templateObject","FocusTermsTab_SingleTerm_templateObject1","FocusTermsTab_SingleTerm_templateObject2","FocusTermsTab_SingleTerm_templateObject3","FocusTermsTab_SingleTerm_templateObject4","FocusTermsTab_SingleTerm_templateObject5","FocusTermsTab_SingleTerm_templateObject6","SingleTerm_templateObject7","SingleTerm_templateObject8","SingleTerm_templateObject9","SingleTerm_templateObject10","SingleTerm_templateObject11","TermsDropdowns","includedBranded","setIncludeBranded","setQuery","termsToShow","setTermsToShow","isCopied","setIsCopied","standardTerms","setStandardTerms","queryParam","prepTermsArr","filteredTerms","termsToShowParam","TopicalTermsContainer","focusMode","focusTermsExpanded","CopyButton","TermsDropdowns_templateObject","TermsDropdowns_templateObject1","TermsDropdowns_templateObject2","FocusTermsTab","includedTerms","includeMoreTerms","includeLessTerms","EmptyDataBox","FocusTermsTab_templateObject","LinkSuggestionsDropdownController","isSynced","setIsSynced","isSyncing","setIsSyncing","onLinksSync","getInternalLinkSuggestionsv2","FocusModeBtn","setFocusTermsExpanded","faDownLeftAndUpRightToCenter","faUpRightAndDownLeftFromCenter","FocusModeLabel","ExportIcon","faFileDownload","RefetrchBtnContainer","faSyncAlt","LinkSuggestionsDropdownController_templateObject","LinkSuggestionsDropdownController_templateObject2","LinkSuggestionsDropdownController_templateObject3","LinkSuggestionsDropdownController_templateObject4","SingleSuggestion","customCallback","isRemovingTerm","setIsRemovingTerm","isBookmarked","setIsBookmarked","removeInternalLinkSuggestion","bookmarkInternalLinkSuggestion","TitleAndStar","faStarSolid","faStar","SingleISugesstion_templateObject","SingleISugesstion_templateObject1","SingleISugesstion_templateObject2","SingleISugesstion_templateObject3","SingleISugesstion_templateObject4","SingleISugesstion_templateObject5","InternalLinksSuggestions","isQueried","DropdownsContainer","InternalLinkSuggestions_templateObject","SingleCitation","citation","addDefaultSrc","onError","substring","serps","serp","CommonCitations","commonCitations","SidebarTooltip","SuggestionsDataController","visibleKeywords","updateKeywords","linksDropDownFromSuggestion","showEditor","setShowEditor","hostnameEditor","EditorContainer","FormStyled","updateHostname","InputStyeld","ButtonContainer","isUpdatingHostname","UpdateButton","topMessage","HostnameContainer","HostnameLink","addProtocolToDomain","HostnameLinkBtnContainer","AddNewUrlBtn","ViewDropdownContainer","viewControlls","ViewControllsContainer","SearchAndSortWraper","SearchContainer","SuggestionsDataController_templateObject","SuggestionsDataController_templateObject1","SuggestionsDataController_templateObject3","SuggestionsDataController_templateObject4","SuggestionsDataController_templateObject5","SuggestionsDataController_templateObject6","SuggestionsDataController_templateObject7","SuggestionsDataController_templateObject9","CommonBtn","SuggestionsDataController_templateObject12","SuggestionsDataController_templateObject17","SuggestionsDataController_templateObject19","_templateObject20","_templateObject21","LinkSuggestionsTab","perc","setCurrentView","searchQuery","setSearchQuery","dataArr","setDataArr","initialDataArr","setInitialDataArr","setIsQueried","selectedOption","setSelectedOption","domain","setDomain","isVisiblePopover","setIsVisiblePopover","updateLoading","setUpdateLoading","urlsError","setUrlsError","isFetchingIntLinksSug","onDataFilter","filterDataHandler","formattedArr","customDataArr","foundLinks","n","filteredSelectedLinks","foundLink","calculateUsagePercentage","postLInkSuggestion","initValues","handleRadioChange","submitUrl","apiError","kwArr","SuggestionsBannerContainer","TooltipTitle","TooltipDescription","exportLinkIcon","Pill","StyledPopover","PopoverContentWrapper","PopoverTitle","providedUrl","AddDomainSection","DomainDetails","AddDomainTitle","AddDomainDesc","AddDomainInput","ProvideUrlsSection","ProvideUrlsDetails","ErrorMessageForURL","Dismiss","Update","onOpenChange","LinkSuggestionsTab_templateObject","LinkSuggestionsTab_templateObject1","LinkSuggestionsTab_templateObject2","LinkSuggestionsTab_templateObject3","LinkSuggestionsTab_templateObject4","LinkSuggestionsTab_templateObject6","LinkSuggestionsTab_templateObject7","LinkSuggestionsTab_templateObject8","LinkSuggestionsTab_templateObject9","LinkSuggestionsTab_templateObject10","LinkSuggestionsTab_templateObject11","LinkSuggestionsTab_templateObject12","LinkSuggestionsTab_templateObject14","LinkSuggestionsTab_templateObject15","LinkSuggestionsTab_templateObject16","LinkSuggestionsTab_templateObject18","SingleQuestion","question","aiCopied","setAiCopied","setCreatingPage","isAiGenerating","setIsAiGenerating","justify","faMessageCheck","faFilePlus","QuestionsTab","level","htmlString","string","copiedText","textContent","htmlContent","plainTextContent","copyToClipboardWithHtmlAndText","AddFocusTermModal","showAddFocusTermModal","terms","addFocusTerms","isFocusTermsLoading","handleAddFocusTerms","StyledModal","Desc","TextArea","AddFocusTermModal_templateObject1","AddFocusTermModal_templateObject2","AddFocusTermModal_templateObject3","AddFocusTermModal_templateObject4","FocusTermsTabs","setActiveKey","onChangeTab","SCA_PAGE_FOCUS_TERMS_TAB_OPEN","SCA_PAGE_QUESTIONS_TAB_OPEN","SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN","CommonTabsStyled","tabBarStyle","editorScrolled","TabTitleContainer","totalUsedTerms","totalUsedQuestions","totalUsedSuggestions","CommonTabs","CommonTabPane","FocusTermsTabs_templateObject2","SingleMetrics","tooltipLabel","showTooltip","headingData","StyledLable","StyledIcon","RangeValues","h2","h2Min","h2Max","h3Min","h3Max","internalLinks","internalLinksMin","internalLinksMax","externalLinks","externalLinksMin","externalLinksMax","isWithinRecomendedRange","SingleMetrics_templateObject","SingleMetrics_templateObject1","SingleMetrics_templateObject2","SingleMetrics_templateObject3","ContentScore","scoreCounts","scoreExtended","internalLinksData","externalLinksData","avg","h1value","h1Min","h1Max","h2value","h3value","setViewSuggestionsOption","setLinksDropDownFromSuggestion","isWordCountLoading","isScoreLoading","score","suggestedWordCountLimits","viewSuggestionHandler","shouldShowTooltip","tooltipMsg","cur","openText","scrollToText","anchorTag","scrollIntoView","behavior","countsSetup","lower","upper","paragraphs","paragraphsMin","paragraphsMax","headings","headingsMin","headingsMax","StyleHeadingsTooltipTitle","internalLinksLength","externalLinksLength","StyledLinksTabs","StyledRecommender","StyledRecomentedValue","StyledSuggestionLink","showAsLink","StyledCurrentValue","StyledFontAwesomeIcon","StyledLinksDiv","StyledLinkItem","faArrowUpRightFromSquare","ReactEcharts","grid","series","axisLine","roundCap","lineStyle","progress","startAngle","radius","endAngle","pointer","offsetCenter","itemStyle","axisTick","splitLine","distance","splitNumber","axisLabel","detail","RightSection","ContentScore_templateObject","ContentScore_templateObject1","ContentScore_templateObject2","ContentScore_templateObject5","ContentScore_templateObject6","ContentScore_templateObject7","ContentScore_templateObject8","ContentScore_templateObject9","ContentScore_templateObject10","WordCount","WordCount_templateObject","WordCount_templateObject1","HeaderSection","MiniContainer","ScoreAndWordCount","ProgressStyled","strokeLinecap","gapDegree","gapPosition","MiniTitleContainer","HeaderSection_templateObject","HeaderSection_templateObject1","HeaderSection_templateObject2","HeaderSection_templateObject3","HeaderSection_templateObject5","HeaderSection_templateObject6","HeaderSection_templateObject7","termsForInsertion","termsAssistantSuggestions","overflowY","TermsAssistant_MissingPlacementsBanner_templateObject","dots","setDots","saved","dismissed","savedPlacements","dismissedPlacements","placements","Data","PlacementsInfo","generatePlacmenetsInfo","TermsList_SingleTerm_templateObject","TermsList_SingleTerm_templateObject1","TermsList_SingleTerm_templateObject2","TermsList_SingleTerm_templateObject3","TermsList_SingleTerm_templateObject4","TermsList","termOccurances","TermsSelectionDropdown","_filter","selectedTerms","setSelectedTerms","popoverVisible","setPopoverVisible","showLimitError","setShowLimitEror","fetchTaSuggestions","taSuggestionsLoading","handleCheckboxClick","updatedList","onTermsSearchHandler","onBulkSelectTop20Handler","addCompleteTerms","prepcCompleteTerms","completeTermsLength","prepIncludeMoreTerms","onUncheckAllClickHandler","onTriggerClickHandler","HeadingSection","SearchBox","QuotaInfo","ControllsBar","BulkControllBtn","SingleTermRow","opaque","TermUsage","BtnsContainer","Trigger","TermsSelectionDropdown_templateObject","TermsSelectionDropdown_templateObject1","TermsSelectionDropdown_templateObject2","TermsSelectionDropdown_templateObject3","TermsSelectionDropdown_templateObject4","TermsSelectionDropdown_templateObject6","TermsSelectionDropdown_templateObject7","TermsSelectionDropdown_templateObject8","TermsSelectionDropdown_templateObject9","TermsSelectionDropdown_templateObject11","TermsSelectionDropdown_templateObject12","TermsSelectionDropdown_templateObject13","TermsAssistantRightSidebar","RightSidebar_templateObject","RightSidebar_templateObject1","RightSidebar_templateObject2","RightSidebar_templateObject3","RightSidebar_templateObject4","RightSidebar_templateObject5","SingleCompetitor","contentScore","TopRankingCompetitors","topRankingCompetitorActiveKw","competitorsData","setTopRankingCompetitorsActiveKw","openCompetingFocusTermsDrawer","onSelect","dropdownClassName","DrawersTriggers","changeView","loadingTaSuggestions","setLoadingTaSuggestions","handleTriggerAssistant","finalPrepArr","buttonsConf","faListTree","hoverColor","openCompetitorsHeadingsDrawer","faMagicWandSparkles","tooltipContent","faWrench","faChartSimple","updatedButtonConf","SingleItem","DrawersTriggers_templateObject","DrawersTriggers_templateObject1","Analytics","ContentContainer","Analytics_templateObject","Analytics_templateObject1","KeywordSelector","isSubscriber","isCompetitorsTable","setFilteredCompetitorsData","setActiveKw","setCompetitors","activeKw","handleOnSelectChange","KeywordDropdownWrapper","KeywordSelector_templateObject","CompetitorsTable","filteredCompetitorsData","schemaTypesList","allSchemasCount","nullCount","selectedSchema","setSelectedSchema","setShowCompetitorTermsTableDetail","isSmallScreen","setIsSmallScreen","allowScroll","setAllowScroll","onWindowResize","innerWidth","average","reFormatSchemaType","schema","selectedSchemaValue","filteredItems","graph","graphItem","fixed","ellipsis","PageUrlWrapper","lineHeight","dr","parseFloat","toFixed","DRWrapper","schemaLength","schemaItemsList","BlueTextWithUnderline","ULStyled","LinksContainer","paddingRight","LinkWrapper","StyledAnchor","h1Count","h2Count","h3Count","TypesSchemaFilterWrapper","SchemaFilterTitle","SchemaFilterWrapper","SchemaFilter","scroll","y","_dir","CompetitorsTable_templateObject","CompetitorsTable_templateObject1","CompetitorsTable_templateObject2","CompetitorsTable_templateObject3","CompetitorsTable_templateObject4","CompetitorsTable_templateObject5","CompetitorsTable_templateObject6","CompetitorsTable_templateObject7","CompetitorsTable_templateObject8","CompetitorsTable_templateObject9","CompetitorsTable_templateObject10","CompetitorsTable_templateObject11","CompetitorsTable_templateObject12","CompetitorsDetail","competitorSchemaObject","competitorTitle","competitorUrl","competitorSchemaGraphIdx","formats","renderSchemaData","dataObj","LargeLine","mainLebel","mainValue","SchemaLabel","SchemaValue","urlValidationRegex2","isValid","utc","BackArrowContainer","SchemaContainer","SchemaHeader","SchemaPageTitle","context","CompetitorsDetail_templateObject","CompetitorsDetail_templateObject1","CompetitorsDetail_templateObject2","CompetitorsDetail_templateObject3","CompetitorsDetail_templateObject4","CompetitorsDetail_templateObject5","CompetitorsDetail_templateObject6","CompetitorsDetail_templateObject7","CompetitorsDrawerTab","setSchemaTypesList","setAllSchemasCount","setNullCount","showCompetitorTermsTableDetail","squareTooltip","IsRanking","IsNotRanking","focusTermsTooltip","CompetingFocusTermsDrawer","isCompetingFocusTermsDrawerOpen","closeCompetingFocusTermsDrawer","isOpeningKwSuggestionsFromContentResearch","setIsOpeningKwSuggestionFromContentResearch","selectedKeyword","setSelectedKeyword","selectedCompTabKw","setSelectedCompTabKw","isHovered","setIsHovered","maxElemHeight","setMaxElemHeight","allRef","keywordSuggestionsRef","elementsArray","elementsWidthArr","exportSingleNode","node","today","date","getFullYear","getMonth","getDate","html2canvas","then","canvas","toDataURL","onTabChange","schemaCountsHandler","competitorsTypes","countOccurrences","inputArray","counts","prototype","hasOwnProperty","call","afterVisibleChange","focusTermsGridData","TitleStyled","tabPosition","overflowX","Subtitle","data-html2canvas-ignore","SectionHeader","sites","Rank","Site","rotate","wrap","contentScores","focusTermUsageBySites","Square","keywordSuggestionsGridData","keywordSuggestionsUsageBySites","CompetingFocusTermsDrawer_templateObject","CompetingFocusTermsDrawer_templateObject1","CompetingFocusTermsDrawer_templateObject2","CompetingFocusTermsDrawer_templateObject3","CompetingFocusTermsDrawer_templateObject4","CompetingFocusTermsDrawer_templateObject5","CompetingFocusTermsDrawer_templateObject6","CompetingFocusTermsDrawer_templateObject7","CompetingFocusTermsDrawer_templateObject9","CompetingFocusTermsDrawer_templateObject10","CompetingFocusTermsDrawer_templateObject11","NewContentIdeaForm","drawerVisible","usaCode","selectedCountry","setSelectedCountry","onFormSubmit","topic","loadContentIdeasData","SCA_PAGE_CONTENT_IDEAS_GENERATE","SingleContentIdea","setConvertedText","newLineIndex","textWithoutLeadingSpace","firstTitle","breakFileName","fileName","faDownload","SCA_PAGE_CONTENT_IDEA_DOWNLOAD","SCA_PAGE_CONTENT_IDEA_COPY","CopyOutlined","ContentIdeas","csvModel","wordsArray","CsvDownloader","datas","filename","displayName","ExportOutlined","ContentIdeasDrawer","contentIdeas","setDrawerVisible","clearContentIdeas","setIsOpenContentGeneratorDrawer","SimilarKeyword","isIncluded","OverviewPage","addToLoadingArray","loadingArray","onRemoveKeywordFinish","ContentResearchDrawer","keywordDetail","isContentResearchDrawerOpen","closeContentResearchDrawer","getKeywordDetail","removeFromLoadingArray","countryName","similarKeywordsPageNumber","setSimilarKeywordsPageNumber","similarKeywordsPageSize","similarKeywordsData","setSimilarKeywordsData","similarKeywordsList","setSimilarKeywordsList","topCompetitorsData","setTopCompetitorsData","rankingPotentialData","setRankingPotentialData","handleFilterRenderData","dataArray","pageNumber","targetKwArray","similarKeywordsFormattedData","isKwIncluded","similarKeywords","onPaginationChange","relevanceData","competition","typicalTop10","averageContentScores","averageDr","averageWordCount","readAbility","averageReadability","SimilarKeywordConfig","BarChartColumn","numeral","PageTitle","skeletonMarginRight","totalSearchResults","rankingPotential","xAxis","svTrend","interval","formatter","rich","month","year","yAxis","volume","areaStyle","symbolSize","symbol","MiddleContainer","readability","Pagination","showSizeChanger","defaultPageSize","showQuickJumper","termsGrid","ContentResearchDrawer_templateObject","ContentResearchDrawer_templateObject1","ContentResearchDrawer_templateObject2","ContentResearchDrawer_templateObject3","ContentResearchDrawer_templateObject4","ContentResearchDrawer_templateObject5","ContentResearchDrawer_templateObject6","ContentResearchDrawer_templateObject7","ContentResearchDrawer_templateObject8","ContentResearchDrawer_templateObject9","ContentResearchDrawer_templateObject10","KeywordsDrawer","isOpenKeywordsDrawer","isDrawerFromCa","KeywordDetailContent","TechnicalsViewSwitcher","TechnicalsSwitcherContainer","ViewSwitcher_templateObject","PageSpeedIndex","refetchArticle","refetchPage","SpeedIndexContainer","psiMetrics","avgSpeedIndex","SpeedIndexDot","LastFetchContainer","updatedAt","faRotateRight","isInitialPageLoad","isTechnicalsDataLoading","PageSpeedIndex_templateObject","PageSpeedIndex_templateObject1","PageSpeedIndex_templateObject2","PageSpeedIndex_templateObject3","TechnicalScore","technicalsMsgColorMap","technicalScore","TitleAndWordCount","TechnicalScore_templateObject","TechnicalScore_templateObject1","TechnicalScore_templateObject2","TechnicalScore_templateObject3","auditLoader","setAuditLoader","onPageAuditPopoverVisible","setOnPageAuditPopoverVisible","contentAuditStore","loadContentAudit","setNewRecordId","antIconSecond","onRunPageAudit","countryCodeToUse","getId","shouldUseHeadlessBrowser","onPageAuditDetails","TopSeactionContainer","PopoverWrapper","getUniqueKeywords","existingValues","getFieldsValue","AntdCheckbox","PopoverKwContainer","PopoverBtnContainer","RunPageAuditBtn","faFileChartColumn","BtnText","Technicals_HeaderSection_templateObject","Technicals_HeaderSection_templateObject1","Technicals_HeaderSection_templateObject3","Technicals_HeaderSection_templateObject4","Technicals_HeaderSection_templateObject5","Technicals_HeaderSection_templateObject6","HeaderSection_templateObject8","AnalyticsCollapseCard","descriptionColor","colTitle1","colTitle2","sortKey","colTitle3","colTitle4","dataRenderer","isCollapse","defaultActive","plan","warningBar","setPageNumber","checkData","setCheckData","isFilterOpened","setIsFilterOpened","sortOrder","setSortOrder","formatData","setFormatData","sortData","sortBy","bordered","expandIcon","CaretUpFilled","faCaretUp","defaultCurrent","faFilter","ChevronUp","disabledTooltip","SchemaModal","setShowModal","dataList","setExpanded","dataForDisplay","ModalContentWrapper","MainContainer","potentialAction","z","wordBreak","queryInput","SchemaModal_templateObject","SchemaModal_templateObject1","SchemaModal_templateObject2","SchemaModal_templateObject3","SchemaModal_templateObject4","SchemaModal_templateObject5","SchemaModal_templateObject6","TechnicalsData","showMissingAltText","setShowMissingAltText","isActiveInternalBrokenLinks","setIsActiveInternalBrokenLinks","isActiveExternalBrokenLinks","setIsActiveExternalBrokenLinks","showSchemaModal","setShowSchemaModal","internalLinksFilters","statusCode","SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN","uiFormatImageSize","sizeArray","brokenHeaders","translateWord","getMissingAltTotal","imagesFilter","SCA_PAGE_IMAGES_SHOW_MISSING_ALT","externalLinksFilters","SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN","displayStatusCode","displayFollowCode","followCode","jsonLd","metaSummary","meta","field","statusColor","suggestionColor","getStatusColor","Image","getMissingAltText","WarningMiniBar","Video","video","visitable","ExternalLink","generateInternalLinksDesc","msgArr","labelColor","getInternalBrokenLinksCount","getInternalRedirectsCount","anchor","generateExternallLinksDesc","getExternalBrokenCount","getExternalRedirectsCount","List","ButtonLink","linkgraphDomain","Technicals","DataContainer","Technicals_templateObject","Technicals_templateObject1","compListCollapsed","HeadingsTree","activeCompetitor","setShowBulkAddContentBtn","showBulkAddContentBtn","setCheckedCount","checkedCount","setCheckedIndexData","checkedIndexData","setCopiedHeadings","addedHeadings","setAddedHeadings","copiedHeading","setCopiedHeading","tag","setFilters","onCheckboxChecked","curFilters","checkboxClickHandler","headingContent","headingTag","handleCopyClick","updatedCopiedHeadings","textToAdd","headingType","cleanText","curAddedHeadings","updatedAddedHeading","addHeadingsHandler","FiltersWrapper","FiltersContainer","headingsHierarchy","BulkAddAction","faSquareCheck","ActionsWrapper","AddHeadings","CopyAction","CancelAction","FiltersTree","SingleHeading","itemId","HeadingTag","HeadingText","Copy","InsertText","calculateIndent","getTopMargin","calculateFontSize","generateColor","HeadingsTree_templateObject","HeadingsTree_templateObject1","HeadingsTree_templateObject2","HeadingsTree_templateObject3","HeadingsTree_templateObject4","HeadingsTree_templateObject5","HeadingsTree_templateObject6","HeadingsTree_templateObject7","HeadingsTree_templateObject8","HeadingsTree_templateObject9","HeadingsTree_templateObject10","HeadingsTree_templateObject11","HeadingsTree_templateObject12","HeadingsTree_templateObject13","CompetitorHeadingsDrawerContent","setCompListCollapsed","setCheckedHeadingsWithTags","checkedHeadingsWithTags","setActiveCompetitor","updatedCompetitors","currentArticleOutline","generateHeadingOutline","getBlocksAsArray","outline","lastIndexOf","isCurrentArticleOutline","faBars","faBarsSort","competitorsList","CompetitorsList","CurrentArticleOutline","Order","NameLogoUrl","Name","Url","Logo","NameAndUrl","Headingoutlines","DrawerContent_templateObject","DrawerContent_templateObject1","DrawerContent_templateObject2","DrawerContent_templateObject3","DrawerContent_templateObject4","DrawerContent_templateObject5","DrawerContent_templateObject6","DrawerContent_templateObject7","DrawerContent_templateObject8","DrawerContent_templateObject9","DrawerContent_templateObject10","DrawerContent_templateObject11","DrawerContent_templateObject12","DrawerContent_templateObject13","CompetitorsHeadingsDrawer","isCompetitorsHeadingsDrawerOpen","closeCompetitorsHeadingsDrawer","SidebarContent","showTechnicals","setShowTechincals","TechnicalsContainer","LoadingBannerContainer","LongLoadingBanner","isFetchingTargetKw","SidebarContent_templateObject","SidebarContent_templateObject1","SidebarContent_templateObject2","SidebarContent_templateObject3","SidebarContent_templateObject4","RightSidebarV2","onResizeCallback","isHidden","topPosition","setTopPosition","sideBarRef","sidebarUpdate","handleScroll","pageYOffset","passive","_document_querySelector","Resizable","onResize","dir","elRef","enable","topRight","bottomRight","bottomLeft","topLeft","analyzingError","ErrorView","PageEditor","rootStore","loadAiWriterHistory","refetchOneClickDraftResultForArticleCreation","isExportingPageLoader","setIsPublic","setFocusTermsClassNames","setSideBarWidth","setViewers","emailAddress","resultId","triggerFreddySurvey","FREDDY_EVENT_SCA_ARTICLE_CREATED","updateFocusTermsState","sortedFocusTerms","internalLinksClusters","variations","finalData","parts","prepareFinalTerms","regex","multiWordCountRegex","mapFocusTerms","dbRef","firebase","database","snapshot","exists","catch","console","onDisconnect","cancel","setRepollsAllowed","focusedState","moveFocusToStart","afterSelectionMove","firstKey","formattedEditorState","setIsInitialEditorStateFetched","loadProject","getAllProjects","setRefechForBulkArticleCreation","getTime","loadPages","activeProjectId","initialLoadPage","setNewPage","headerStore","setComponent","spend","quotaProps","MainLoader","module","exports"],"sourceRoot":""}
')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (taActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (taActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo'| 'acceptAll') => {\n let prepDataArr = toJS(stagingTaSuggestions);\n if (action == 'acceptAll') {\n prepDataArr = prepDataArr?.map(item => ({...item, status: 'accepted'}));\n } else {\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n }\n setStagingTaSuggestions(prepDataArr);\n };\n\n const onDotClickHandler = (order: number) => {\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: order,\n };\n\n setShowOriginalBlockId(null);\n\n setTaActiveTerm(updatedValues);\n };\n\n const checkCurBlockStatus = () => {\n const highlightedNode = document.querySelector(`[data-block-index='${highlightedNodeId}']`);\n let elementStatus = 'default';\n let blockIndex = null;\n\n if (highlightedNode) {\n blockIndex = (highlightedNode as HTMLElement).dataset?.blockIndex;\n\n if (!blockIndex) {\n elementStatus = 'default';\n } else {\n elementStatus = stagingTaSuggestions?.find(item => item.itemIndex == blockIndex)?.status;\n }\n }\n\n if (elementStatus == 'default') {\n return <>\n \n \n onBlockStatusChange('dismiss')}>Dismiss \n ;\n }\n if (elementStatus == 'accepted') {\n return <>\n Accepted\n onBlockStatusChange('undo')} style={{color: '#fff', padding: '5px 15px'}}>Undo \n ;\n }\n if (elementStatus == 'dismissed') {\n return <>\n Dismissed\n onBlockStatusChange('undo')} style={{color: '#fff', padding: '5px 15px'}}>Undo \n ;\n }\n };\n\n const updateImageStyle = html => {\n if (html.includes('figure')) {\n // the following code is setting height and width to 100% in case of initial as this sets defaults and disturb ui\n const newHtml = html.replaceAll('initial', '100%');\n return newHtml;\n } else return html;\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n if (block.isSuggestion) {\n return (\n <>\n term.replaceAll(' ', '-'))), block.status)}>\n {showOriginalBlockId && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {showOriginalBlockId && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(updateImageStyle(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' ')), options)}\n ;\n }\n })}\n\n\n {taActiveTerm?.term ? \n {taActiveTerm?.term} \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(taActiveTerm?.term))?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return onDotClickHandler(idx)}/>;\n if (suggestion.status == 'dismissed') return onDotClickHandler(idx)}/>;\n if (suggestion.status == 'accepted') return onDotClickHandler(idx)}/>;\n })}\n \n {\n if (taActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n }}>\n 0 ? totalOccurances - 1 : 0)}\n onClick={() => {\n if (taActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n }}>\n \n {checkCurBlockStatus()}\n \n \n : null}\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsTaActive(false);\n clearAllTaData();\n setFocusTermsForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n {blocksRenderer(stagingTaSuggestions)}\n\n ;\n});\nconst ButtonsContainer = styled.div`\n display: flex;\n width: fit-content;\n`;\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: auto;\n max-width: 80px;\n margin-right: 10px;\n margin-top: auto;\n margin-bottom: auto;\n // flex-direction: row-reverse;\n`;\n\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n cursor: pointer;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Controller = styled.div`\n position: absolute;\n bottom: 80px;\n width: 900px;\n max-width: 90%;\n padding: 15px 40px;\n margin-left: -40px;\n height: auto;\n background-color: red;\n background: ${opaqueColor('#121212', 96)};\n box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.13);\n border-radius: 12px;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst Left = styled.div`\n font-weight: 600;\n font-size: 18px;\n color: #fff;\n`;\n\nconst Right = styled.div`\n display: flex;\n flex-wrap: wrap;\n`;\n\nconst Arrow = styled.div<{disabled: boolean}>`\n background: ${p =>!p.disabled ? 'linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%)' : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 40)} 2.81%, ${opaqueColor('#F58069', 40)} 96.58%)`};\n border-radius: 8px;\n width: 32px;\n height: 32px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 900px;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:40px;\n padding-right:40px;\n\n .termsAssistantChanges {\n text-decoration: underline;\n }\n\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n\n .termsAssistantDiffs {\n text-decoration: underline;\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faTriangleExclamation} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n getlinksForInsertion,\n linksAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < getlinksForInsertion?.length; i++) {\n if (!linksAssistantSuggestions?.find(item => item.linksIncluded?.includes(getlinksForInsertion[i]))) {\n prepArr.push(getlinksForInsertion[i]);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(getlinksForInsertion ?? []), ...(linksAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} links` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {Button, Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {faCircleCheck, faCircleX, faCircleDashed, faArrowLeft, faArrowRight} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {toJS} from 'mobx';\nimport {useEffect, useState} from 'react';\n\ninterface SingleTermProps {\n term: any;\n finalTermsList: any;\n setFinalTermsList: any;\n key: any;\n setVisible: any;\n kwUpdate: any;\n}\n\nexport const SingleTerm = observer(({term, finalTermsList, setFinalTermsList, setVisible, kwUpdate}: SingleTermProps) => {\n const [termIndex, setTermIndex] = useState(0);\n const {\n contentOptimizer: {\n currentPage: {\n getstagingLinkSuggestions,\n setStagingLinkSuggestions,\n setLinkActiveTerm,\n linkActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n useEffect(()=>{\n setTermIndex(0);\n }, [kwUpdate, linkActiveTerm]);\n\n const onTermClickHandler = curTerm => {\n const newClass = curTerm?.replaceAll(' ', '-');\n const totalOccurances = document.getElementsByClassName(newClass)?.length;\n const updatedValues = {\n class: curTerm.replaceAll(' ', '-')+`${term[0]?.itemIndex}`,\n term: curTerm,\n order: linkActiveTerm?.order < totalOccurances - 1 ? linkActiveTerm.order : 0,\n itemIndex: term[0].itemIndex,\n };\n\n setLinkActiveTerm(updatedValues);\n };\n\n const acceptLink = (e:any) => {\n e.stopPropagation();\n const newItems = [...term];\n newItems[termIndex].status = 'accepted';\n const updateTerm = finalTermsList.map((val:any)=> val.filter((value:any)=> value.itemIndex == term[termIndex].itemIndex).length > 0 ? newItems : val);\n term?.status !== 'dismissed' && setFinalTermsList([...updateTerm]);\n onBlockStatusChange('accept');\n };\n\n const dismissLink = (e:any) => {\n e.stopPropagation();\n const newItems = [...term];\n newItems[termIndex].status = term[termIndex].status == 'default'? 'dismissed' : 'default';\n const updateTerm = finalTermsList.map((val:any)=> val.filter((value:any)=> value.itemIndex == term[termIndex].itemIndex).length > 0 ? newItems : val);\n setFinalTermsList([...updateTerm]);\n onBlockStatusChange(term[termIndex]?.status == 'dismissed' ? 'dismiss' : 'undo');\n };\n\n const onArrowClickHandler = (e, direction: 'next' | 'prev') => {\n e.stopPropagation();\n const incDec = direction == 'next' ? true : false;\n const updatedValues = {\n class: term[incDec ? termIndex+1 : termIndex-1]?.suggestion[0]?.keyword?.replaceAll(' ', '-')+`${term[incDec ? termIndex+1 : termIndex-1]?.itemIndex}`,\n term: term[incDec ? termIndex+1 : termIndex-1]?.suggestion[0]?.keyword,\n order: direction == 'next' ? linkActiveTerm?.order + 1 : linkActiveTerm?.order - 1,\n itemIndex: term[incDec ? termIndex+1 : termIndex-1]?.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n direction == 'next' ? setTermIndex(termIndex+1) : setTermIndex(termIndex-1);\n };\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions(prepDataArr);\n };\n\n if (!term?.filter((item:any)=> item?.suggestion?.length > 0)) return;\n\n const cardClick = (e:any) => {\n e.preventDefault();\n setVisible(false);\n setTermIndex(0);\n onTermClickHandler(term[0]?.suggestion[0]?.keyword);\n };\n\n const scrollTerms = (e, index) => {\n e.stopPropagation();\n const updatedValues = {\n class: term[index]?.suggestion[0]?.keyword?.replaceAll(' ', '-')+`${term[index]?.itemIndex}`,\n term: term[index]?.suggestion[0]?.keyword,\n order: index < termIndex ? linkActiveTerm?.order - 1 : linkActiveTerm?.order + 1,\n itemIndex: term[index]?.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n setTermIndex(index);\n };\n\n const acceptedStatus = term?.filter((item:any) => item.status == 'accepted')?.length;\n const dismissedStatus = term?.filter((item:any) => item.status == 'dismissed')?.length;\n\n return \n {\n const value = term?.filter((isTerm:any)=> linkActiveTerm?.itemIndex == isTerm?.itemIndex)?.length;\n !( value > 0) && cardClick(e);\n }}>\n 0 ? 'green' : dismissedStatus == term?.length ? 'red' : 'lightgray'}\n icon={acceptedStatus > 0 ? faCircleCheck : dismissedStatus == term?.length ? faCircleX : faCircleDashed} fontSize={14}/>\n {acceptedStatus > 0 ?\n Accepted {acceptedStatus}: {term?.filter((item:any) => item.status == 'accepted').map((val:any)=> val.suggestion[0].keyword).join(', ')} :\n dismissedStatus == term?.length ?\n All Dismissed :\n Review {term?.filter((item:any)=> item?.status !== 'dismissed' && item?.status !== 'accepted')?.length} suggestion }\n \n {term[0]?.title}
\n {term[0].link}
\n \n {(term?.filter((isTerm:any)=> linkActiveTerm?.itemIndex == isTerm?.itemIndex)?.length > 0 && term?.filter((isVal:any)=> linkActiveTerm.term == isVal?.suggestion[0]?.keyword)?.length > 0) &&\n <>\n \n Suggestion {termIndex+1} of {term?.length}
\n {linkActiveTerm?.term}
\n \n \n \n \n \n {term?.length > 1 && \n \n {term?.map((suggestion, idx) => {\n return scrollTerms(e, idx)} color={suggestion.status == 'default' ? '#A3A4A4' : suggestion.status == 'dismissed' ? '#F44343' : '#1FAC47'} key={idx} isActive={highlightedNodeId == suggestion.itemIndex}/>;\n })}\n \n \n \n }\n \n \n }\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: white;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);\n transition: background .3s ease-in;\n // display: flex;\n\n .acceptBtn{\n background-color: rgba(42, 193, 85, 1);\n border: none;\n margin-right: 10px;\n border-radius: 8px;\n color: white;\n }\n .acceptCol{\n color: rgba(42, 193, 85, 1) !important;\n background-color: rgb(42 193 85 / 53%) !important;\n }\n .dismissCol{\n color: red !important;\n background-color: #ff000069 !important;\n }\n .dismissBtn{\n background-color: rgba(242, 242, 245, 1);\n border: none;\n margin-right: 10px;\n border-radius: 8px;\n span{\n color: black;\n }\n }\n .previous, .forward {\n border-radius: 6px;\n background-color: rgba(242, 242, 245, 1);\n height: 32px;\n width: 33px;\n margin-left: 10px;\n .svg{\n margin-left: -5px !important;\n }\n }\n .termName { \n margin: 0px;\n text-overflow: ellipsis;\n overflow: hidden;\n text-wrap: nowrap;\n font-weight: 600;\n font-size: 14px;\n }\n .termLink{\n font-size: 12px;\n color: rgba(45, 108, 202, 1);\n word-break: break-all;\n }\n .termKeyword{\n margin: 0px;\n font-weight: 500;\n text-overflow: ellipsis;\n overflow: hidden;\n text-wrap: nowrap;\n }\n .termsuggestion{\n font-size: 12px;\n color: rgba(78, 81, 86, 1);\n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\n }\n`;\n\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin-left: 2%;\n margin-top: 3px;\n}\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\nconst CardTitle = styled.div`\nwidth: 100%;\n`;\n\nconst StatusTitle = styled.span`\nmargin-left: 10px;\nspan{\n color: green;\n}\n`;\n\nconst DividerLine = styled(Divider)`\nbackground-color: lightgray;\nmargin-top: 0;\nmargin-bottom: 12px;\n`;\n\nconst SuggestionCard = styled.div`\nwidth: 100%;\n.actionTerm{\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n margin-bottom: 10px;\n}\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\nimport {toJS} from 'mobx';\n\nexport const LinksList = observer(({kwUpdate, setVisible}:any) => {\n const {\n contentOptimizer: {\n currentPage: {\n getlinksForInsertion,\n setLinkActiveTerm,\n getstagingLinkSuggestions,\n setStagingLinkSuggestions,\n content,\n taLinkSuggestionLoading,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n const [filter, setFilter] = useState([]);\n\n function arrayToObject(givenValue) {\n const expectedValue = {};\n givenValue.forEach(item => {\n // Assuming 'url' is unique for each item\n if (!expectedValue[item.url]) {\n expectedValue[item.url] = {title: item.title, keywords: item.keywords};\n }\n });\n return expectedValue;\n }\n\n const loadLinksData = (linksData:any) => {\n // update staginglinksuggestion to keep a full record for save api\n const expectedData = [];\n for (const outerArray of linksData) {\n for (const innerArray of outerArray) {\n expectedData.push(innerArray.itemIndex);\n }\n }\n const data = getstagingLinkSuggestions?.map((item:any)=>{\n if (expectedData.includes(item.itemIndex)) {\n return item;\n } else {\n return {...item, status: 'default'};\n }\n });\n setStagingLinkSuggestions([...data]);\n // filter duplicate data if any\n const uniqueData = [];\n const seenSet = new Set();\n\n for (const array of linksData) {\n const stringRepresentation = JSON.stringify(array);\n if (!seenSet.has(stringRepresentation)) {\n uniqueData.push(array);\n seenSet.add(stringRepresentation);\n }\n }\n return uniqueData;\n };\n\n useEffect(() => {\n setFinalTermsList([]);\n if (getstagingLinkSuggestions?.length) {\n let suggestionList = [];\n const allLinks = arrayToObject(content?.internalLinkSuggestionsV2?.allLinks.map((link:any)=> link?.url?.endsWith('/') ? {...link} : {...link, url: `${link?.url}/`}));\n const getTerms = (term:any) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(term?.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n };\n const formattedArray = {};\n // create a format and seprate arrays based on link\n getstagingLinkSuggestions?.forEach((term:any)=>{\n if (term.isSuggestion) {\n if (!formattedArray[term?.linksIncluded[0]]) {\n formattedArray[term?.linksIncluded[0]] = [];\n }\n formattedArray[term?.linksIncluded[0]].push(term);\n }\n });\n const resultArray = Object.values(formattedArray).map((arr:any, indx)=>{\n return arr?.map((arrTwo, indexx)=>{\n suggestionList=[];\n getTerms(arrTwo);\n return {display: indx== 0 ? true: false, itemIndex: arrTwo.itemIndex, index: indexx, link: arrTwo?.linksIncluded[0], suggestion: suggestionList?.length ? suggestionList : [], title: allLinks[arrTwo?.linksIncluded[0]]?.title || '', keywords: toJS(allLinks[arrTwo?.linksIncluded[0]]?.keywords), status: arrTwo?.status};\n });\n });\n setFinalTermsList([...resultArray]);\n }\n }, [taLinkSuggestionLoading, getlinksForInsertion, kwUpdate]);\n\n useEffect(()=>{\n let filteredValue = [];\n setFilter([]);\n if (kwUpdate.status) {\n // append data from sourced record when checkbox checked in keyword\n const addData = finalTermsList.filter((item:any)=> item[0].keywords?.includes(kwUpdate.kw));\n filteredValue = [...addData.map((val:any)=> val.map((value:any)=> ({...value, status: 'default'}))), ...filter];\n const returnedData = loadLinksData([...filteredValue]);\n setFilter([...returnedData]);\n } else if (kwUpdate.status == false) {\n // remove data from listed record when checkbox checked in keyword\n const filterMatch = filter?.filter((item:any)=> !item[0]?.keywords?.includes(kwUpdate.kw));\n filteredValue = [...filterMatch];\n const returnedData = loadLinksData([...filteredValue]);\n setFilter([...returnedData]);\n } else {\n filteredValue = [...finalTermsList];\n setFilter([...filteredValue]);\n }\n // open first card whenever data filter\n if (filteredValue?.length) {\n const firstTerm = {...filteredValue[0][0]};\n const updatedValues = {\n class: firstTerm.suggestion[0]?.keyword?.replaceAll(' ', '-') + `${firstTerm.itemIndex}`,\n term: firstTerm.suggestion[0]?.keyword,\n order: 0,\n itemIndex: firstTerm.itemIndex,\n };\n setLinkActiveTerm(updatedValues);\n }\n }, [kwUpdate, finalTermsList]);\n\n\n return \n {filter?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Checkbox, Dropdown, Popover, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled, {css, keyframes} from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\nimport {LinksList} from './linksList';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPlus, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport React, {useEffect, useState} from 'react';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const LinkAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsLinkActive,\n setLinksForInsertion,\n editContent,\n stagingLinkSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n updateContentLoadedAt,\n content,\n fetchLinkSuggestions,\n getstagingLinkSuggestions,\n },\n }} = useStore('');\n const {settings: {customer: {getCustomerQuota}}} = useStore('');\n const antIcon =
'));\n }\n\n if (getstagingLinkSuggestions[i].isSuggestion) {\n if (getstagingLinkSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n Show Internal Link Suggestions for following target keywords (does not affect manually provided URLs): \n e.stopPropagation()}>\n {activeKeywordsList?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const addLink = async () => {\n if (inputValue?.length) {\n const allLink = content?.internalLinkSuggestionsV2?.allLinks?.map((item:any)=> item?.url);\n const links = stringToArray(inputValue, keywordNewLineReg, ',');\n const urlWithProtocols = links.map(value => value.startsWith('/') ? value.slice(1) : value);\n setAnyButtonClicked(true);\n await fetchLinkSuggestions([...allLink, ...urlWithProtocols.map((val:any)=> `${new URL(allLink[1]).origin}/${val}`)]);\n getCustomerQuota();\n setAnyButtonClicked(false);\n setVisible(false);\n setUpdated({});\n }\n setInputValue('');\n };\n\n\n const handleInputChange = (e: React.ChangeEvent) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n setInputValue(e?.target?.value);\n }\n };\n\n const popoverContent = (\n \n Add more links you want to get suggestions for: \n \n \n \n \n \n \n );\n\n\n const selectedLink = getstagingLinkSuggestions?.filter((item:any)=> item.status == 'accepted')?.length;\n\n return \n \n \n Links Assistant \n \n \n setVisible(false)}>Keyword: {activeKeywordsList?.filter(kw => kw.active)?.length}/{activeKeywordsList?.length} \n \n \n setVisible(true)}> \n \n \n \n \n
\n Review the suggested link placements to evaluate their fit and relevance within the context of your article.\n
\n {`To finalize and implement the changes, please click on 'Save Changes'.`}\n \n \n \n \n {selectedLink > 0 ? {`${selectedLink} suggestion${selectedLink > 1 ? 's' : ''} accepted`} : <>}\n \n onCancelClickHandler()}>\n {selectedLink > 0 ? 'Discard' : 'Cancel'}\n \n item.status !== 'default')}\n color='green'\n style={{width: '35%', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n Save changes\n {updatingTa ? \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 0px);\n width: 30%;\n // padding-bottom: 20px;\n padding-right: 5%;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n // .ant-checkbox-inner{\n // background-color: #2D6CCA !important;\n // border-color: #2D6CCA !important;\n // }\n`;\n\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\ntext-align: left;\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n padding: 11px;\n display: flex; justify-content: space-between;\n align-items: center;\n border-radius: 14px;\n button{\n width: 63% !important;\n }\n span{\n color:white\n }\n`;\n\nconst LinkSubmitBtns = styled.div`\ndisplay: flex;\nmargin-top: 15px;\n.submitLink{\n margin-left: 0px;\n background-color: #2D6CCA !important;\n color: white;\n &:hover, &:focus, &:active{\n background-color: #2D6CCA !important;\n }\n}\n.dismissLink{\n background-color: #F2F2F5 !important;\n color: black;\n &:hover, &:focus, &:active{\n background-color: #F2F2F5 !important;\n }\n}\n`;\n\n\nconst ButtonStyled = styled.p<{viewSuggestionsOption?: boolean}>`\n background-color: transparent;\n border: 1px solid transparent;\n font-size: 13px;\n cursor: pointer;\n padding: 8px 3px;\n // margin: 0 9px 0 0 !important;\n color: #1890ff;\n &:hover, &:focus {\n background-color: transparent !important;\n }\n span{\n color: #1890ff;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\n\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 337px;\n padding: 12px 20px;\n border-radius: 5px;\n margin-right: 184px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n .header{\n display: flex;\n width: 41%;\n justify-content: space-between;\n font-size: 12px;\n p{\n color: #2D6CCA\n }\n }\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: black;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #6e6e6e;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport parse from 'html-react-parser';\nimport classNames from 'classnames';\nimport {useEffect, useState} from 'react';\nimport {opaqueColor} from '@/utils/colors';\nimport {faRotateLeft} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport {LinkAssistantRightSidebar} from './linkAssistantRightsideBar';\n\nexport const TextSuggestionsLinks = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n content,\n setIsLinkActive,\n setLinksForInsertion,\n getstagingLinkSuggestions,\n linkActiveTerm,\n setLinkActiveTerm,\n setStagingLinkSuggestions,\n isLinkActive,\n highlightedNodeId,\n setHighlightedNodeId,\n showOriginalBlockId,\n setShowOriginalBlockId,\n updatingTa,\n clearAllTaData,\n },\n }} = useStore('');\n\n const [totalOccurances, setTotalOccurances] = useState(document.getElementsByClassName(linkActiveTerm?.class)?.length ?? 0);\n useEffect(() => {\n setTotalOccurances(document.getElementsByClassName(linkActiveTerm?.class || linkActiveTerm?.class)?.length);\n }, [linkActiveTerm?.class, linkActiveTerm?.class]);\n\n const onArrowClickHandler = (direction: 'next' | 'prev') => {\n setTotalOccurances(document.getElementsByClassName(linkActiveTerm.class)?.length ?? 0);\n\n const updatedValues = {\n class: linkActiveTerm.class,\n term: linkActiveTerm.term,\n order: direction == 'next' ? linkActiveTerm.order + 1 : linkActiveTerm.order - 1,\n };\n\n setShowOriginalBlockId(null);\n setLinkActiveTerm(updatedValues);\n };\n\n\n useEffect(() => {\n if (linkActiveTerm) {\n setShowOriginalBlockId(null);\n const nodesWithTerm = document.getElementsByClassName(`${linkActiveTerm.class}`);\n if (nodesWithTerm?.length) {\n const higlightedNode = nodesWithTerm[0];\n if (!higlightedNode) return;\n setHighlightedNodeId(+(higlightedNode as HTMLElement)?.dataset?.blockIndex);\n const elemOffset = (higlightedNode as HTMLElement).offsetTop;\n document.querySelector('.textContainer').scrollTop = elemOffset - ((window.innerHeight - 170) / 2);\n }\n }\n }, [linkActiveTerm?.term, linkActiveTerm?.order, linkActiveTerm?.class, linkActiveTerm]);\n\n\n const blocksRenderer = blocksArray => {\n const options = {\n replace: domNode => {\n if (!domNode.attribs) {\n return;\n }\n },\n };\n\n const typeDettector = (text: string) => {\n if (text.startsWith('')) {\n return 'p';\n }\n if (text.startsWith('
')) {\n return 'h1';\n }\n if (text.startsWith('')) {\n return 'h2';\n }\n if (text.startsWith('')) {\n return 'h3';\n }\n if (text.startsWith('')) {\n return 'h4';\n }\n if (text.startsWith('')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (linkActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (linkActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions([...prepDataArr]);\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n const parser = new DOMParser();\n const doc = parser.parseFromString(block.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n const suggestionList = [];\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n\n if (block.isSuggestion) {\n return (\n <>\n term.keyword?.replaceAll(' ', '-')+`${block?.itemIndex}`)), block.status)}>\n {showOriginalBlockId != null && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n ;\n }\n })}\n\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsLinkActive(false);\n clearAllTaData();\n setLinksForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n \n {blocksRenderer(getstagingLinkSuggestions)}\n ;\n});\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 65%;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:10%;\n padding-right:40px;\n color: rgba(0, 0, 0, 0.85);\n border-right: 1px solid lightgray;\n .linkInsertionChange {\n text-decoration: underline;\n }\n p a{\n color: rgba(0, 0, 0, 0.85);\n }\n .default p span a{\n color: #1890ff;\n }\n .accepted{\n span a{\n text-decoration: underline;\n color: #1FAC47 !important;\n text-decoration-color: #1FAC47 !important;\n\n }\n }\n .dismissed{\n span a{\n text-decoration: underline;\n color: #F44343 !important;\n text-decoration-color: #F44343 !important;\n }\n }\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n img {\n width: 100%;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styles from './content-editor.module.scss';\nimport {EditorSection} from './EditorSection/EditorSection';\n// import {FocusTermsPopups} from './FocusTermsPopups';\nimport {TopSection} from './TopSection/TopSection';\nimport styled from 'styled-components';\nimport {TextSuggestions} from '../RightSidebar/v2-sidebar/Analytics/TermsAssistant/TextSuggestions';\nimport {TextSuggestionsLinks} from '../RightSidebar/v2-sidebar/Analytics/LinkAssistant/TextSuggestionsLinks';\n\n\ninterface Props {\n // allRef: any;\n newPage: any;\n htmlToDraft: any;\n}\n\nexport const LeftSide = observer(({newPage, htmlToDraft}: Props) => {\n const {contentOptimizer} = useStore('');\n const {currentPage} = contentOptimizer;\n const {\n sideBarWidth,\n isSideBarHidden,\n isTaActive,\n isLinkActive,\n } = currentPage;\n\n return \n \n ;\n});\n\n\nconst LeftSideContainer = styled.div<{isNewPage?: boolean; isSideBarHidden?: boolean; sideBarWidth?: string; isLinkSuggestionActive?: boolean}>`\n overflow: hidden;\n text-align: -webkit-center; \n transition: all .3s ease;\n width: 100%;\n max-width: ${p => p.isLinkSuggestionActive ? '100%' : !p.isNewPage ? !p.isSideBarHidden ? `calc(100% - ${p.sideBarWidth} + 15px)` : '100%' : '100%'};\n`;\n","import {WarningOutlined} from '@ant-design/icons';\nimport React from 'react';\nimport styles from './index.module.scss';\n\nexport const Error: React.FC = () => {\n return (\n \n An error has occurred, please try again later.
\n \n );\n};\n","import {FocusTermClusteredType} from '@/store/content-optimizer/currentPage';\nimport {Table} from '@/components/common-components/components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {filterDataInMemory} from '@/utils/filter-data';\nimport styles from './style.module.scss';\nimport {formatLargeNumber} from '@/utils/number';\nimport {ColumnType} from 'antd/es/table';\n\ninterface Props {\n cluster: FocusTermClusteredType;\n isClusterRemoving: boolean;\n}\n\nexport const SingleCluster = observer(({\n cluster,\n isClusterRemoving,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n enum SORT_DIRECTION {\n ascend = 'ascend',\n descend = 'descend'\n }\n\n const [tableData, setTableData] = useState([]);\n const [sortField, setSortField] = useState('requiredCountMin');\n const [sortDirection, setSortDirecion] = useState(SORT_DIRECTION.descend);\n\n\n const removeClusterHandler = (term: string) => {\n if (currentPage.isBulkRemovingCluster) return;\n currentPage.bulkRemoveTerms([term], 'term', cluster.title);\n };\n\n const setTerms = () => {\n const {dataFiltered} = filterDataInMemory(cluster?.focusTerms, '', [], [], 1, cluster?.focusTerms.length, sortField, sortDirection);\n setTableData(dataFiltered);\n };\n\n const handleTableChange = async (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortFieldName} = column || {};\n\n setSortField(sortFieldName);\n setSortDirecion(order);\n if (order) {\n const {dataFiltered} = filterDataInMemory(tableData, '', [], [], 1, tableData.length, sortFieldName, order);\n setTableData(dataFiltered);\n } else {\n setTableData(cluster?.focusTerms);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [cluster]);\n\n type ExtendedColumnsType = ColumnType & {defaultSortOrder?: 'ascend' | 'descend'; sortFieldName?: string};\n\n const tableColumns = (removingTerms: boolean): ExtendedColumnsType[] => {\n return [\n {\n title: 'TOPICAL TERM',\n dataIndex: 'name',\n key: 'name',\n align: 'left' as 'left',\n width: 250,\n render: (_, record) => {\n return \n {record.name}\n {record?.foundIn && record.foundIn.map((item, idx) => {\n return {item} ;\n })}\n {record?.isBranded && {'branded'} }\n ;\n },\n },\n {\n title: 'MSV',\n dataIndex: 'sv',\n key: 'sv',\n align: 'right' as 'right',\n sortFieldName: 'sv',\n width: 60,\n sorter: true,\n render: (_, record) => {\n return {formatLargeNumber(record.sv)};\n },\n },\n {\n title: 'USAGE',\n dataIndex: 'requiredCountMin',\n key: 'requiredCountMin',\n defaultSortOrder: 'descend',\n align: 'right' as 'right',\n width: 60,\n sortFieldName: 'requiredCountMin',\n sorter: true,\n render: (_, record) => {\n return {`${record.usedCount}/${record.idealCountMax}`};\n },\n },\n {\n title: 'REMOVE',\n dataIndex: 'name',\n key: 'name',\n align: 'right' as 'right',\n width: 80,\n render: (_, record) => {\n return removeClusterHandler(record.name)}>\n ;\n },\n },\n\n ];\n };\n\n return \n >;\n}\n\nexport const BulkRemoveTermsModal = observer(({\n isModalOpen,\n setIsModalOpen,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n const [clusteredTerms, setClusteredTerms] = useState([]);\n const [clusterToRemove, setClusterToRemove] = useState('');\n\n const setTerms = () => {\n const clusterTerms = toJS(currentPage?.analytics?.clusters);\n const tempArr = [];\n\n setClusteredTerms(toJS(clusterTerms));\n\n if (currentPage.focusTermsSorter.key) {\n clusterTerms?.forEach((item, id) => {\n let tempCluster = [];\n\n tempCluster = item?.focusTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n\n tempArr.push({\n ...clusterTerms[id],\n focusTerms: tempCluster,\n });\n });\n\n\n setClusteredTerms(tempArr);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n const removeClusterHandler = async (e, clusterTitle: string) => {\n e.preventDefault();\n e.stopPropagation();\n const clusterToRemove = clusteredTerms?.find(cluster => cluster.title === clusterTitle);\n const termsArr = clusterToRemove?.focusTerms?.map(term => term.name);\n setClusterToRemove(clusterTitle);\n try {\n await currentPage.bulkRemoveTerms(termsArr, 'cluster', clusterTitle);\n } catch (e) {\n setClusterToRemove('');\n } finally {\n setClusterToRemove('');\n }\n };\n\n return Bulk Remove Topical Terms \n \n {clusteredTerms?.filter(cluster => cluster.focusTerms?.length > 0)?.map((cluster, idx) => {\n return \n {cluster.title} \n {`(Terms: ${cluster.focusTerms?.length}, MSV: ${formatLargeNumber(cluster.clusterSv)})`} \n }\n extra={ removeClusterHandler(e, cluster.title)}>\n }>\n \n ;\n })}\n \n setIsModalOpen(false)}>Close \n \n \n\n\n ;\n});\n\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 5px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\n\nconst ClusterHeader = styled.div`\n display: flex;\n align-items: baseline;\n`;\nconst ClusterName = styled.div`\n font-weight: 500;\n color: #121212;\n`;\nconst ClusterDesc = styled.div`\n font-size: 12px;\n color: #4E5156;\n margin-left: 5px;\n`;\n\nconst CollapseStyled = styled(Collapse)`\n // background: #fff;\n border: none;\n max-height: calc(75vh - 185px);\n overflow-y: auto;\n\n .ant-collapse-content {\n border-top: 0px solid transparent;\n background-color: #fff;\n }\n\n .ant-collapse-item {\n border-radius: 10px !important;\n margin-bottom: 10px;\n border: 1px solid #E8E8E8;\n background-color: #fff;\n }\n\n .ant-collapse-content-box {\n padding-top: 0px;\n }\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faArrowUpArrowDown, faSliders} from '@fortawesome/pro-regular-svg-icons';\nimport {faFileArrowDown, faFileLines, faFileSpreadsheet} from '@fortawesome/pro-light-svg-icons';\nimport {faPlus, faTrash} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Dropdown, Radio, Tooltip, Spin, Divider, Menu} from 'antd';\nimport {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport {Modal} from '@/components/common-components';\nimport {faGoogle} from '@fortawesome/free-brands-svg-icons';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport {BulkRemoveTermsModal} from '../BulkRemoveTermsModal/BulkRemoveTermsModal';\nimport {toJS} from 'mobx';\nimport {useStore} from '@/store/root-store';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface TopicalProps {\n onViewChange?: Dispatch>;\n onChangeIncludeBranded?: Dispatch>;\n onTermsFilter?: Dispatch>;\n includeBranded: boolean;\n currentView?: 'clusters' | 'completion';\n store: CurrentPageStore;\n onSortTerms?: () => void;\n}\n\n\nexport const TermsDropdownController = observer(({onViewChange, currentView, store, onChangeIncludeBranded, includeBranded, onTermsFilter, onSortTerms}: TopicalProps) => {\n const {Group} = Radio;\n const antIcon = \n e.stopPropagation()}>\n onViewChange(e.target.value)} style={{display: 'flex', flexDirection: 'column'}}>\n Editor settings: \n currentPage?.setHighlights(e.target.checked)}>Enable Terms Highlighting in the Editor \n Terms recommendations: \n onCheckboxClicked(e.target.checked)}>Include Branded Terms \n\n \n {isNotPublic && setShowBulkRemoveTermsModal(true)}> }\n \n ;\n\n return \n setShowExportModal(false)}>\n Export Content Brief \n Export a brief with the SEO and Content data for this article (Meta Data, Word Count, Focus Terms, questions, Link Suggestions, etc.) \n \n setShowExportModal(false)}>Close \n \n window.open(getXlsExportLink(), '_self')}>\n \n downloadFileToTxt()}>\n \n exportToGoogleDocs()} disabled={exportToDocsLoading}>\n {exportToDocsLoading ? \n \n \n \n \n \n {Object.keys(termsFiltersSetup).map((item, idx) => {\n return \n termsFilterHandler(e.target.checked, item)}>\n {getTermsCount(termsFiltersSetup[item].type)}\n \n ;\n })}\n \n \n \n \n {sorters.map((item, index) => (\n handleOnSortChange(item)} key={index}>{item.label} \n ))}\n \n }>\n \n Sort \n \n \n \n\n {store?.isRemovingFocusTerms && \n currentPage.setShowAddFocusTermModal(true)}>\n \n \n \n\n {isNotPublic && setShowExportModal(true)}>\n }\n\n \n \n \n \n \n \n \n \n ;\n});\n\n// TOPICAL TERMS STYLED COMPONENTES\nconst GearIcon = styled.a`\n height: 14px;\n cursor: pointer;\n margin-top: auto;\n margin-bottom: auto;\n display: block;\n`;\nconst GroupTermsContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n`;\n\nconst TermsContainer = styled.div`\n display: flex;\n flex-direction: column;\n background-color: transparent;\n padding: 10px 10px;\n background-color: #2D2F34;\n border-radius: 5px 5px 0 0;\n`;\n\nconst ExportBtn = styled(Button)`\n background: transparent;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: auto;\n margin-right: 0px;\n padding: 7px 10px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst AdjustBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n padding-bottom: 5px;\n cursor: default;\n`;\n\n\nconst TermsViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n padding: 12px 20px;\n border-radius: 17px;\n margin-top: 10px;\n width: 232px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n// margin-left: 3px !important;\n display: flex;\n align-items: flex-start;\n font-weight: 500 !important;\n margin-right: 8px;\n\n .ant-checkbox-inner {\n width: 14px;\n height: 14px;\n padding: 7px;\n border-radius: 4px !important;\n ::after {\n top: 47% !important;\n left: 18.5% !important;\n }\n }\n\n .ant-checkbox {\n padding-right: 0px !important;\n padding-left: 0px !important;\n }\n\n span {\n padding-right: 1px;\n padding-left: 1px;\n font-size: 13px;\n }\n`;\n\nconst PTag = styled.p`\nmargin-left: 10px;\nmargin-bottom: 0px !important;\n`;\n\nconst CheckboxStyledHighlights = styled(CheckboxStyled)`\nmargin-bottom: 4px;\n`;\n\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n margin-bottom:5px;\n`;\n\n\nconst ExportModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n\nconst ExportModalDesc = styled.div`\n color: #4E5156;\n`;\n\nconst ExportModalButtonsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst BulkRemoveTermsBtn = styled.div`\n cursor: pointer;\n margin-top: 6px;\n font-weight: 500;\n`;\nconst TermsFilterContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 103%;\n border-radius: 0px 4px 4px 0px;\n margin-left: -10px;\n padding: 0px 9px 10px 15px;\n`;\n\nconst AddButton = styled.div`\n margin-left: 6px;\n cursor: pointer;\n`;\n\nconst Sort = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n`;\n\nconst SortTxt = styled.span`\n color: var(--Text-gray-light, var(--Gray-light, #E8E8E8));\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {formatLargeNumber} from '@/utils/number';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip, Input as AntdInput} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react-lite';\nimport {ChangeEvent, useState} from 'react';\nimport styled from 'styled-components';\nimport {faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\n\ninterface Props {\n store: CurrentPageStore;\n onFilter: (query: string[]) => void;\n}\nexport const TermsDataController = observer(({\n store,\n onFilter,\n}: Props) => {\n const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n\n const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n return \n \n \n \n {store?.isAnalyzing ? : \n {toJS(store.analytics?.clusters)?.map((cluster, id) => {\n return \n \n Terms in cluster: \n {cluster.focusTerms?.length} \n \n \n Monthly Search Volume: \n {formatLargeNumber(cluster.clusterSv)} \n \n }>\n item.trim() === cluster.title).length > 0}\n onClick={() => handleOnClusterClick(cluster.title)}>{`#${cluster.title} - ${cluster.focusTerms?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n \n ;\n});\n\nconst ClusterTooltipSingleRow = styled.div`\n display: flex;\n justify-content: space-between\n`;\nconst ClusterTooltipLabel = styled.div`\n font-size: 12px;\n font-weight: 400;\n color: #E8E8E8;\n`;\n\nconst ClusterTooltipValue = styled.div`\n font-size: 12px;\n font-weight: 500;\n color: #FFFFFF;\n`;\n\nconst Wrapper = styled.div`\n margin-bottom: 15px;\n border-radius: 8px;\n background: #282B2F;\n box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.02);\n padding: 10px;\n`;\nconst SearchAndSort = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\nconst ClustersWrapper = styled.div`\n display: flex;\n`;\nconst ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n display: flex;\n flex-wrap: wrap;\n\n height: ${p => p.expandedClusters ? 'auto' : '25px'};\n overflow: hidden;\n`;\n\nconst SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n border-radius: 60px;\n padding: 3px 8px;\n width: auto;\n height: 20px;\n font-size: 11px;\n margin-right: 6px;\n margin-bottom: 6px;\n cursor: pointer;\n\n &:hover {\n background-color: #4B4D51 !important;\n }\n`;\n\nconst InputStyled = styled(AntdInput)`\n height: 32px;\n margin-bottom: 5px;\n background: #282B2F;\n border-color: transparent !important;\n .ant-input {\n margin-left: 7px;\n background: #282B2F;\n color: white !important;\n color: var(--Text-gray, var(--Gray, #A3A4A4));\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n }\n .ant-input-affix-wrapper {\n border: none !important;\n }\n &:hover{\n box-shadow: none !important;\n border-color: transparent !important;\n }\n &:focus{\n box-shadow: none !important;\n }\n`;\n","import {useState} from 'react';\nimport {faArrowDown, faCheck, faTrash} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport styles from '../../style.module.scss';\nimport {\n costPerClickFormatter,\n searchVolumeFormatter,\n isScaPublicPage,\n} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/LeftSide/EditorSection/content-editor/utils';\nimport {\n Divider,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport {NextImg} from '@/utils/nextImg';\n\nimport {getTwoGreenPercentageColor} from '@/utils/colors';\nimport classNames from 'classnames';\nimport {useTranslation} from 'next-i18next';\nimport {CurrentPageStore, FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {getDomain, getSiteName} from '@/utils/url';\nimport {isNil} from 'lodash';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport styled from 'styled-components';\nimport {faWikipediaW} from '@fortawesome/free-brands-svg-icons';\n\ninterface Props {\n focusTerm: FocusTermModel;\n i: number;\n store: CurrentPageStore;\n}\n\nexport const SingleTerm = observer(({focusTerm, i, store}: Props) => {\n const {t} = useTranslation('landing-page-optimizer');\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemoving, setIsRemoving] = useState(false);\n\n const antIcon = \n Topical term
\n {focusTerm.name}
\n \n {focusTerm.sv !== undefined && focusTerm.sv !== null && {`SV: ${searchVolumeFormatter(focusTerm.sv)}`}}\n {focusTerm.cpc !== undefined && focusTerm.cpc !== null && {`CPC: ${costPerClickFormatter(focusTerm.cpc)}`}}\n \n {focusTerm?.foundIn && focusTerm?.foundIn.length > 0 ?\n \n Used in \n {focusTerm.foundIn.map((item, i)=> {\n if (focusTerm.foundIn.length === 1) {\n return {`<${item}>`};\n } else {\n if (i === focusTerm.foundIn.length - 1) {\n return <>and {`<${item}>`};\n } else if (i === focusTerm.foundIn.length - 2) {\n return {`<${item}>`} ;\n } else {\n return {`<${item}>`}, ;\n }\n }\n })}\n :\n null}\n {'Current / Recommended # of uses'}
\n \n {store?.content?.targetKewyordsOnlyArr?.includes(focusTerm.name) ?
Target keywords do not have any usage limitations. : null}\n {focusTerm.usedCount}\n of {focusTerm.requiredCountMin}\n {`(Max: ${focusTerm.requiredCountMax || 0})`}\n \n {'Competitors using this term'}
\n \n {focusTerm?.competitors?.results?.map((competitor, index) => (\n \n {competitor.title ?? getSiteName(competitor.hostname)}
\n {competitor.url}\n \n {competitor?.snippets?.map((snippet, idx) => {\n return \n \n {/* {snippet.length > 130 ? snippet.substring(0, 130) + '...' : snippet} */}\n
\n {idx !== (competitor?.snippets?.length - 1) && }>\n \n \n // {`${index + 1}. `}{competitor.hostname}\n ))}\n\n \n {(!isNil(focusTerm?.normalizedScore) || focusTerm?.source) ? \n {focusTerm?.source ?\n {`Keyword source: `}{focusTerm?.source?.join(', ')}
: null}\n {!isNil(focusTerm?.normalizedScore) ? <>\n {`Importance score: `}{focusTerm.normalizedScore}
\n : null\n }\n {isAnyFocusTermLink() ?\n \n Entity References \n \n {focusTerm?.crunchbaseLink ?\n window.open(focusTerm?.crunchbaseLink)} style={{display: 'flex'}}>\n \n Crunchbase\n : ''}\n {focusTerm?.knowledgeGraphLink ?\n window.open(focusTerm?.knowledgeGraphLink)} style={{display: 'flex'}}>\n \n Google\n : ''}\n {focusTerm?.wikipediaLink ?\n window.open(focusTerm?.wikipediaLink)} style={{display: 'flex'}}>\n : ''}\n {focusTerm?.wikidataLink ?\n window.open(focusTerm?.wikidataLink)} style={{display: 'flex'}}>\n \n Wikidata\n : ''}\n \n : ''}\n \n \n }\n >\n\n \n \n {focusTerm.name} \n {focusTerm?.isBranded && {'branded'} }\n {focusTerm?.foundIn && focusTerm.foundIn.map((item, idx) => {\n return {item} ;\n })}\n \n \n {termContainerSetup[focusTerm.status].icon}\n {focusTerm.usedCount} / {focusTerm.requiredCountMin}\n\n \n {\n navigator.clipboard.writeText(focusTerm.name);\n setCopySuccess(true);\n }}>\n \n \n \n\n {!isScaPublicPage() ? {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n {(isRemoving && store.isRemovingFocusTerms) ? \n \n );\n});\n\nconst TermContainer = styled.div`\n margin-right: 5px;\n margin-left: 5px;\n margin-bottom: 9px;\n display: flex;\n max-width: 300px;\n cursor: default;\n\n\n .termControllsContainer {\n position: absolute;\n right: -100%;\n width: 100%;\n height: 100%;\n transition: all .3s ease;\n background: #2D2F34;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n }\n\n &:hover {\n .termControllsContainer {\n right: 0;\n }\n }\n`;\nconst Left = styled.div<{background: string; hoverBackground: string}>`\n padding: 3px 8px;\n background: ${p => p.background};\n width: 100%;\n border-radius: 36px 0 0 36px;\n display: flex;\n flex-wrap: wrap;\n max-width: 260px;\n align-items: center;\n transition: background .2s ease;\n\n &:hover {\n background: ${p => p.hoverBackground};\n }\n`;\nconst TermName = styled.div`\n font-size: 13px;\n color: #fff;\n line-height: 13px;\n`;\nconst BrandedLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n color: #4ebbab;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\nconst FoundInLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\n\nconst Right = styled.div<{border: string}>`\n padding: 5px 7px;\n border: ${p => `2px solid ${p.border}`};\n border-radius: 0 36px 36px 0;\n font-size: 13px;\n display: flex;\n align-items: center;\n line-height: 13px;\n position: relative;\n overflow: hidden;\n min-width: fit-content;\n cursor: pointer;\n \n\n\n`;\n\nconst CopyIcon = styled.div`\n`;\nconst ReferencesTitle = styled.p``;\nconst ReferencesWrapper = styled.div``;\nconst LinksWrapper = styled.div`\ndisplay: flex;\nflex-wrap: wrap;\ngap: 8px;\n`;\nconst SingleLink = styled.div`\ndisplay: flex;\npadding: 3px 6px;\njustify-content: center;\nalign-items: center;\ngap: 4px;\nborder-radius: 6px;\nborder: 1px solid #E8E8E8;\nbackground:#FFF;\ncursor: pointer;\nspan {\n color: #121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n}\n`;\nconst LowerSection = styled.div`\npadding: 10px 21px;\nbackground: #f9f9fb;\n`;\n","import {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {TermsDropdownController} from '../DropdownController/TermsDropdownController';\nimport styled from 'styled-components';\nimport {toJS} from 'mobx';\nimport {TermsDataController} from '../DropdownController/TermsDataController';\nimport {SingleTerm} from './SingleTerm';\nimport {FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {Tooltip} from 'antd';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\n\nexport const TermsDropdowns = observer(() => {\n // const [defaultActiveCluster, setDefaultActiveCluster] = useState(['1']);\n const [includedBranded, setIncludeBranded] = useState(true);\n const [query, setQuery] = useState([]);\n const [termsToShow, setTermsToShow] = useState(['include-more', 'included', 'include-less']);\n const [isCopied, setIsCopied] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const [standardTerms, setStandardTerms] = useState([]);\n\n const setTerms = (queryParam?: string[]) => {\n if (queryParam?.length) {\n setQuery(queryParam);\n } else {\n setQuery([]);\n }\n\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (queryParam?.length) {\n for (let i = 0; i < queryParam.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(queryParam[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n if (currentPage.focusTermsSorter.key === 'leastCount') {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (a.usedCount < b.usedCount) return -1;\n });\n } else {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n }\n\n\n filteredTerms = filteredTerms?.filter(term => termsToShow.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n const filterTermsHandler = (termsToShowParam: string[]) => {\n setTermsToShow(termsToShowParam);\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (query?.length) {\n for (let i = 0; i < query.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(query[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n\n filteredTerms = filteredTerms?.filter(term => termsToShowParam.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n return <>\n \n \n \n \n {standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n }).map((term, idx) => {\n return ;\n })}\n \n {\n if (!visible) {\n setTimeout(() => setIsCopied(false), 300);\n }\n }}>\n {\n if (standardTerms?.length) {\n navigator.clipboard.writeText(standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n })?.map(i => i?.name).join(', '));\n }\n setIsCopied(true);\n }}\n > \n ;\n});\n\nconst TopicalTermsContainer = styled.div`\nbackground-color: #2D2F34;\n \n`;\n\nconst TermsContainer = styled.div<{focusMode?: boolean}>`\n padding-right: 15px;\n padding-bottom: 16px;\n border-radius: 0 0 8px 8px;\n display: flex;\n flex-wrap: wrap;\n max-height: ${p => !p.focusMode ? '476px' : 'calc(100vh - 440px)'};\n overflow-y: auto;\n \n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst CopyButton = styled.button`\n background-color: transparent;\n border: 0px;\n cursor: pointer;\n margin: 6px;\n color: rgb(52, 174, 243);\n`;\n\n","import {observer} from 'mobx-react-lite';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {TermsDropdowns} from './TermsDropdowns';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const FocusTermsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n return currentPage?.analytics?.includedTerms?.length || currentPage?.analytics?.includeMoreTerms?.length || currentPage?.analytics?.includeLessTerms?.length ? (\n \n {/* ;\n});\n\nconst EmptyDataBox = styled.div`\n background: #2d2f34;\n border-radius: 5px;\n box-shadow: 0 4px 21px rgba(0, 0, 0, 0.02);\n display: flex;\n padding: 12px 15px;\n\n .emptyImg {\n display: flex;\n justify-content: center;\n }\n\n .emptyDataTitle {\n color: #a3a4a4;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n margin-left: 17px;\n }\n`;\n\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button} from '@/components/common-components/v2/Button';\n\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faDownLeftAndUpRightToCenter, faFileDownload, faUpRightAndDownLeftFromCenter} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react';\nimport {faCheck, faSyncAlt} from '@fortawesome/pro-regular-svg-icons';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface Props {\n currentView?: 'links' | 'terms';\n store: CurrentPageStore;\n}\n\n\nexport const LinkSuggestionsDropdownController = observer(({currentView, store}: Props) => {\n const [isSynced, setIsSynced] = useState(false);\n const [isSyncing, setIsSyncing] = useState(false);\n const isNotPublic = !isScaPublicPage();\n\n const onLinksSync = async () => {\n try {\n setIsSyncing(true);\n // await store?.getInternalLinkSuggestions(store?.content?.uuid, true);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setIsSynced(true);\n setTimeout(() => {\n setIsSynced(false);\n }, 3000);\n } catch (e) {\n setIsSyncing(false);\n } finally {\n setIsSyncing(false);\n }\n };\n\n const getXlsExportLink = () => {\n const token = getTokenFromCookies();\n if (store?.content?.uuid) {\n const baseUrl = getApiUrl(BaseApi.CA_ENDPOINT, `/api/pages/${store?.content?.uuid}/export-data-to-xls/`);\n const savedKeywordsUrl=`${baseUrl}?&jwt=${token}`;\n return savedKeywordsUrl;\n }\n };\n\n\n return \n \n store.setFocusTermsExpanded(!store.focusTermsExpanded)}>\n {store?.focusTermsExpanded ? 'Default Mode' : 'Focus Mode'} \n \n \n\n {/* \n {currentView === 'links' ? 'Internal' : 'External links'} \n \n\n {currentView === 'links' ? \n Keywords \n : null} */}\n\n {isNotPublic && (currentView === 'links' ? \n : null)}\n\n\n onLinksSync()}>\n \n \n\n ;\n});\n\nconst Container = styled.div<{current: string}>`\n display: flex;\n align-items: center;\n padding: 10px 15px;\n justify-content: ${p => p.current === 'links' ? 'space-between' : 'flex-start'};\n`;\n\n\nconst FocusModeBtn = styled(Button)`\n background: transparent;\n padding: 4px 0px;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: 0px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst FocusModeLabel = styled.span`\n color: #E8E8E8;\n font-size: 12px;\n margin-bottom: -2px;\n`;\n\nconst ExportIcon = styled.a`\n display: flex;\n align-items: center;\n cursor: pointer;\n background: transparent;\n font-size: 12px !important; \n margin-left: auto;\n margin-right: 0px;\n color: #fff;\n padding: 7px 20px;\n height: 28px !important;\n\n &:focus,\n &:hover {\n background: transparent;\n color: #fff;\n }\n`;\n\n\nconst RefetrchBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n margin-right: 0px;\n`;\n","import {InternalLinkType} from '@/store/content-optimizer/CurrentPageModel';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip} from 'antd';\nimport styled from 'styled-components';\nimport {\n faCheck,\n faStar,\n} from '@fortawesome/pro-regular-svg-icons';\nimport {faStar as faStarSolid} from '@fortawesome/pro-solid-svg-icons';\nimport {useEffect, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n link: InternalLinkType;\n customCallback?: () => void;\n}\nexport const SingleSuggestion = observer(({link, customCallback}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemovingTerm, setIsRemovingTerm] = useState(false);\n const [isBookmarked, setIsBookmarked] = useState(link?.isBookmarked);\n const {contentOptimizer: {currentPage: {removeInternalLinkSuggestion, bookmarkInternalLinkSuggestion, content: {uuid}}}} = useStore('');\n\n const antdIcon = \n \n \n \n \n \n \n {link?.title ? link.title : ''}\n \n {isBookmarked ? : null}\n \n\n \n {link?.path}\n \n \n \n \n \n {\n setIsBookmarked(!isBookmarked);\n await bookmarkInternalLinkSuggestion(uuid, link?.url);\n if (typeof customCallback == 'function') customCallback();\n }}>\n \n \n \n \n \n \n \n {\n setIsRemovingTerm(true);\n await removeInternalLinkSuggestion(uuid, link?.url, link?.keywords);\n if (typeof customCallback == 'function') customCallback();\n setIsRemovingTerm(false);\n }}>\n {isRemovingTerm ? : \n \n \n\n ;\n});\n\nconst SingleLinkContainer = styled.div`\n margin-bottom: 12px;\n display: flex;\n justify-content: space-between;\n position: relative;\n\n .actionsMenu {\n display: none;\n font-size: 12px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n cursor: pointer !important;\n position: absolute;\n background: linear-gradient(90deg, #2d2f342b -10.83%, #2d2f34 39.77%);\n padding-left: 30px;\n right: 0;\n }\n\n &:hover {\n .actionsMenu {\n display: flex;\n }\n }\n\n .copyTooltip {\n :global(.ant-tooltip-content) {\n background-color: $color-gray-dark;\n border-radius: 10px !important;\n }\n \n :global(.ant-tooltip-arrow) {\n display: none !important;\n }\n \n :global(.ant-tooltip-inner) {\n border-radius: 10px !important;\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n }\n`;\nconst Right = styled.div`\n width: 90%;\n margin-right: auto;\n`;\nconst Left = styled.div`\n display: flex;\n width: 10%;\n`;\nconst TitleAndStar = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n`;\nconst Title = styled.div`\n cursor: pointer;\n color: #e8e8e8 !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 90%;\n`;\nconst Link = styled.a`\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n color: #34AEF3;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\n\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {SingleSuggestion} from './SingleISugesstion';\nimport styles from '../CommonCitations/style.module.scss';\n\ninterface Props {\n data: any[];\n store?: CurrentPageStore;\n isQueried?: boolean;\n customCallback?: () => void;\n}\n\n\nexport const InternalLinksSuggestions = observer(({data, store, isQueried, customCallback}: Props) => {\n return <>\n \n {data?.length ?\n data?.map((suggestion, id) => (\n \n )) : isQueried ?\n \n No Internal Link Suggestions found that match your search.\n :\n store?.content?.targetKeywords?.length === 0 ?\n \n Please add Target Keywords to get Internal Link Suggestions.\n : \n No Internal Link Suggestions found for these Target Keywords.\n }\n \n\n ;\n});\n\n\nconst DropdownsContainer = styled.div`\n background-color: #2D2F34;\n max-height: 340px;\n overflow-y: auto;\n padding-right: 15px;\n padding-left: 15px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n","\nimport {CommonCitationsType} from '@/store/content-optimizer/CurrentPageModel';\nimport {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n citation: CommonCitationsType;\n}\n\nexport const SingleCitation = observer(({citation}: Props) => {\n const addDefaultSrc = e => {\n e.target.src = '/img/world-wide-web.svg';\n };\n\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)} src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc.length > 90 ?\n \n {citation?.metaDesc.substring(0, 90) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by: \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp.metaDesc.length > 70 ? serp.metaDesc.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 7 && (\n {`+${citation?.serps?.length - 7}`}\n )}\n \n : null}\n\n \n ;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SingleCitation} from './SingleCitation/SingleCitation';\nimport styles from './style.module.scss';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n store: CurrentPageStore;\n}\nexport const CommonCitations = observer(({store}: Props) => {\n return <>\n {store?.analytics?.commonCitations?.length ? \n \n {store?.analytics?.commonCitations.map(citation => {\n return (citation.url || citation.metaDesc) && ;\n })}\n \n :\n !store?.content?.targetKeywords?.length ? \n Please add Target Keywords to get Common Citations.\n : \n No Common Citations found for these Target Keywords.\n }\n ;\n});\n","import {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\n\nexport const SidebarTooltip = observer(props => {\n return \n {props.children}\n ;\n});\n","import {observer} from 'mobx-react';\nimport {ChangeEvent, Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled, {css, keyframes} from 'styled-components';\nimport {Tooltip, Form, Dropdown, Radio} from 'antd';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport Text from 'antd/lib/typography/Text';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {Button as CommonBtn, CommonInput} from '@/components/common-components/components';\nimport {Loader} from '../../../Utils/loader';\nimport {addProtocolToDomain, sanitizeUrl} from '@/utils/url';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPen, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {Button} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {Input} from '@/components/common-components/v2';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\n// import {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\n// import { toJS } from 'mobx';\n// import { LoadingOutlined } from '@ant-design/icons';\n\ninterface Props {\n store: CurrentPageStore;\n currentView?: 'links' | 'terms';\n onViewChange?: Dispatch>;\n visibleKeywords?: any[];\n updateKeywords?: (kwArray) => void;\n onFilter: (query: string[]) => void;\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const SuggestionsDataController = observer(({\n store,\n currentView,\n onViewChange,\n visibleKeywords,\n updateKeywords,\n onFilter,\n viewSuggestionsOption,\n linksDropDownFromSuggestion,\n}: Props) => {\n const [showEditor, setShowEditor] = useState(false);\n const [isCloseClicked, setIsCloseClicked] = useState(false);\n const [form] = Form.useForm();\n const [inputValue, setInputValue] = useState(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n const [submitDisabled, setSubmitDisabled] = useState(true);\n const isNotPublic = !isScaPublicPage();\n\n // const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n const {Group} = Radio;\n useEffect(() => {\n onViewChange(linksDropDownFromSuggestion);\n }, [linksDropDownFromSuggestion]);\n\n\n // const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n const hostnameEditor = \n {\n if (!isCloseClicked) {\n try {\n await store?.updateHostname(inputValue);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setShowEditor(false);\n } catch (e) {\n return Promise.reject(e);\n }\n }\n }}\n initialValues={{\n urlInput: inputValue,\n }}>\n {'Page URL'} \n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n {\n setInputValue(e.target.value);\n if (!e.target.value) {\n setSubmitDisabled(true);\n } else {\n setSubmitDisabled(false);\n }\n }\n }\n placeholder={t('enter-url')} />\n\n \n \n {\n e.preventDefault();\n setInputValue(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n setShowEditor(false);\n }}\n disabled={store?.isUpdatingHostname}\n >\n {store?.isUpdatingHostname ? : t('cancel')}\n \n setIsCloseClicked(false)}\n >\n {store?.isUpdatingHostname ? : 'Update'}\n \n \n\n \n ;\n\n const topMessage = \n {hostnameEditor}\n {isNotPublic && (store?.content?.importedFromUrl || store?.content?.hostname ? <>\n \n Suggestions shown for \n \n {sanitizeUrl(store?.content?.hostname ?? store?.content?.importedFromUrl)}\n \n \n \n setShowEditor(!showEditor)} style={{marginLeft: 'auto'}}>\n \n : <>\n To get Link Suggestions setShowEditor(!showEditor)}>specify a Page URL \n )}\n ;\n\n const viewChangeDropdown = \n e.stopPropagation()}>\n onViewChange(e.target.value)}>\n Internal Link Suggestions \n External Link Suggestions \n \n \n ;\n\n const keywordsDropdown = \n Show Internal Link Suggestions for following target keywords: \n e.stopPropagation()}>\n {visibleKeywords?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const viewControlls = \n \n \n {currentView === 'links' ? 'Internal Links' : 'External links'} \n \n \n\n {currentView === 'links' ? \n Keywords {visibleKeywords?.filter(kw => kw.active)?.length} / {visibleKeywords?.length} \n : null}\n\n ;\n\n const SearchAndSort = \n \n termSearchHandler(e)}/>\n \n {/* \n {store?.isAnalyzing ? : \n {toJS(store.content?.internalLinkSuggestions)?.map((cluster, id) => {\n return \n \n Link Suggestions in cluster: \n {cluster.results?.length} \n \n }>\n item.trim() === cluster.keyword).length > 0}\n onClick={() => handleOnClusterClick(cluster.keyword)}>{`#${cluster.keyword} - ${cluster.results?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n */}\n ;\n\n return \n {topMessage}\n {viewControlls}\n {SearchAndSort}\n ;\n});\n\nconst Wrapper = styled.div`\n margin-bottom: 10px;\n`;\n\nconst EditorContainer = styled.div<{show: boolean}>`\n display: ${p => p.show ? 'block' : 'none'};\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n border-radius: 5px;\n position: absolute;\n top: 20px;\n right: 0;\n padding: 15px 10px;\n width: 300px;\n z-index: 1;\n `;\nconst FormStyled = styled(Form)`\n .ant-form-item {\n margin-bottom: 10px;\n }\n\n .ant-form-item-explain.ant-form-item-explain-error {\n div {\n color: #ff4d4f;\n }\n }\n `;\n\nconst HostnameContainer = styled.div`\n position: relative;\n display: flex;\n font-size: 12px;\n margin-bottom: 10px;\n`;\nconst HostnameLink = styled.a`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 150px);\n margin-left: 5px;\n color: #34AEF3;\n`;\nconst HostnameLinkBtnContainer = styled.div`\n width: 14px;\n height: 14px;\n margin-left: 10px;\n cursor: pointer;\n`;\n\nconst ViewControllsContainer = styled.div`\n display: flex;\n`;\nconst AddNewUrlBtn = styled.div`\n font-size: 12px;\n margin-left: 5px;\n color: #40a9ff !important;\n text-decoration: underline;\n cursor: pointer;\n`;\nconst InputStyeld = styled(CommonInput)`\n `;\nconst ButtonContainer = styled(Form.Item)`\n .ant-form-item-control-input-content {\n display: flex;\n justify-content:flex-end;\n }\n `;\n\nconst CancelButton = styled(CommonBtn)`\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n padding: 5px 15px;\n\n span {\n color: #4E5156 !important;\n }\n\n &:hover, &.active, &.focus {\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n }\n `;\nconst UpdateButton = styled(CommonBtn)`\n padding: 5px 15px;\n margin-left: 10px;\n `;\nconst ViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 255px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\nconst RadioStyled = styled(Radio)`\n .ant-radio-checked .ant-radio-inner {\n background-color: #7f4ead !important;\n border-color: #7f4ead !important;\n\n &::after {\n background-color: #fff !important;\n }\n }\n`;\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst ButtonStyled = styled(Button)<{viewSuggestionsOption?: boolean}>`\n background-color: #323539;\n border: 1px solid transparent;;\n font-size: 13px;\n padding: 8px 14px;\n margin: 0 9px 0 0 !important;\n\n &:hover, &:focus {\n background-color: transparent !important;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 230px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\n\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\n// const ClusterTooltipSingleRow = styled.div`\n// display: flex;\n// justify-content: space-between\n// `;\n// const ClusterTooltipLabel = styled.div`\n// font-size: 12px;\n// font-weight: 400;\n// color: #E8E8E8;\n// `;\n\n// const ClusterTooltipValue = styled.div`\n// font-size: 12px;\n// font-weight: 500;\n// color: #FFFFFF;\n// `;\n\nconst SearchAndSortWraper= styled.div `\n margin-top: 10px;\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\n\n// const ClustersWrapper = styled.div`\n// display: flex;\n// `;\n// const ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n// display: flex;\n// flex-wrap: wrap;\n\n// height: ${p => p.expandedClusters ? 'auto' : '25px'};\n// overflow: hidden;\n// `;\n\n// const SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n// background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n// border-radius: 60px;\n// padding: 3px 8px;\n// width: auto;\n// height: 20px;\n// font-size: 11px;\n// margin-right: 6px;\n// margin-bottom: 6px;\n// cursor: pointer;\n\n// &:hover {\n// background-color: #4B4D51 !important;\n// }\n// `;\n\nconst InputStyled = styled(Input)`\n height: 32px;\n`;\n","import {observer} from 'mobx-react';\nimport React, {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {LinkSuggestionsDropdownController} from '../DropdownController/LinkSuggestionsDropdownController';\nimport {InternalLinksSuggestions} from './InternalLinkSuggestions/InternalLinkSuggestions';\nimport {CommonCitations} from './CommonCitations/CommonCitations';\nimport {useStore} from '@/store/root-store';\nimport {SuggestionsDataController} from '../DropdownController/SuggestionsDataController';\nimport {toJS} from 'mobx';\nimport {Button, Input, Popover, Radio, Spin, Tooltip, Form} from 'antd';\nimport {exportLinkIcon} from '@/utils/icons';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import { SmallBadge } from '@/components/common-components/components/badge';\nimport {Pill} from '@/components/layoutV2/user-menu/styles';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\nimport {notification} from '@/utils/notification-v2';\nimport {apiError} from '@/utils/api';\n\ninterface LinkSuggestionTabPRops {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const LinkSuggestionsTab = observer(({viewSuggestionsOption, linksDropDownFromSuggestion}: LinkSuggestionTabPRops) => {\n const [currentView, setCurrentView] = useState<'links' | 'terms'>('links');\n const [activeKeywordsList, setActiveKeywordsList] = useState([]);\n const [searchQuery, setSearchQuery] = useState([]);\n const [dataArr, setDataArr] = useState([]);\n const [initialDataArr, setInitialDataArr] = useState([]);\n const [isQueried, setIsQueried] = useState(false);\n const [anyButtonClicked, setAnyButtonClicked] = useState(false);\n const antIcon = ) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n if (e.target.value.length) setUrlsError('');\n setInputValue(e?.target?.value);\n }\n };\n\n const addDomainPopoverContent = () => {\n return \n To continue, provide a source of Internal links \n \n \n \n \n \n \n \n Add a domain \n We’ll scan the domain and provide inlinks recommendations \n {selectedOption === 'domain' &&\n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n setDomain(e.target.value)}\n />\n \n }\n \n \n \n \n \n \n \n \n Provide URLs \n Write or paste a list of URLs and we’ll find the best fit for them \n {selectedOption === 'urls' &&\n <>\n \n {urlsError&& {urlsError} }\n \n }\n \n \n \n \n ;\n };\n\n const popoverInnerStyle = {\n width: '500px',\n borderRadius: '10px',\n border: '1px solid #D9D9D9',\n background: 'var(--White, #FFF)',\n boxShadow: '0px 1px 20px 0px rgba(0, 0, 0, 0.19)',\n };\n\n\n return <>\n {\n onDataFilter(kwArr);\n }}\n visibleKeywords={activeKeywordsList}\n onFilter={setLinks}\n viewSuggestionsOption={viewSuggestionsOption}\n />\n \n \n \n \n \n Internal links help search engines understand how your content interrelates.\n \n \n {`Links in of the page: ${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.filter(link => link.isUsed).length ?? 0}/${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.length ?? 0}`}\n \n }>\n \n\n {getMsg(calculateUsagePercentage(toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks))}\n \n \n Add links to content easily with AI
\n {dataArr?.length && (currentView == 'links' || currentView == 'terms') ? {\n (dataArr?.length && (currentView == 'links' || currentView == 'terms')) && postLInkSuggestion(currentView);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
:\n \n \n Launching AI Links Assistant.\n Do not modify your article before this tool is fully loaded\n : ''}>\n {\n setIsVisiblePopover(true);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
\n \n }\n \n {currentView === 'links' ? a.isBookmarked > b.isBookmarked ? -1 : 1)} store={currentPage}/> : }\n \n ;\n});\n\nconst Wrapper = styled.div`\n background-color: #2d2f34;\n border-radius: 5px;\n padding: 0 0 13px 0;\n`;\nconst SuggestionsBannerContainer = styled.div<{percent?: number}>`\n background-color: ${p => p.percent < 75 ? '#F1AA3E1C' : '#1FAC471C'};\n border-radius: 5px;\n padding: 9px 10px;\n font-size: 12px;\n margin: 10px 6px;\n\n .infoBannerIcon {\n width: 15px;\n color: ${p => p.percent < 75 ? '#F1AA3E' : '#1FAC47'};\n margin-right: 5px;\n }\n`;\n\nconst TooltipTitle = styled.div`\n`;\nconst TooltipDescription = styled.div`\n font-size: 12px;\n color: #a3a4a4;\n`;\n\nconst LinksWrapper = styled.div<{anyButtonClicked?: boolean}>`\n\nbackground-image: linear-gradient(to left, rgb(52 174 243 / 9%), rgba(52, 174, 243, 0.42));\ndisplay: flex;\n// justify-content: space-between;\nheight: 35px;\nalign-items: center;\nmargin: 0 7px 20px 7px;\npadding: 0 15px;\nborder-radius: 5px;\np{ \n margin-bottom: 0;\n font-size: 12px;\n &:last-child{\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 30%;\n margin-left: 10px;\n color: #34AEF3;\n cursor: ${props => props.anyButtonClicked ? 'not-allowed' : 'pointer'};\n text-decoration: underline;\n }\n}\n`;\n\nconst StyledPopover = styled(Popover)`\n .ant-popover-inner-content {\n padding: 0px !important;\n }\n`;\n\nconst PopoverContentWrapper = styled.div`\n margin: 6px 4px;\n`;\n\nconst PopoverTitle = styled.p`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin-bottom: 15px !important;\n`;\n\nconst AddDomainSection = styled.div`\n display: flex; \n width: 460px;\n min-height: 50px;\n flex-shrink: 0;\n border-radius: 12px 12px 0px 0px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n padding: 12px 16px;\n`;\n\nconst ProvideUrlsSection = styled.div`\n display: flex;\n width: 460px;\n min-height: 58px;\n flex-shrink: 0;\n border-radius: 0px 0px 12px 12px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n margin-bottom: 15px;\n padding: 12px 16px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n`;\n\nconst AddDomainTitle = styled.div`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 2px;\n`;\n\nconst AddDomainDesc = styled.div`\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 10px;\n`;\n\nconst AddDomainInput = styled(Input)`\n width: 400px;\n height: 32px;\n flex-shrink: 0;\n border-radius: 6px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--White, #FFF);\n`;\n\nconst DomainDetails = styled.div`\n .ant-form-item {\n margin-bottom: 0px !important;\n } \n\n`;\n\nconst ProvideUrlsDetails = styled.div`\n \n`;\n\nconst Dismiss = styled.button`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Body-background, #F2F2F5);\n border: none;\n cursor: pointer;\n`;\n\nconst Update = styled(Button)`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Blue, #2D6CCA);\n color: white;\n min-width: 120px;\n &:hover {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n &:focus {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n`;\n\nconst ErrorMessageForURL = styled.span`\n color: #ff4d4f;\n font-size: 14px;\n line-height: 1.5715;\n`;\n","import {useCallback, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {\n Divider,\n Row,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faFilePlus, faMessageCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useTranslation} from 'next-i18next';\nimport {QuestionModel} from '@/store/content-optimizer/CurrentPageModel';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {debounce, isNil} from 'lodash';\nimport {insertText} from '@/utils/editor-scripts';\nimport {EditorState} from 'draft-js';\n\ninterface Props {\n question: QuestionModel;\n i: number | string;\n}\n\n\nexport const SingleQuestion = observer(({question, i}: Props) => {\n const {contentOptimizer: {\n contentFragment,\n },\n } = useStore('');\n const {contentOptimizer: {currentPage, aiOutline}} = useStore('');\n const [copySuccess, setCopySuccess] = useState(false);\n const [aiCopied, setAiCopied] = useState(false);\n const [creatingPage, setCreatingPage] = useState(false);\n const [isAiGenerating, setIsAiGenerating] = useState(false);\n const {t} = useTranslation('common');\n\n const antIcon = \n {t('question')}
\n {question.keyword ? question.keyword : null}
\n \n {question?.sv !== undefined && question?.sv !== null && {`SV: ${searchVolumeFormatter(question.sv)}`}}\n {question?.cpc !== undefined && question?.cpc !== null && {`CPC: ${costPerClickFormatter(question.cpc)}`}}\n \n {t('number-of-uses')}
\n \n {question?.usedCount ?? ''}\n
\n \n }\n >\n \n \n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n }}>\n \n {question?.keyword ?? ''}\n
\n ;\n});\n","\nimport {Typography, Spin, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleQuestion} from './SingleQuestion';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport {copyToClipboardWithHtmlAndText} from '@/utils/clipboard';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const QuestionsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {t} = useTranslation('common');\n\n const {Title} = Typography;\n const antIcon = \n Questions {currentPage?.isAnalyzing ? <Spin indicator={antIcon} style={{marginRight: '20px'}}/> :\n currentPage?.analytics?.questions?.length ? <span className={styles.totalQuestions}>{`${currentPage?.analytics?.questions?.filter(question => question?.usedCount > 0)?.length}/${currentPage?.analytics?.questions?.length}`}</span> : null}\n <Tooltip\n title={copySuccess ? <span><FontAwesomeIcon icon={faCheck} style={{color: '#2AC155'}}/>{` Copied to clipboard`}</span> : t('copy-to-clipboard')}\n placement='top'\n overlayClassName={styles.copyTooltip}\n onVisibleChange={visible => {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n <div style={{cursor: 'pointer', color: '#34AEF3', marginLeft: 'auto'}}\n onClick={() => {\n let htmlString = '<p></p>';\n let string = '';\n currentPage?.analytics?.questions?.map(question => {\n htmlString += (`<p>${question.keyword}?</p>`);\n string += (`${question.keyword}?`);\n });\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlString, 'text/html');\n const copiedText = doc.body.textContent;\n navigator.clipboard.writeText(copiedText);\n\n // Example usage:\n const htmlContent = htmlString;\n const plainTextContent = string;\n\n copyToClipboardWithHtmlAndText(htmlContent, plainTextContent);\n setCopySuccess(true);\n }}>\n <FontAwesomeIcon icon={faCopy} style={{marginRight: 5}}/> Copy all\n </div>\n </Tooltip>\n \n {currentPage?.analytics?.questions?.length ? \n \n {currentPage?.analytics?.questions?.map((question, i) => {\n return ;\n })}\n \n :\n \n {/* ('');\n const {contentOptimizer: {currentPage: {addFocusTerms, isFocusTermsLoading}}} = useStore('');\n\n const onClose = () => {\n setShowAddFocusTermModal(false);\n setTerms('');\n };\n\n const handleTerms = (e: React.ChangeEvent) =>{\n const value = e.target.value;\n setTerms(value.replaceAll(',', '\\n'));\n };\n\n const handleAddFocusTerms = async () => {\n try {\n await addFocusTerms({terms: stringToArray(terms, keywordNewLineReg, ',' )});\n onClose();\n notification.success('', 'Focus terms added successfully');\n } catch (error) {\n const errorMessage = apiError(error) as string;\n notification.error('', errorMessage || 'Something went wrong please try again');\n }\n };\n\n return (\n \n Add focus terms \n Provide your own terms and get usage recommendations to elevate your writing. \n \n \n \n );\n});\n\nexport default AddFocusTermModal;\n\nconst StyledModal = styled(Modal)`\n .ant-modal-content{\n border-radius: 12px;\n background: var(--White, #FFF);\n }\n`;\n\nconst Title = styled.div`\n color: var(--Text-black, var(--Black, #121212));\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`;\n\nconst Desc = styled.div`\n width: 370px;\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 4px;\n`;\n\nconst TextArea = styled.div`\n margin-top: 22px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 24px;\n\n .cancel-btn {\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n background-color: transparent;\n border: none;\n cursor: pointer;\n }\n\n .add-btn {\n display: flex;\n width: 115px;\n height: 44px;\n /* padding: 13px 60px 14px 30px; */\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 6px;\n background: var(--Green, #2AC155);\n color: white;\n color: var(--White, var(--White, #FFF));\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n }\n .ant-btn[disabled] {\n background: #f5f5f5 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n }\n`;\n","import {useEffect, useState} from 'react';\nimport {\n Tabs as CommonTabs,\n TabPane as CommonTabPane,\n} from '@/components/common-components/components';\nimport {\n Spin,\n} from 'antd';\nimport {\n LoadingOutlined,\n} from '@ant-design/icons';\nimport styles from './style.module.scss';\nimport {useTranslation} from 'next-i18next';\n// import {VideoPopOver} from '@/components/common-components/components/popover';\nimport {FocusTermsTab} from './FocusTermsTab/FocusTermsTab';\nimport {observer} from 'mobx-react';\nimport {LinkSuggestionsTab} from './LinkSuggestionsTab/LinkSuggestionsTab';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {QuestionsTab} from './QuestionsTab/QuestionsTab';\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_FOCUS_TERMS_TAB_OPEN, SCA_PAGE_QUESTIONS_TAB_OPEN, SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN} from '@/constants/events';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\nimport AddFocusTermModal from './DropdownController/AddFocusTermModal';\n\ninterface FocusTermsTabsProps {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\nconst secondAntIcon = onChangeTab(key)}\n >\n \n \n \n {t('topical-terms')}\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedTerms}\n /{currentPage?.analytics?.focusTerms?.length}\n )\n }\n \n \n \n }\n key='1'\n style={{'outline': 'none'}}>\n \n \n \n Questions\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedQuestions}\n /{currentPage?.analytics?.questions?.length}\n )\n }\n \n \n \n }\n key='2'\n style={{'outline': 'none'}}>\n {isNotPublic && \n \n \n Link Suggestions\n \n \n {currentPage?.isFetchingIntLinksSug ?\n () :\n (\n {currentPage?.content?.totalUsedSuggestions}\n /{currentPage?.content?.internalLinkSuggestionsV2?.allLinks?.length}\n )\n }\n \n \n \n }\n key='3'\n style={{'outline': 'none'}}>\n \n \n \n \n );\n});\n\nconst CommonTabsStyled = styled(CommonTabs)`\n .rc-tabs-extra-content {\n background-color: transparent !important;\n border: 1px solid $color-gray-dark-medium;\n border-radius: 5px;\n cursor: pointer;\n font-size: $font-size-12;\n height: 25px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n padding: 0 5px;\n transition: all 0.2s ease-in;\n }\n\n .focusTermsTabTitleValue {\n color: $color-gray-light;\n display: block;\n font-size: $font-size-12;\n font-weight: 400;\n margin-left: 5px;\n\n .ant-spin-spinning {\n height: 10px;\n }\n\n .customSpinner {\n font-size: 12px !important;\n }\n }\n\n .rc-tabs-content-holder {\n background-color: transparent !important;\n padding-top: 15px;\n }\n\n .rc-tabs-nav {\n border-bottom: 1px solid #4E5156;\n }\n .rc-tabs-nav-list {\n justify-content: space-between;\n }\n .rc-tabs-nav-operations {\n display: none !important;\n }\n\n .rc-tabs-tab {\n margin-left: 20px !important;\n\n &:first-child {\n margin-left: 0px !important;\n }\n }\n\n @media screen and (max-width: 1400px) {\n .rc-tabs-tab {\n margin-left: 0px !important;\n margin-right: 15px !important;\n }\n \n }\n\n .rc-tabs-tab-btn {\n padding: 5px 0 !important;\n }\n\n .rc-tabs-ink-bar {\n background-color: #F1AA3E !important;\n border-radius: 2px;\n }\n`;\n\nconst TabsStyled = styled(CommonTabPane)<{expanded: boolean; editorScrolled: boolean}>`\n \n .ant-collapse {\n overflow-y: ${p => p.expanded ? 'auto' : 'inherit'};\n height: ${p => p.expanded ? `calc(100vh - ${p.editorScrolled ? 292 : 300}px)` : 'auto'};\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n }\n`;\n\nconst TabTitleContainer = styled.div<{active: boolean}>`\n\n .tabTitle {\n font-weight: 400;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n\n .tabExtraInfo {\n padding-bottom: 8px;\n\n .tabUsageContainer {\n display: flex;\n\n .usageValue {\n font-size: 18px;\n font-weight: 600;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n .totalValue {\n span {\n font-size: 12px;\n color: #A3A4A4;\n }\n }\n }\n }\n\n`;\n","/* eslint-disable max-len */\n\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {ReactNode} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport styles from './style.module.scss';\n\n\ninterface Props {\n label: string;\n value?: number;\n tooltipLabel?: string | ReactNode;\n showTooltip?: boolean;\n loading?: boolean;\n min?: number;\n max?: number;\n headingData?:{\n h1: number;\n h2: number;\n h3: number;\n h1Min: number;\n h1Max: number;\n h2Min: number;\n h2Max: number;\n h3Min: number;\n h3Max: number;\n };\n linksData?:{\n internalLinks: number;\n externalLinks: number;\n internalLinksMin: number;\n internalLinksMax: number;\n externalLinksMin: number;\n externalLinksMax: number;\n };\n}\n\nexport const SingleMetrics = observer(({label, value, tooltipLabel, showTooltip, loading, min, max, headingData, linksData}:Props) => {\n const secondAntIcon = \n {label === 'Headings:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n \n :\n <>\n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n :\n }\n :\n label === 'Links:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n linksData.internalLinksMax) ? faArrowDown : faCheck} color={(linksData.internalLinks < linksData.internalLinksMin) || (linksData.internalLinks > linksData.internalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '} Internal: {linksData.internalLinks}\n \n {`${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `/` : '/'} ${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `${linksData.internalLinksMin}-${linksData.internalLinksMax}` : ''}`}\n \n \n \n linksData.externalLinksMax) ? faArrowDown : faCheck} color={(linksData.externalLinks < linksData.externalLinksMin) || (linksData.externalLinks > linksData.externalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '}External: {linksData.externalLinks}\n \n {`${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `/` : ''} ${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `${linksData.externalLinksMin}-${linksData.externalLinksMax}` : ''}`}\n \n \n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n :\n <>\n {label} \n {!loading ?\n showTooltip ?\n \n \n max) ? faArrowDown : faCheck} color={(value < min) || (value > max) ? '#FF8536' : '#1FAC47'}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n \n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n cursor: default;\n height: 18px;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1FAC47' : '#F44343'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 2px;\n margin-right: 3px;\n`;\nconst RangeValues = styled.div`\n color: #A3A4A4 !important;\n font-size: 10px;\n display: inline-flex;\n margin-left: 2px;\n\n @media screen and (max-width: 1400px) {\n font-size: 8px;\n }\n`;\nconst StyledLable = styled.p`\n margin-bottom: 0px;\n width: 72px;\n text-align: end;\n margin-right: 5px;\n color: #E8E8E8;\n`;\nconst StyledIcon = styled(FontAwesomeIcon)`\n width: 12px;\n`;\n","/* eslint-disable no-console */\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {isNil} from 'lodash';\nimport {SingleMetrics} from '../SingleMetrics';\nimport {SkeletonHorizontalLoaderGray} from '@/components/common-components';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck, faArrowUpRightFromSquare} from '@fortawesome/pro-regular-svg-icons';\nimport {useState, Dispatch, SetStateAction} from 'react';\nimport {Tabs, Tooltip} from 'antd';\nimport {TabPane} from 'rc-tabs';\nimport {toJS} from 'mobx';\n\ninterface ContentScoreProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const ContentScore = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: ContentScoreProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n isWordCountLoading,\n feTargetKeywords,\n currentEditorState,\n isScoreLoading,\n isFetchingIntLinksSug,\n analytics,\n content: {\n score,\n scoreExtended,\n wordCount,\n suggestedWordCountLimits,\n scoreCounts,\n internalLinkSuggestionsV2,\n },\n },\n }} = useStore('');\n\n const [activeKey, setActiveKey] = useState('internal');\n\n const chartOption={\n grid: {\n top: '0px',\n bottom: '0px',\n },\n series: [{\n min: 0,\n max: 100,\n type: 'gauge',\n axisLine: {\n roundCap: false,\n lineStyle: {\n width: 10,\n color: [\n [0.33, '#f44343'],\n [0.66, '#f1aa3e'],\n [1, '#1ea745'],\n ],\n },\n },\n progress: {\n show: false,\n },\n startAngle: 180,\n radius: '90%',\n endAngle: 0,\n pointer: {\n width: 4,\n icon: 'roundRect',\n length: '25%',\n offsetCenter: [0, '-80%'],\n itemStyle: {\n color: '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n splitLine: {\n distance: -13,\n length: 15,\n lineStyle: {\n color: '#24262a',\n width: 6,\n },\n },\n splitNumber: 3,\n axisLabel: {\n show: false,\n color: 'auto',\n distance: 40,\n fontSize: 20,\n },\n detail: {\n show: false,\n },\n data: [{\n value: score ?? 0,\n }],\n }],\n };\n\n const viewSuggestionHandler = (key: 'links' | 'terms') => {\n setViewSuggestionsOption(true);\n setLinksDropDownFromSuggestion(key);\n setTimeout(() => {\n setViewSuggestionsOption(false);\n }, 1000);\n };\n const scoreLeftPosition = (score?: number) => {\n if (!score || score === 0) return '31%';\n if (score < 100 ) return '27%';\n if (score === 100 ) return '21%';\n };\n const avgTopLeftPosition = (avg?: number, top?: number) => {\n if (!avg && !top) return '25%';\n return '17%';\n };\n\n const shouldShowTooltip = (min?: number, max?: number) => {\n if (isNil(min) || isNil(max)) {\n return false;\n }\n\n return true;\n };\n\n const tooltipMsg = (key: string, min?: number, max?: number, cur?: number) => {\n let msg = '';\n if (cur <= min) msg = `Try to use more ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= max) msg = `Try to use less ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= min && cur <= max) msg = `Good job. You're in the optimal range.`;\n return msg;\n };\n\n const setHeadingsTooltip = (h1value: number, h1Min: number, h1Max: number, h2value: number, h2Min: number, h2Max: number, h3value: number, h3Min: number, h3Max: number) => {\n return \n \n H1 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h1value}/{h1Min}-{h1Max}\n \n
\n \n H2 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h2value}/{h2Min}-{h2Max}\n \n
\n \n H3 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h3value}/{h3Min}-{h3Max}\n \n
\n ;\n };\n const onChangeTab = key => {\n setActiveKey(key);\n };\n\n const openText = scrollToText => {\n const anchorTag = document.querySelector('a[href=\"' + scrollToText + '\"]') as HTMLElement;\n if (anchorTag) {\n anchorTag?.classList.add('animateAnchor');\n anchorTag?.scrollIntoView({behavior: 'smooth', block: 'start'});\n setTimeout(() => {\n anchorTag?.classList.remove('animateAnchor');\n }, 3000);\n }\n };\n\n\n const setLinksTooltip = (internalLinksData, externalLinksData) => {\n return \n onChangeTab(key)}\n >\n \n Recommended:\n {internalLinksData.internalLinksMin} - {internalLinksData.internalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? ()=> viewSuggestionHandler('links') : ()=> {}}>\n {!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {internalLinksData.internalLinksLength}\n internalLinksData.internalLinksMax) ?\n faArrowDown : faCheck}\n color={(internalLinksData.internalLinksLength < internalLinksData.internalLinksMin) ?\n 'red' : (internalLinksData.internalLinksLength > internalLinksData.internalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {internalLinksData?.internalLinks?.map((item, index) => openText(item)}>{item} \n window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n Recommended:\n {externalLinksData.externalLinksMin} - {externalLinksData.externalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? ()=> viewSuggestionHandler('terms') : ()=> {}}>\n {!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {externalLinksData.externalLinksLength}\n externalLinksData.externalLinksMax) ?\n faArrowDown : faCheck}\n color={(externalLinksData.externalLinksLength < externalLinksData.externalLinksMin) ?\n 'red' : (externalLinksData.externalLinksLength > externalLinksData.externalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {externalLinksData?.externalLinks?.map((item, index) => openText(item)}>{item} window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n ;\n };\n\n const countsSetup = [{\n label: 'Word Count:',\n value: wordCount,\n min: suggestedWordCountLimits?.lower,\n max: suggestedWordCountLimits?.upper,\n tooltipLabel: tooltipMsg('words', suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper, wordCount),\n showTooltip: shouldShowTooltip(suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper),\n loading: isWordCountLoading,\n },\n {\n label: 'Paragraphs:',\n value: scoreCounts?.paragraphs,\n min: scoreCounts?.paragraphsMin,\n max: scoreCounts?.paragraphsMax,\n tooltipLabel: tooltipMsg('paragraphs', scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax, scoreCounts?.paragraphs),\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n },\n {\n label: 'Headings:',\n value: scoreCounts?.headings,\n min: scoreCounts?.headingsMin,\n max: scoreCounts?.headingsMax,\n // tooltipLabel: tooltipMsg('headings', scoreCounts?.headingsMin, scoreCounts?.headingsMax, scoreCounts?.headings),\n tooltipLabel: setHeadingsTooltip(scoreCounts?.h1, scoreCounts?.h1Min, scoreCounts?.h1Max, scoreCounts?.h2, scoreCounts?.h2Min, scoreCounts?.h2Max, scoreCounts?.h3, scoreCounts?.h3Min, scoreCounts?.h3Max),\n showTooltip: false,\n loading: isWordCountLoading,\n headingData: {\n h1: scoreCounts?.h1,\n h2: scoreCounts?.h2,\n h3: scoreCounts?.h3,\n h1Min: scoreCounts?.h1Min,\n h1Max: scoreCounts?.h1Max,\n h2Min: scoreCounts?.h2Min,\n h2Max: scoreCounts?.h2Max,\n h3Min: scoreCounts?.h3Min,\n h3Max: scoreCounts?.h3Max,\n },\n },\n {\n label: 'Links:',\n value: 30,\n min: 2,\n max: 12,\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n tooltipLabel: setLinksTooltip(\n {\n internalLinks: toJS(scoreCounts?.internalLinks),\n internalLinksLength: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n },\n {\n externalLinks: toJS(scoreCounts?.externalLinks),\n externalLinksLength: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n externalLinksMin: scoreCounts?.externalLinksMin,\n externalLinksMax: scoreCounts?.externalLinksMax,\n },\n ),\n linksData: {\n internalLinks: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n externalLinks: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n externalLinksMax: scoreCounts?.externalLinksMax,\n externalLinksMin: scoreCounts?.externalLinksMin,\n },\n },\n // {\n // label: 'Images:',\n // value: scoreCounts?.images,\n // min: scoreCounts?.imagesMin,\n // max: scoreCounts?.imagesMax,\n // tooltipLabel: tooltipMsg('images', scoreCounts?.imagesMin, scoreCounts?.imagesMax, scoreCounts?.images),\n // showTooltip: shouldShowTooltip(scoreCounts?.imagesMin, scoreCounts?.imagesMax),\n // loading: isWordCountLoading,\n // },\n ];\n\n const contentProgressMessage = value => {\n if ((feTargetKeywords?.length == 0 || !currentEditorState?.getCurrentContent().hasText()) && value == 0) {\n return <>\n {!isScoreLoading ? \n Add Target Keywords and Start Writing to see how your content ranks\n :\n \n \n \n \n {score ?? 0}/100\n \n \n \n {`Avg: ${scoreExtended?.avg ?? '-'}`}\n \n \n {`Top: ${scoreExtended?.top ?? '-'}`}\n \n \n\n \n \n {countsSetup.map((item, idx) => {\n return ;\n })}\n \n\n \n\n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst RightSection = styled.div`\n\n`;\nconst StyleHeadingsTooltipTitle = styled.div``;\nconst StyledLinksTabs = styled(Tabs)`\ncolor: #4E5156;\nfont-size: 12px;\nfont-weight: 400;\n.ant-tabs-nav {\n margin: 0 0 12px 0;\n \n .ant-tabs-nav-wrap {\n .ant-tabs-nav-list{\n .ant-tabs-tab{\n padding: 4px 0px;\n &:hover{\n color: #121212;\n }\n }\n .ant-tabs-tab-active{\n .ant-tabs-tab-btn {\n color: #121212;\n\n }\n }\n .ant-tabs-ink-bar{\n background: #F1AA3E !important;\n height: 5px;\n border-radius: 2px 2px 0px 0px;\n }\n }\n }\n}\n`;\n\nconst TabsStyled = styled(TabPane)``;\nconst StyledLinksDiv = styled.ul`\nmax-height: 200px;\noverflow-y: auto;\nmargin-left: -15px;\n.linkopen{\n margin-left: 5px !important;\n cursor: pointer;\n &:hover{\n color: #2D6CCA !important;\n }\n}\n::-webkit-scrollbar {\n width: 4px;\n}\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb {\n background: #3E4144;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n`;\n\nconst StyledRecommender = styled.div`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\n`;\nconst StyledRecomentedValue = styled.span`\ncolor: #121212;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 600;\n`;\nconst StyledSuggestionLink = styled.a<{showAsLink}>`\ncolor: ${p=> p.showAsLink ? '#2D6CCA' : '#A3A4A4'};\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\ntext-decoration-line: none;\nmargin-left: 10px;\ncursor: ${p=> p.showAsLink ? 'pointer' : 'default'};\n&:hover{\n color: ${p=> p.showAsLink ? '#5487d4' : '#A3A4A4'};\n text-decoration-line: ${p=> p.showAsLink ? 'underline' : 'none'};\n}\n`;\nconst StyledCurrentValue= styled.p`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\nmargin-bottom: 2px;\nspan{\n color:#121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 600;\n margin-left: 4px;\n}\n`;\nconst StyledLinkItem = styled.span`\ncolor: #000;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 18px;\nmargin-bottom: 2px;\ncursor: pointer !important;\n&:hover{\n text-decoration: underline;\n}\n`;\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\nmargin-left: 6px;\nheight: 10px;\npadding-bottom:1px;\n`;\n\n// const StyledAnchor = styled.a`\n// text-decoration: none;\n// transition: text-decoration 0.2s;\n\n// &:hover {\n// text-decoration: underline;\n// }\n// `;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\n\nexport const WordCount = observer(() => {\n const secondAntIcon = \n Word count:\n {!currentPage?.isWordCountLoading ? <>\n \n = currentPage?.content?.suggestedWordCountLimits?.lower && currentPage?.content?.wordCount <= currentPage?.content?.suggestedWordCountLimits?.upper}/> \n {currentPage?.content?.wordCount} :\n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n height: 18px;\n cursor: default;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1aceb3' : '#ff8436'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 5px;\n margin-right: 5px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {ContentScore} from './ContentScore';\nimport {useTranslation} from 'next-i18next';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {Progress} from 'antd';\nimport {getProgressColor} from '@/utils/colors';\nimport {WordCount} from './WordCount/WordCount';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {Dispatch, SetStateAction} from 'react';\ninterface HeaderSectionProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const HeaderSection = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: HeaderSectionProps) => {\n const {t} = useTranslation('common');\n const {\n contentOptimizer: {\n currentPage: {\n isScoreLoading,\n focusTermsExpanded,\n isTaActive,\n isLinkActive,\n content: {\n score,\n },\n },\n }} = useStore('');\n\n\n return <>\n { (!focusTermsExpanded && (!isTaActive && !isLinkActive)) ? \n \n \n {t('content-score')} \n \n \n \n\n \n \n\n : \n \n {!isScoreLoading ? (score ?? '-') : '-'}} />\n \n \n {t('content-score')} \n \n \n \n \n \n }\n ;\n});\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst MiniTitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n\nconst MiniContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n height: 50px;\n`;\n\nconst ScoreAndWordCount = styled.div`\n display: flex;\n`;\nconst RightSection = styled.div`\n margin-left: 10px;\n`;\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < termsForInsertion?.length; i++) {\n if (!termsAssistantSuggestions?.find(item => item.termIncluded?.includes(termsForInsertion[i].name))) {\n prepArr.push(termsForInsertion[i].name);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(termsForInsertion ?? []), ...(termsAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} terms` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\ninterface SingleTermProps {\n term: any;\n}\n\nexport const SingleTerm = observer(({term}: SingleTermProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n stagingTaSuggestions,\n setTaActiveTerm,\n taActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n const [dots, setDots] = useState({\n total: 0,\n saved: 0,\n dismissed: 0,\n });\n\n useEffect(() => {\n const savedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'accepted');\n const dismissedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'dismissed');\n\n setDots(() => {\n return {\n total: term.placements,\n saved: savedPlacements?.length ?? 0,\n dismissed: dismissedPlacements?.length ?? 0,\n };\n });\n }, [...stagingTaSuggestions]);\n\n\n const generatePlacmenetsInfo = dots => {\n if (dots.saved == 0 && dots.dismissed == 0) return `${dots.total} available placements`;\n\n let response = '';\n if ((dots.total - dots.dismissed - dots.saved) > 0) response = ` ‧ ${dots.total} available`;\n if (dots.dismissed) response = `${dots.dismissed} dismissed ${response}`;\n if (dots.saved) response = `${dots.saved} accepted ${dots.dismissed > 0 ? ` ‧ ` : ``} ${response}`;\n return response;\n };\n\n const onTermClickHandler = curTerm => {\n if (!taActiveTerm?.term || taActiveTerm.term !== curTerm.name) {\n setTaActiveTerm({\n class: curTerm.name.replaceAll(' ', '-'),\n term: curTerm.name,\n order: 0,\n });\n } else {\n const totalOccurances = document.getElementsByClassName(taActiveTerm.class)?.length;\n\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: taActiveTerm.order < totalOccurances - 1 ? taActiveTerm.order + 1 : 0,\n };\n\n setTaActiveTerm(updatedValues);\n }\n };\n\n return onTermClickHandler(term)} className={taActiveTerm?.term == term.name ? 'isActive' : ''}>\n \n {term.name}
\n \n \n {generatePlacmenetsInfo(dots)}\n \n \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name))?.sort(item => item.status == 'accepted' ? -1 : item.status == 'default' ? 0 : 1)?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return ;\n if (suggestion.status == 'dismissed') return ;\n if (suggestion.status == 'accepted') return ;\n })}\n \n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: ${opaqueColor('#4E5156', 30)};\n border-radius: 10px;\n cursor: pointer;\n transition: background .3s ease-in;\n display: flex;\n\n .termName { \n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n`;\n\nconst Data = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst PlacementsInfo = styled.div`\n font-size: 12px;\n color: #A3A4A4 !important;\n`;\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 28%;\n margin-left: 2%;\n margin-top: auto;\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\n\nexport const TermsList = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n\n useEffect(() => {\n setFinalTermsList([]);\n if (termsAssistantSuggestions?.length) {\n for (let i = 0; i < termsForInsertion.length; i++) {\n const termOccurances = termsAssistantSuggestions.filter(suggestion => suggestion.termIncluded?.includes(termsForInsertion[i].name));\n if (termOccurances?.length) {\n setFinalTermsList(cur => [...cur, {...termsForInsertion[i], placements: termOccurances?.length}]);\n }\n }\n }\n }, [...(termsAssistantSuggestions ?? []), ...(termsForInsertion ?? 0)]);\n\n return \n {finalTermsList?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {CommonInput} from '@/components/common-components';\nimport {Button, Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCaretDown, faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover, Spin, Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const TermsSelectionDropdown = observer(() => {\n const [selectedTerms, setSelectedTerms] = useState([]);\n const [popoverVisible, setPopoverVisible] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n const [showLimitError, setShowLimitEror] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n fetchTaSuggestions,\n termsForInsertion,\n analytics,\n taSuggestionsLoading,\n },\n }, settings: {\n customer: {getCustomerQuota},\n }} = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}}}} = useStore('');\n\n const antIcon = \n \n \n onTermsSearchHandler(e.target.value)}/>\n \n \n \n {`AI Quota: ${quotaUtilization?.ca?.allowedAiContentGeneration?.consumed}/${quotaUtilization?.ca?.allowedAiContentGeneration?.total}`}\n \n \n \n\n \n onBulkSelectTop20Handler()}>Select top 20 terms \n onUncheckAllClickHandler()}>Uncheck all \n \n {showLimitError ?\n Please select less than 50 topical terms. :\n null}\n \n {[\n ...(analytics?.includeMoreTerms ?? []),\n ...(analytics?.includedTerms ?? []),\n ...(analytics?.includeLessTerms ?? []),\n ].filter(term => term.name.includes(searchQuery))?.map((term, idx) => {\n return \n item.name).includes(term.name)}\n onChange={e => handleCheckboxClick(e, term)}\n disabled={term.status == 'include-less'}>\n {term.name} \n \n \n \n Current usage:\n {term.usedCount}\n \n \n Recommended usage:\n {term.requiredCountMin}\n \n \n Maximum usage:\n {term.requiredCountMax}\n \n }>\n {`${term.usedCount}/${term.requiredCountMin}`} \n \n ;\n })}\n \n \n setPopoverVisible(false)}>Cancel \n \n \n \n );\n\n\n return \n onTriggerClickHandler()}>\n {`Select terms ${selectedTerms?.length}`}\n \n ;\n});\nconst Trigger = styled.div`\n color: #34aef3 !important;\n font-size: 12px;\n cursor: pointer;\n`;\nconst Wrapper = styled.div`\n\n`;\nconst HeadingSection = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\nconst SearchBox = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst QuotaInfo = styled.div`\n color: #4E5156;\n margin-bottom: 12px;\n`;\nconst CommonInputStyled = styled(CommonInput)`\n border: 0px solid transparent;\n height: 30px;\n\n &:active {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n &:hover {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n\n &::placeholder {\n color: #A3A4A4;\n font-weight: 400;\n font-size: 15px;\n }\n`;\nconst ControllsBar = styled.div`\n display: flex;\n justify-content: space-between;\n color: #2D6CCA;\n font-size: 12px;\n background: #F9F9FB;\n box-shadow: 0px 1px 0px #E8E8E8, 0px -1px 0px #E8E8E8;\n margin-left: -15px;\n margin-right: -15px;\n padding: 10px 15px\n`;\nconst BulkControllBtn = styled.div`\n cursor: pointer;\n`;\n\nconst TermsList = styled.div`\n max-height: 300px;\n overflow-y: scroll;\n margin-right: -15px;\n padding-right: 15px;\n margin-top: 10px;\n\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.12) ;\n scrollbar-track-color: rgba(138,138,138,0.32);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.4);\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n }\n`;\nconst SingleTermRow = styled.div<{opaque: boolean}>`\n display: flex;\n\n opacity: ${p => p.opaque ? '.4' : 1};\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n display: flex;\n width: 100%;\n\n .ant-checkbox-wrapper {\n width: 100%;\n }\n\n .ant-checkbox-inner {\n border-radius: 4px !important;\n }\n .ant-checkbox-checked .ant-checkbox-inner {\n background-color: #2D6CCA !important;\n border-color: #2D6CCA !important;\n border-radius: 4px !important;\n }\n`;\n\nconst TermName = styled.div`\n cursor: default;\n margin-left: 10px;\n color: #4E5156;\n`;\nconst TermUsage = styled.div`\n cursor: default;\n margin-left: auto;\n color: #4E5156;\n`;\nconst BtnsContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding-top: 10px;\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Divider, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {TermsList} from './TermsList';\nimport {TermsSelectionDropdown} from './TermsSelectionDropdown';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const TermsAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n editContent,\n stagingTaSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n },\n }} = useStore('');\n\n const antIcon =
'));\n }\n\n if (stagingTaSuggestions[i].isSuggestion) {\n if (stagingTaSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n \n \n Terms Assistant \n \n \n Go through the suggestions for inserting terms to see how they look like in your article. Accept or dismiss individual ones.\n
\n
\n * Save changes to update your article.\n \n \n \n item.status !== 'default')}\n color='green'\n style={{marginBottom: 10, width: '-webkit-fill-available', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n {updatingTa ? 'Updating Article...' : 'Save & Update Article'}\n {updatingTa ? onCancelClickHandler()}>\n Cancel\n \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 50px);\n padding-bottom: 20px;\n`;\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #e8e8e8;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {getProgressColor} from '@/utils/colors';\nimport {numberWithCommas} from '@/utils/number';\nimport {Progress, Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n competitor: SingleCompetitorType;\n loading: boolean;\n}\n\nexport const SingleCompetitor = observer(({competitor, loading}: Props) => {\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n {competitor.url && addDefaultSrc(e)}\n height={20}\n width={20}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor.url}`} />} \n \n {competitor?.url}}>\n {competitor?.title}\n \n\n \n\n \n {`#${competitor?.position}`}\n \n\n {`-`}\n\n \n \n {competitor?.contentScore}\n }\n className={styles.progress}\n />\n \n \n\n {`-`}\n\n \n \n {`${numberWithCommas(competitor?.wordCount) || 0} words`}\n \n \n \n {/* {competitor?.url && urlValidationRegex.test(competitor?.url) ?\n {competitor?.url} : null} */}\n\n {/* {competitor?.metaDesc && competitor?.metaDesc.length > 90 ? competitor?.metaDesc.substring(0, 90) + '...' : competitor?.metaDesc} */}\n \n ;\n});\n","import {useEffect} from 'react';\nimport {SingleCompetitor} from './SingleCompetitor/SingleCompetitor';\nimport styles from './style.module.scss';\nimport css from '../../index.module.scss';\nimport {Typography, Spin, Select, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const TopRankingCompetitors = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {Option} = Select;\n const {Title} = Typography;\n const antIcon = \n Top Ranking Competitors {currentPage?.isAnalyzing && <Spin indicator={antIcon} style={{marginRight: '20px'}}/>}\n \n currentPage.openCompetingFocusTermsDrawer()}>\n Analyse Content\n \n \n\n {currentPage?.analytics?.competitorsData?.length ? \n \n handleOnSortChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n {currentPage?.analytics?.competitorsData?.filter(item => item.keyword === currentPage?.topRankingCompetitorActiveKw)[0]?.competitors?.map(competitor => {\n return competitor?.title && ;\n })}\n \n :\n !currentPage?.content?.targetKeywords?.length ? \n {/* \n {\n updatedButtonConf().map((item, idx) => {\n return \n {\n if (anyButtonClicked || item.disabled) return;\n item.callback();\n }} disabled={item.disabled}>\n {item.loading ? : \n ;\n })\n }\n ;\n});\n\nconst Wrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n`;\nconst SingleItem = styled.div<{hoverColor: string; anyButtonClicked?: boolean; disabled?: boolean}>`\n width: calc(50% - 5px);\n margin-bottom: 10px;\n transition: background-color .3s ease;\n background-color: #323539;\n cursor: ${p => p.anyButtonClicked || p.disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n padding: 5px;\n border-radius: 6px;\n font-size: 13px;\n opacity: ${p => p.disabled ? .4 : 1};\n\n &:hover {\n background-color: ${p => !p.anyButtonClicked && p.hoverColor};\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {FocusTermsTabs} from './FocusTermsAndQuestions/FocusTermsTabs';\nimport {HeaderSection} from './HeaderSection';\nimport {TermsAssistantRightSidebar} from './TermsAssistant/RightSidebar';\nimport {TopRankingCompetitors} from './TopRankingCompetitors/TopRankingCompetitors';\nimport {DrawersTriggers} from './DrawersTriggers';\nimport {useState} from 'react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Analytics = observer(({changeView}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const [viewSuggestionsOption, setViewSuggestionsOption] = useState(false);\n const [linksDropDownFromSuggestion, setLinksDropDownFromSuggestion] = useState<'links' | 'terms'>('links');\n\n return \n {!currentPage?.isLinkActive && }\n {currentPage?.isTaActive ? \n \n \n {!currentPage.focusTermsExpanded ? }\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst ContentContainer = styled.div`\n overflow-y: auto;\n height: 100%;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n\n","import React from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n isSubscriber: boolean;\n isCompetitorsTable: boolean;\n setFilteredCompetitorsData: React.Dispatch>;\n setCompetitors: React.Dispatch>;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n}\n\nexport const KeywordSelector = observer(({isSubscriber, isCompetitorsTable, setFilteredCompetitorsData, setActiveKw, setCompetitors, activeKw}: Props) => {\n const {Option} = Select;\n const {contentOptimizer: {currentPage}} = useStore('');\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n if (isCompetitorsTable) {\n setFilteredCompetitorsData(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n }\n };\n\n return \n \n Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ ;\n});\n\nconst KeywordDropdownWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {Progress, Tooltip, Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {Table} from '@/components/common-components/components/index';\nimport styles from './style.module.scss';\nimport {numberWithCommas} from '@/utils/number';\nimport {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {KeywordSelector} from './KeywordSelector';\nimport {useStore} from '@/store/root-store';\nimport {NextImg} from '@/utils/nextImg';\n\n\ninterface Props {\n store: CurrentPageStore;\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsTable = observer(({\n store,\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n allSchemasCount,\n nullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n }}} = useStore('');\n const [isSmallScreen, setIsSmallScreen] = useState(true);\n const [allowScroll, setAllowScroll] = useState(false);\n\n const onWindowResize = () => {\n setIsSmallScreen(window.innerWidth < 1441);\n setAllowScroll(window.innerWidth < 768);\n };\n\n useEffect(() => {\n onWindowResize();\n window.addEventListener('resize', onWindowResize);\n return () => {\n window.removeEventListener('resize', onWindowResize);\n };\n }, []);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const getProgressColor = (value: number, min: number, average: number, max?: number) => {\n if (value <= min) {\n return '#F44343';\n }\n if (value <= average && value > min) {\n return '#FF8536';\n }\n if (value > average) {\n if (max && value < max) {\n return '#BFE15E';\n }\n return '#52D477';\n }\n return '#52D477';\n };\n\n const reFormatSchemaType = value => {\n const outputString = value.replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');\n return outputString;\n };\n\n const handleTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...competitors];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n setCompetitors(data);\n } else {\n setCompetitors(store?.analytics?.competitorsData?.filter(item => item.keyword === activeKw)[0]?.competitors);\n }\n };\n\n useEffect(() => {\n if (selectedSchema?.value == 'all-schemas') {\n setFilteredCompetitorsData(competitors);\n } else if (selectedSchema?.value == 'no-schemas') {\n setFilteredCompetitorsData(competitors?.filter(item => item?.schema?.length == 0 || item?.schema == null));\n } else {\n const selectedSchemaValue = selectedSchema?.value;\n\n const filteredItems = [];\n\n competitors?.forEach(item => {\n if (item?.schema) {\n if (Array.isArray(item?.schema)) {\n item?.schema?.forEach(ele => {\n if (ele?.graph) {\n if (Array.isArray(ele?.graph)) {\n ele?.graph?.forEach(graphItem => {\n if (Array.isArray(graphItem?.type)) {\n if (graphItem?.type?.includes(selectedSchemaValue)) {\n filteredItems.push(item);\n }\n } else if (graphItem?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n } else if (ele?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n }\n });\n\n setFilteredCompetitorsData(filteredItems);\n }\n }, [selectedSchema]);\n\n const columns = [\n {\n title: () => #,\n dataIndex: 'position',\n key: 'position',\n sortField: 'position',\n width: 45,\n fixed: allowScroll ? false : 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return {record?.position};\n },\n },\n {\n title: () => {'PAGE / URL'.toUpperCase()},\n dataIndex: 'title',\n key: 'title',\n sortField: 'title',\n fixed: allowScroll ? false : 'left' as 'left',\n width: isSmallScreen ? 300 : 'auto',\n ellipsis: true,\n align: 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${record?.url}`} /> \n {record?.title}
\n {record?.url}}>\n \n {record?.title}\n {record?.url}\n \n ;\n },\n },\n {\n title: () => {'DR'.toUpperCase()},\n dataIndex: 'dr',\n key: 'dr',\n sortField: 'dr',\n sorter: (a: any, b: any) => a.dr - b.dr,\n align: 'center' as 'center',\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.dr ? record?.dr % 1 === 0 ? record?.dr : parseFloat(record?.dr.toFixed(2)) : 0;\n return \n \n {percent}\n ;\n },\n },\n {\n title: () => {'CS'.toUpperCase()},\n dataIndex: 'contentScore',\n key: 'contentScore',\n sortField: 'contentScore',\n align: 'right' as 'right',\n sorter: (a: any, b: any) => a.contentScore - b.contentScore,\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.contentScore ? record?.contentScore % 1 === 0 ? record?.contentScore : parseFloat(record?.contentScore.toFixed(2)) : 0;\n return \n {percent }}\n />\n ;\n },\n },\n {\n title: () => {'Schema'.toUpperCase()},\n dataIndex: 'schema',\n key: 'schema',\n sortField: 'schema',\n align: 'center' as 'center',\n width: 150,\n render: (_, record: SingleCompetitorType) => {\n let schemaLength = 0;\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaLength += 1 : Array.isArray(item?.graph) && item?.graph?.map(graphItem => graphItem?.type ? schemaLength += 1 : '');\n });\n\n const schemaItemsList = [];\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaItemsList.push(item) : Array.isArray(item?.graph) && item?.graph?.map(graphItem => schemaItemsList.push(graphItem));\n });\n return \n {record?.schema != null && record?.schema != undefined && Array.isArray(record?.schema) && record?.schema?.length != 0 ?\n <>\n \n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, 0, record?.schema[0])}>{reFormatSchemaType(String(record?.schema ? (record?.schema[0]?.graph ? record?.schema[0]?.graph[0]?.type : record?.schema[0]?.type) : '-'))} \n {schemaLength > 1 &&\n <>\n , \n {schemaItemsList?.map((item, idx) =>\n <>\n {idx == 0 ? '' :\n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, idx, item)}\n style={{width: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2D6CCA', cursor: 'pointer', paddingLeft: '20px'}}>\n {reFormatSchemaType(String(item?.type))} \n }\n ,\n )}}>\n +{schemaLength - 1} \n \n }\n \n : '-'\n }\n ;\n },\n },\n {\n title: () => <>{'int'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'internalLinks',\n key: 'internalLinks',\n sortField: 'internalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.internalLinks?.length - b?.internalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.internalLinks?.length == 0 ?\n {numberWithCommas(record?.internalLinks?.length) || '-' } :\n \n {record?.internalLinks?.length > 0 ? record?.internalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.internalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => <>{'ext'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'externalLinks',\n key: 'externalLinks',\n sortField: 'externalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.externalLinks?.length - b?.externalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.externalLinks?.length == 0 ?\n {numberWithCommas(record?.externalLinks?.length) || '-' } :\n \n {record?.externalLinks?.length > 0 ? record?.externalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.externalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => {'h1'.toUpperCase()},\n dataIndex: 'h1Count',\n key: 'h1Count',\n sortField: 'h1Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h1Count - b?.h1Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h1Count) || '-' };\n },\n },\n {\n title: () => {'h2'.toUpperCase()},\n dataIndex: 'h2Count',\n key: 'h2Count',\n sortField: 'h2Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h2Count - b?.h2Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h2Count) || '-' };\n },\n },\n {\n title: () => {'h3'.toUpperCase()},\n dataIndex: 'h3Count',\n key: 'h3Count',\n sortField: 'h3Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h3Count - b?.h3Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h3Count) || '-' };\n },\n },\n {\n title: () => {'Word Count'.toUpperCase()},\n dataIndex: 'wordCount',\n key: 'wordCount',\n sortField: 'wordCount',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.wordCount - b?.wordCount,\n width: 115,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.wordCount) || '-' };\n },\n },\n ];\n\n return \n \n \n \n \n Types of Schema Found: \n \n setSelectedSchema({idx: 'all-schemas', value: 'all-schemas'})}>All schemas | {allSchemasCount} \n setSelectedSchema({idx: 'no-schemas', value: 'no-schemas'})}>No schemas | {nullCount} \n {schemaTypesList?.map((item, idx) => {\n return setSelectedSchema({idx: `${idx}`, value: item?.value})} key={idx}>{reFormatSchemaType(String(item?.value))} | {item?.count} ;\n })}\n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst DRWrapper = styled.div`\n background-color: rgba(45, 108, 202, 0.07);\n display: flex;\n border-radius: 6px;\n align-items: center;\n justify-content: center;\n width: 55px;\n height: 32px;\n padding: 7px 12px 8px 12px;\n`;\n\nconst PageUrlWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst TypesSchemaFilterWrapper = styled.div`\n\n`;\n\nconst SchemaFilterTitle = styled.div`\n color: #4E5156;\n font-size: 14px;\n margin-left: 10px;\n margin-bottom: 10px;\n`;\n\nconst SchemaFilterWrapper = styled.div`\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n margin-left: 10px;\n width: 97%;\n overflow-x: auto;\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n`;\n\nconst SchemaFilter = styled.div<{selectedSchema?: boolean}>`\n min-width: fit-content;\n min-height: 28px;\n border-radius: 14px;\n background: ${p => p?.selectedSchema ? 'linear-gradient(0deg, rgba(127, 78, 173, 0.20) 0%, rgba(127, 78, 173, 0.20) 100%), #FFF' : '#FFFF'};\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n border: ${p => p?.selectedSchema ? '1px solid #7F4EAD' : '1px solid #E8E8E8'};\n display: flex;\n padding: 5px 10px 6px 10px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n\nconst LinksContainer = styled.div`\n max-height: 300px;\n overflow-y: auto;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n\nconst LinkWrapper = styled.div`\n width: auto;\n font-size: 12px;\n line-height: 14px;\n color: rgb(45, 108, 202);\n white-space: pre-line;\n overflow-wrap: anywhere;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 8px;\n`;\n\nconst StyledAnchor = styled.a`\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst BlueTextWithUnderline = styled.div`\n color: #2D6CCA;\n cursor: pointer;\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst ULStyled = styled.ul`\n padding-left: 0px;\n max-height: 160px;\n overflow-y: auto;\n padding: 5px;\n margin-bottom: 0;\n width: 200px;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n","import styled from 'styled-components';\nimport {faArrowLeft} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {urlValidationRegex2} from '@/constants/regex';\nimport moment from 'moment';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const CompetitorsDetail = observer(() => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n competitorSchemaObject,\n competitorTitle,\n competitorUrl,\n competitorSchemaGraphIdx,\n }}} = useStore('');\n\n const formats = [\n moment.ISO_8601,\n 'MM/DD/YYYY :) HH*mm*ss',\n ];\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const renderSchemaData = dataObj => {\n return <>\n \n {mainLebel && mainLebel != '0' ? mainLebel == 'type' ? `@${mainLebel}` : mainLebel : ''} \n {typeof mainValue !== 'object' ? {typeof mainValue == 'boolean' ? `${mainValue ? 'Yes' : 'No'}` : (\n urlValidationRegex2?.test(String(mainValue)) ? {String(mainValue)} : (\n moment(mainValue, formats, true)?.isValid() || mainLebel?.includes('date') ? moment(mainValue)?.utc()?.format('DD MMM YYYY') : `${mainValue}`\n )\n )} :\n renderSchemaData(mainValue)}\n ;\n })}\n \n \n ;\n };\n\n return <>\n setShowCompetitorTermsTableDetail(false)\n }>\n \n \n \n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitorUrl}`} />\n \n \n {competitorTitle}\n {competitorUrl}\n \n \n \n @context \n {competitorSchemaObject?.context ?? '-'} \n @graph \n {renderSchemaData(competitorSchemaObject?.graph ? competitorSchemaObject?.graph[competitorSchemaGraphIdx] : competitorSchemaObject)}\n \n \n ;\n});\n\nconst BackArrowContainer = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-left: 33px;\n margin-top: 37px;\n width: max-content;\n`;\n\nconst SchemaContainer = styled.div`\n width: 95%;\n margin-left: 30px;\n margin-top: 27px;\n min-height: 630px;\n background-color: white;\n border-radius: 14px;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n`;\n\nconst SchemaLabel = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 8px;\n`;\n\nconst SchemaValue = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n`;\n\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\n\nconst URL = styled.a`\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst SchemaHeader = styled.div`\n display: flex;\n align-items: center;\n margin-left: 30px;\n margin-top: 20px;\n`;\n\nconst SchemaPageTitle = styled.div`\n\n`;\n","import {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction} from 'react';\nimport {CompetitorsTable} from './CompetitorsTable';\nimport {useStore} from '@/store/root-store';\nimport {CompetitorsDetail} from './CompetitorsDetail';\n\ninterface Props {\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsDrawerTab = observer(({\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n setSchemaTypesList,\n allSchemasCount,\n setAllSchemasCount,\n nullCount,\n setNullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer: {\n currentPage: {\n showCompetitorTermsTableDetail,\n }}} = useStore('');\n\n return showCompetitorTermsTableDetail ? ranking : not ranking }\n {`for `}\n {keyword}\n \n {/* used {keyword} {score} times */}\n \n \n);\nconst focusTermsTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n);\nexport const CompetingFocusTermsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n const {contentOptimizer: {currentPage: {analytics, isCompetingFocusTermsDrawerOpen, closeCompetingFocusTermsDrawer, isOpeningKwSuggestionsFromContentResearch, setIsOpeningKwSuggestionFromContentResearch}}} = useStore('');\n const [selectedKeyword, setSelectedKeyword] = useState('');\n const [selectedCompTabKw, setSelectedCompTabKw] = useState('');\n const [isHovered, setIsHovered] = useState(false);\n const [maxElemHeight, setMaxElemHeight] = useState(0);\n const allRef = useRef(null);\n const keywordSuggestionsRef = useRef(null);\n const [activeTab, setActiveTab] = useState('1');\n\n const antIcon = {\n setActiveTab('1');\n setIsOpeningKwSuggestionFromContentResearch(false);\n closeCompetingFocusTermsDrawer();\n }}\n closeIcon={Competitor Content Analysis \n onTabChange(key)}>\n Top competitors {currentPage?.isAnalyzing && \n \n Relevant terms grid {currentPage?.isAnalyzing && \n \n \n Competing Focus Terms \n Check what focus terms your competitors are using \n \n \n exportSingleNode(allRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => (\n {i === 0 ? 'YOU' : i} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n \n Created From Scratch\n \n \n );\n }\n return (\n \n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n CONTENT SCORE\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.contentScores?.map((score, i) => (\n {percent}}\n />\n ))}\n \n
\n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item?.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}\n \n \n Keyword suggestions {currentPage?.isAnalyzing && \n \n \n {/* Keywords Suggestions */}\n Check out what keywords your competitors are using \n \n \n exportSingleNode(keywordSuggestionsRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => {\n return (\n \n \n \n {x.url}\n \n \n Content Score: \n {x.contentScore}\n \n \n Word Count: \n {x.wordCount}\n \n \n }\n key={x?.url}\n >\n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n
\n \n \n TARGET KEYWORD\n USAGE\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.keywordSuggestionsUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: score ? '#2AC155' : '#F44343'}}> \n \n ))}\n \n ))}\n \n \n \n \n );\n});\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: 20px;\n color: #121212;\n line-height: 28px;\n`;\n\nconst TitleStyled = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n line-height: normal;\n margin: 0 0 15px 30px;\n`;\n\nconst Subtitle = styled.div`\n font-size: 16px;\n line-height: 24px;\n color: #4E5156;\n`;\n\nconst SectionHeader = styled.div`\n background: #e2e2e5;\n border-radius: 3px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Square = styled.div<{isHovered: boolean}>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\nconst SelectStyled = styled(Select)`\n width: 100%;\n\n .ant-select-arrow {\n color: #121212;\n }\n`;\n\nconst Site = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n width: auto;\n display: block;\n align-items: left;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst IsNotRanking= styled.span`\n padding: 2px 7px;\n background-color: #F44343;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import {useEffect} from 'react';\nimport {Form, Select, Spin} from 'antd';\nimport {\n Button,\n CommonInput,\n} from '@/components/common-components/components';\nimport styles from './style.module.scss';\n\nimport {useState} from 'react';\nimport {languages} from '@/components/dashboard/pages/content-ideas/drawer/languages';\nimport Flag from '@/components/common-components/components/flag';\nimport {formatCountryCode} from '@/components/dashboard/pages/content-ideas/drawer/languageUtil';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport {observer} from 'mobx-react';\nimport {LoadingOutlined} from '@ant-design/icons';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_CONTENT_IDEAS_GENERATE} from '@/constants/events';\nimport {useStore} from '@/store/root-store';\n\ninterface Props {\n store: ContentIdeasStore;\n pageId: any;\n drawerVisible: boolean;\n}\n\nexport const NewContentIdeaForm = observer(({store, pageId, drawerVisible}: Props) => {\n const {\n settings: {\n customer: {\n getCustomerQuota,\n },\n },\n } = useStore('');\n\n\n const usaCode = languages.find(lang => lang.code == 'en');\n\n\n const antIcon = Need some inspiration? Here you can generate unlimited article ideas on any topic you can think of.
\n\n \n \n );\n});\n","import {useState, useEffect} from 'react';\nimport styles from './style.module.scss';\nimport {faDownload} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n Button,\n} from '@/components/common-components/components';\nimport {CopyOutlined} from '@ant-design/icons';\n\nimport {Divider, Tooltip} from 'antd';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {SCA_PAGE_CONTENT_IDEA_COPY, SCA_PAGE_CONTENT_IDEA_DOWNLOAD} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {useTranslation} from 'next-i18next';\nimport parse from 'html-react-parser';\n\ninterface Props {\n idea: string;\n}\n\nexport const SingleContentIdea = ({idea}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [convertedText, setConvertedText] = useState(idea);\n\n const {t} = useTranslation('landing-page-optimizer');\n\n useEffect(() => {\n // Removing the leading space from string\n const newLineIndex = idea?.search('\\n');\n const textWithoutLeadingSpace = idea?.slice(0, newLineIndex + 1) + idea?.slice(newLineIndex + 2);\n const firstTitle = idea?.slice(0, newLineIndex + 1);\n const result = textWithoutLeadingSpace.replace(firstTitle, '' + firstTitle + '');\n\n setConvertedText(result);\n }, [idea]);\n\n\n const downloadFileToTxt = () => {\n const element = document.createElement('a');\n const file = new Blob([idea], {type: 'text/plain'});\n element.href = URL.createObjectURL(file);\n const breakFileName = idea.split(' ').length;\n const fileName = breakFileName > 4 ? idea.split(' ').slice(0, 4).join('-') : idea.split(' ').slice(0, breakFileName).join('-');\n element.download = `${fileName}`;\n document.body.appendChild(element);\n element.click();\n };\n\n return (\n \n \n {convertedText && parse(convertedText.trim())}\n
\n {\n downloadFileToTxt();\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_DOWNLOAD, {\n 'description': 'Content idea downloaded',\n });\n }}/>\n {\n navigator.clipboard.writeText(idea);\n setCopySuccess(true);\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_COPY, {\n 'description': 'Content idea copied',\n });\n }}>\n \n \n \n \n );\n};\n","// import {useState} from 'react';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport CsvDownloader from 'react-csv-downloader';\nimport {Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleContentIdea} from './SingleContentIdea';\nimport {ExportOutlined} from '@ant-design/icons';\nimport {Button} from '@/components/common-components/components';\n\ninterface Props {\n store: ContentIdeasStore;\n}\n\nexport const ContentIdeas = observer(({store}: Props) => {\n const csvModel = store?.wordsArray.map(item => ({\n title: item.split('\\n')[0],\n text: item.split('\\n')[1],\n }));\n\n const csvColumns = [\n {\n id: 'title',\n displayName: 'Title',\n },\n {\n id: 'text',\n displayName: 'Text',\n },\n ];\n return <>\n {store?.wordsArray.length ? \n {`${store?.wordsArray?.length} ideas generated for \"${store?.keyword}\" `}\n \n \n \n
: null}\n {store?.wordsArray && store?.wordsArray.map((idea, idx) => {\n return {\n contentIdeas.clearContentIdeas();\n setDrawerVisible(false);\n currentPage.setIsOpenContentGeneratorDrawer(false);\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={styles.contentIdeasDrawer}\n afterVisibleChange={visible => {\n if (visible) setDrawerVisible(true);\n }}\n >\n \n \n Content Helper\n \n \n \n \n \n \n );\n});\n","import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip, Spin} from 'antd';\nimport styles from './style.module.scss';\nimport {faCheck, faPlus, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport classNames from 'classnames';\n\ninterface Props {\n keyword: string;\n isIncluded?: boolean;\n}\n\nexport const SimilarKeyword = observer(({keyword, isIncluded}: Props) => {\n const {\n OverviewPage: {\n addToLoadingArray,\n loadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}, getCustomerQuota}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n const antIcon = \n {keyword ? keyword : '-'}\n \n \n\n {loadingArray && loadingArray.includes(keyword) ?\n \n \n Remove\n :\n // adding a check to disable button if total target kw limit is reached\n currentPage?.feTargetKeywords?.length < 15 ?\n onAddKeywordFinish()}>\n \n \n \n\n }\n\n \n ;\n});\n","import {useEffect, useState, useCallback} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {\n Drawer,\n Progress,\n Tooltip, Select} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport styled from 'styled-components';\nimport {formatNumber, numberWithCommas} from '@/utils/number';\nimport {Table, BarChartColumn, SkeletonRingLoader, Pagination, SkeletonHorizontalLoaderGray, Button} from '@/components/common-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {EChartOption} from 'echarts';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {getProgressColor} from '@/utils/colors';\nimport {faArrowUp} from '@fortawesome/pro-regular-svg-icons';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport numeral from 'numeral';\nimport Flag from '@/components/common-components/components/flag';\nimport {SimilarKeyword} from './SimilarKeyword';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const ContentResearchDrawer = observer(() => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const {\n countries: {getSpecificCountryByCode},\n OverviewPage: {\n isContentResearchDrawerOpen,\n loading,\n keywordDetail,\n closeContentResearchDrawer,\n getKeywordDetail,\n removeFromLoadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const countryName = getSpecificCountryByCode(keywordDetail?.countryCode);\n\n const [activeKw, setActiveKw] = useState('');\n const [similarKeywordsPageNumber, setSimilarKeywordsPageNumber] = useState(1);\n const [similarKeywordsPageSize] = useState(8);\n const [similarKeywordsData, setSimilarKeywordsData] = useState([]);\n const [similarKeywordsList, setSimilarKeywordsList] = useState([]);\n\n const [topCompetitorsData, setTopCompetitorsData] = useState([]);\n const [rankingPotentialData, setRankingPotentialData] = useState([]);\n\n const {Option} = Select;\n\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n getKeywordDetail(currentPage?.content?.targetKeywords?.filter(item => item.keyword === value)[0]?.id);\n };\n\n\n /* SIMILAR KEYWORDS TABLE UPDATE START */\n const handleFilterRenderData = useCallback((dataArray: any, pageNumber: number, pageSize: number) => {\n const targetKwArray = currentPage?.content?.targetKeywords && currentPage?.content?.targetKeywords.length ? toJS(currentPage.content.targetKeywords).map(item => {\n return JSON.stringify({\n keyword: item.keyword,\n countryCode: item.countryCode,\n locationId: item.locationId,\n location: item.location,\n });\n }) : [];\n\n let similarKeywordsFormattedData = [];\n if (dataArray.length && targetKwArray?.length ) {\n const updatedData = toJS(dataArray).map(item => {\n return {\n ...item,\n isKwIncluded: targetKwArray.includes(JSON.stringify({\n keyword: item.keyword,\n countryCode: currentPage.content.countryCode,\n locationId: currentPage.content.locationId,\n location: currentPage.content.location,\n })),\n };\n });\n\n\n similarKeywordsFormattedData = updatedData;\n } else {\n similarKeywordsFormattedData = dataArray;\n }\n setSimilarKeywordsData(similarKeywordsFormattedData.slice((pageNumber - 1) * pageSize, ((pageNumber - 1) * pageSize) + pageSize));\n }, []);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n const kwArray = [...(currentPage?.content?.targetKeywords ?? [])].map(kw => kw.keyword);\n removeFromLoadingArray(kwArray);\n handleFilterRenderData([...keywordDetail.similarKeywords], similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n }, [[...(currentPage?.content?.targetKeywords ?? [])].length, activeKw, toJS(keywordDetail?.similarKeywords)?.length, handleFilterRenderData, keywordDetail?.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize]);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n setSimilarKeywordsList(keywordDetail.similarKeywords);\n }\n }, [toJS(keywordDetail?.similarKeywords)?.length, toJS(keywordDetail?.similarKeywords), activeKw]);\n\n\n const onPaginationChange = async (pageNumber: number, pageSize: number) => {\n setSimilarKeywordsPageNumber(pageNumber);\n handleFilterRenderData(keywordDetail.similarKeywords, pageNumber, pageSize);\n };\n\n const handleIssueTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...similarKeywordsList];\n\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n handleFilterRenderData(data, similarKeywordsPageNumber, similarKeywordsPageSize);\n } else {\n handleFilterRenderData(keywordDetail.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n };\n /* SIMILAR KEYWORDS TABLE UPDATE END */\n\n /* TOP COMPETITORS TABLE UPDATE START */\n useEffect(() => {\n if (keywordDetail?.competitors?.length > 0) {\n setTopCompetitorsData(keywordDetail.competitors);\n }\n }, [toJS(keywordDetail?.competitors)?.length, activeKw]);\n\n\n const handleTopCompetitorsTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...topCompetitorsData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setTopCompetitorsData(data);\n } else {\n setTopCompetitorsData(keywordDetail?.competitors);\n }\n };\n /* TOP COMPETITORS TABLE UPDATE END */\n\n /* RANKING POTENTIAL TABLE UPDATE START */\n useEffect(() => {\n const relevanceData = [];\n relevanceData?.push({\n competition: keywordDetail?.typicalTop10 && Object.keys(keywordDetail?.typicalTop10)[0],\n contentScore: keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n dr: keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n wordCount: keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n readAbility: keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n });\n\n if (relevanceData.length > 0) {\n setRankingPotentialData(relevanceData);\n }\n }, [\n activeKw, keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n ]);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n\n const handleRankingPotentialTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...rankingPotentialData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setRankingPotentialData(data);\n } else {\n setRankingPotentialData(keywordDetail?.competitors);\n }\n };\n /* RANKING POTENTIAL TABLE UPDATE END */\n\n const columns = [\n {\n title: 'AVERAGE PER COMPETION',\n dataIndex: 'competition',\n key: 'competition',\n width: 180,\n align: 'left' as 'left',\n render: (_, data) => {data?.competition || '-'},\n },\n {\n title: 'CONTENT SCORE',\n dataIndex: 'contentScore',\n sorter: true,\n sortField: 'contentScore',\n width: 100,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sorter: true,\n sortField: 'dr',\n width: 80,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n width: 110,\n align: 'center' as 'center',\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readAbility',\n dataIndex: 'readAbility',\n align: 'center' as 'center',\n width: 110,\n render: (_, data) => {\n return {data?.readAbility ? data?.readAbility : '-'};\n },\n\n },\n ];\n\n const topCompetitorColumns = [\n {\n title: 'SITE / URL',\n dataIndex: 'hostname',\n key: 'hostname',\n width: 300,\n align: 'left' as 'left',\n fixed: 'left' as 'left',\n render: (_, data) => {\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sortField: 'dr',\n sorter: true,\n width: 60,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n align: 'center' as 'center',\n width: 100,\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readability',\n dataIndex: 'readability',\n align: 'center' as 'center',\n width: 170,\n render: (_, data) => {\n return {data?.readability ? data?.readability : '-'};\n },\n\n },\n ];\n\n const squareTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n );\n\n const SimilarKeywordConfig = [\n {\n title: 'KEYWORD',\n dataIndex: 'keyword',\n key: 'keyword',\n align: 'left' as 'left',\n width: 240,\n render: (_, record) => {\n return ();\n },\n },\n {\n title: 'TREND',\n dataIndex: 'histSv',\n align: 'center' as 'center',\n key: 'histSv',\n width: 70,\n render: (series: EChartOption.Series[]) => {\n const formatSeries = {\n data: series,\n itemStyle: {color: '#7f4ead'},\n type: 'bar',\n };\n return {\n closeContentResearchDrawer();\n }}\n closeIcon={\n Content Research\n \n \n \n Based on Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n \n\n {loading ? :\n {keywordDetail?.countryCode ? :\n \n KD: 75 ? '#F44343' : keywordDetail?.kd < 76 && keywordDetail?.kd > 50 ? '#e4a469' : keywordDetail?.kd < 51 && keywordDetail?.kd > 25 ? '#bfe15e' : '#1d754e' : '#696777'}}>•{keywordDetail?.kd || '-'}\n }\n {loading ? : SV: {numeral(keywordDetail?.sv).format('0.[0][a]')}}\n\n {loading ? :\n Total Search Results: {keywordDetail?.totalSearchResults ? numeral(keywordDetail?.totalSearchResults).format('0.[0][a]') : '0'}}\n \n \n \n \n Ranking Potential\n {keywordDetail?.rankingPotential ?\n \n \n {keywordDetail?.rankingPotential}\n : null }\n data.date) : [],\n type: 'category',\n show: true,\n axisLabel: {\n interval: 10,\n formatter: label => {\n const date = moment(label);\n return `{month|${date.format('MMM')}}-{year|${date.format('YY')}}`;\n },\n rich: {\n month: {\n color: '#77757D',\n lineHeight: 15.54,\n },\n year: {\n color: '#77757D',\n fontSize: 12,\n lineHeight: 12.95,\n },\n },\n },\n splitLine: {\n show: false,\n },\n },\n yAxis: {\n type: 'value',\n show: true,\n axisLabel: {\n formatter: label => {\n return `${formatNumber(label)}`;\n },\n },\n splitLine: {\n lineStyle: {\n color: '#E8E8E8',\n type: 'dashed',\n width: 1},\n show: true,\n },\n },\n grid: {\n height: '70%',\n left: '10%',\n top: '9%',\n },\n series: [\n {\n data: keywordDetail?.svTrend?.map(data => data.volume) || [],\n type: 'line',\n areaStyle: {},\n symbolSize: 2,\n symbol: '',\n },\n ],\n }} />\n }\n\n \n \n\n\n \n \n Common Citations\n {loading ? :\n \n {keywordDetail?.commonCitations?.length ? keywordDetail?.commonCitations?.map((citation, index) => {\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc?.length > 70 ?\n \n {citation?.metaDesc.substring(0, 70) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by:\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp?.metaDesc?.length > 70 ? serp?.metaDesc?.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 9 && (\n {`+${citation?.serps?.length - 9}`}\n )}\n \n : null}\n\n \n ;\n }) : No data available}\n {/* return \n \n \n \n \n Top competitor content \n\n \n \n Similar keywords \n\n \n {\n closeContentResearchDrawer();\n currentPage.setIsOpeningKwSuggestionFromContentResearch(true);\n currentPage.openCompetingFocusTermsDrawer();\n }}>View all keywords\n \n\n \n \n\n \n \n Relevant terms used by Competitors \n\n \n {loading ? : <>\n \n COMPETITOR RANK\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n Created From Scratch\n \n );\n }\n return (\n \n \n {/* {x?.hostname} */}\n \n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {keywordDetail && keywordDetail?.termsGrid?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n \n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}}\n \n \n ;\n});\n\nconst PageTitle = styled.div`\n font-weight: 600;\n margin-bottom: 10px;\n margin-left: 40px;\n font-size: 20px;\n`;\nconst Header = styled.div`\n display: flex;\n margin-bottom: 10px;\n padding-left: 40px;\n`;\n\nconst TitleContainer = styled.div`\nheight: 60px;\nbackground: #2D2F34;\npadding: 18px;\nborder-radius: 8px 8px 0px 0px;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n line-height: 22px;\n`;\n\nconst SectionHeader = styled.div`\n background: #F7F7F8;\n border-radius: 3px;\n margin-right: 4px;\n margin-left: 4px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst MiddleContainer = styled.div`\n display: flex;\n padding: 0 40px 30px 40px;\n`;\n\nconst Square = styled.div<{ isHovered: boolean }>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\n\nconst Site = styled.div`\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n font-size: 12px;\n color: #2D6CCA;\n width: 40px;\n display: flex;\n align-items: center;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import KeywordDetailContent from '@/components/dashboard/pages/keyword-researcher-v2/keyword-detail-drawer-content';\nimport {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react-lite';\n\nexport const KeywordsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n\n return {\n // scroll to related keywords table automaticaly\n if (visible) {\n if (currentPage?.isDrawerFromCa) {\n document.getElementById('SuggestedKeywordTableId')?.scrollIntoView({block: 'center'});\n }\n }\n }}\n onClose={() => {\n currentPage.setIsDrawerFromCa(false);\n currentPage.setIsOpenKeywordDrawer(false);\n currentPage.setActiveTargetKw('');\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={'drawerCloseIcon'}\n closeIcon={ changeView()}>\n ;\n};\n\nconst TechnicalsSwitcherContainer = styled.div`\n display: flex;\n margin-bottom: 20px;\n font-size: 12px;\n align-items: center;\n cursor: pointer;\n`;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faRotateRight} from '@fortawesome/pro-regular-svg-icons';\n\nexport const PageSpeedIndex = observer(() => {\n const secondAntIcon = \n \n Page Speed Index:\n {!currentPage?.isWordCountLoading ? <>\n {generateDotWithColor(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.status) }\n {!isNil(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score) ? <>{Math.round(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score * 100)}/100 : null}\n :\n }\n \n\n\n \n Last Fetch: \n {!currentPage?.content?.updatedAt ? : moment(currentPage?.content?.updatedAt).format('DD MMM YYYY')} \n refetchArticle(currentPage?.content?.uuid) }/>\n\n \n ;\n});\n\n\nconst Container = styled.div`\n cursor: default;\n`;\nconst SpeedIndexContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n margin-top: 5px;\n`;\nconst LastFetchContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n`;\nconst SpeedIndexDot = styled.div`\n border-radius: 2px;\n height: 4px;\n margin-left: 8px;\n margin-right: 3px;\n width: 4px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {Progress, Spin, Tooltip} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styled from 'styled-components';\nimport {getProgressColor} from '@/utils/colors';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {PageSpeedIndex} from '../PageSpeedIndex';\nimport {LoadingOutlined} from '@ant-design/icons';\n\n\nexport const TechnicalScore = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {t} = useTranslation('common');\n\n const antIcon = \n {!currentPage.isScoreLoading ? (currentPage?.analysis?.technicalScore ?? '-') : \n \n {t('technical-score')} \n \n \n \n\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n height: 30px;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst TitleAndWordCount = styled.div`\n margin-left: 10px;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {routes} from '@/utils/const';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faFileChartColumn} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Checkbox as AntdCheckbox, Form, Popover, Spin, Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {TechnicalsViewSwitcher} from '../../Common/ViewSwitcher';\nimport {TechnicalScore} from './TechnicalScore';\nimport {Checkbox} from '@/components/common-components/v2';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const HeaderSection = observer(({changeView}: Props) => {\n const [auditLoader, setAuditLoader] = useState(false);\n const [onPageAuditPopoverVisible, setOnPageAuditPopoverVisible] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {contentAuditStore: {loadContentAudit, setNewRecordId}} = useStore('');\n\n const antIconSecond = \n \n \n Select 1 to 3 Target Keywords \n \n ({\n validator(_, value) {\n const existingValues = form.getFieldsValue(true);\n if (!value || !existingValues['target-keywords']?.length) return Promise.reject(new Error('Please select at least 1 Target Keyword.'));\n if (existingValues['target-keywords']?.length && existingValues['target-keywords']?.length > 3) return Promise.reject(new Error('You can use maximum of 3 Target Keywords.'));\n\n return Promise.resolve();\n },\n })]}>\n \n \n {currentPage?.getUniqueKeywords?.map((kw, idx) => {\n return \n {kw}\n ;\n })}\n \n \n \n \n setOnPageAuditPopoverVisible(false)}>Cancel \n \n \n \n \n \n }>\n setOnPageAuditPopoverVisible(!onPageAuditPopoverVisible)} color='neonBlue' variant='ghost' mode='dark'>\n {auditLoader ? Run Complete Onpage Audit \n \n : \n \n {auditLoader ? Run Complete Onpage Audit \n \n }\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TopSeactionContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst RunPageAuditBtn = styled(Button)`\n color: #4881f0 !important;\n cursor: pointer;\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst BtnText = styled.div`\n margin-left: 5px;\n display: inline-block;\n color: #34AEF3 !important;\n font-size: 12px;\n\n // &:hover {\n // text-decoration: underline;\n // }\n`;\n\nconst PopoverWrapper = styled.div`\n\n`;\n\nconst PopoverTitle = styled.div`\n font-weight: 600;\n margin-bottom: 20px;\n`;\nconst PopoverKwContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst FormStyled = styled(Form)`\n .ant-checkbox-wrapper + .ant-checkbox-wrapper {\n margin-left: 0px;\n }\n\n .ant-checkbox-wrapper {\n line-height: 22px !important;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n`;\n\nconst PopoverBtnContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\n","import {CaretUpFilled} from '@ant-design/icons';\nimport {Col, Collapse, Row} from 'antd';\nimport {Pagination, Checkbox, Tooltip} from 'antd';\nimport classNames from 'classnames';\nimport {ReactNode, useEffect, useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport styles from './style.module.scss';\nimport {ChevronDown, ChevronUp} from 'react-feather';\nimport classnames from 'classnames';\nimport {faFilter, faCaretDown, faCaretUp} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {NextImg} from '@/utils/nextImg';\n\nimport {toJS} from 'mobx';\ninterface filters {\n label: string;\n checked: boolean;\n disabled?: boolean;\n disabledTooltip?: string;\n onChange: () => void;\n}\n\ninterface columnTitle {\n title?: string;\n sorter?: boolean;\n sortKey?: string | number;\n}\n\ninterface Props {\n className?: string;\n icon?: ReactNode;\n title?: string;\n description?: string | ReactNode;\n descriptionColor?: string;\n colTitle1?: string;\n colTitle2?: columnTitle;\n colTitle3?: string;\n colTitle4?: string;\n data?: any;\n dataRenderer?: any;\n pageSize?: any;\n footer?: ReactNode;\n isCollapse?: boolean;\n defaultActive?: boolean;\n filters?: filters[];\n plan?: any;\n warningBar?: ReactNode;\n}\n\nexport const AnalyticsCollapseCard = ({\n className,\n icon,\n title,\n description,\n descriptionColor,\n colTitle1,\n colTitle2 = {\n title: null,\n sorter: false,\n sortKey: null,\n },\n colTitle3,\n colTitle4,\n data,\n dataRenderer,\n pageSize,\n footer,\n isCollapse = true,\n defaultActive = false,\n filters,\n plan = true,\n warningBar,\n}: Props) => {\n const [pageNumber, setPageNumber] = useState(1);\n const [checkData, setCheckData] = useState(false);\n const [isFilterOpened, setIsFilterOpened] = useState(false);\n const [sortOrder, setSortOrder] = useState('');\n const [formatData, setFormatData] = useState(null);\n const [activeKey, setActiveKey] = useState(['']);\n const {t} = useTranslation('common');\n\n const getData = () => {\n if (pageSize) {\n return formatData?.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\n }\n return formatData;\n };\n useEffect(() => {\n if (getData()?.length > 0 || formatData === undefined || footer) {\n setCheckData(isCollapse);\n }\n }, [getData]);\n\n useEffect(() => {\n let newData = [];\n if (data) {\n newData = data.map(item => {\n return toJS(item);\n });\n }\n setFormatData(newData);\n }, [JSON.stringify(data)]);\n\n useEffect(() => {\n if (defaultActive) {\n setActiveKey([title]);\n }\n }, [defaultActive]);\n\n const sortData = (sortBy: string | number) => {\n const formatArray = [...data];\n if (sortOrder === '') {\n setSortOrder('desc');\n setFormatData(formatArray.sort((a, b) => {\n if (b[sortBy] < a[sortBy]) return -1;\n }));\n } else if (sortOrder === 'desc') {\n setSortOrder('asc');\n setFormatData(formatArray.sort((a, b) => {\n if (a[sortBy] < b[sortBy]) return -1;\n }));\n } else if (sortOrder === 'asc') {\n setSortOrder('');\n setFormatData(data);\n }\n };\n\n const changeActiveKey = key => {\n setActiveKey(key);\n };\n\n\n return (\n isCollapse ? (\n \n \n {icon}\n {title}\n \n \n {description}\n \n \n }\n >\n \n {warningBar && warningBar}\n {/* if we have 4 columns */}\n {colTitle3 && colTitle4 ?\n \n
:\n \n
\n }\n\n {getData()?.map((x, i) => dataRenderer(x, i))}\n \n {pageSize && (pageSize < data?.length) && (\n <>\n\n setPageNumber(pageNumber)}\n disabled={!plan}\n />\n \n )}\n {filters && filters.length >= 1 ?\n ( setIsFilterOpened(!isFilterOpened)}\n className={styles.filters}>\n {/* }\n \n \n {\n isFilterOpened && (\n e.stopPropagation()}>\n \n {filters.map((filter, idx) => (\n filter.disabled ?\n \n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n :\n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n ))\n }\n \n \n )\n }\n ) : null }\n \n {footer}\n \n \n );\n};\n","import React, {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react-lite';\nimport {Modal} from '@/components/common-components';\nimport {Divider} from 'antd';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n visible: boolean;\n schema: any;\n setShowModal: Dispatch>;\n}\n\nexport const SchemaModal = observer(({visible, schema, setShowModal}: Props) => {\n const dataList = schema ? JSON.parse(schema) : [];\n const data = (typeof (dataList) === 'object' && Object.keys(dataList).length === 0) ? [] : dataList?.find(item => item.graph) || [];\n const [expanded, setExpanded] = useState(false);\n const dataForDisplay = expanded ? data?.graph : data?.graph?.slice(0, 1);\n return (\n setShowModal(false)}\n footer={ setShowModal(false)}>Close }>\n \n\n \n Schema.org \n {<>\n @context \n {data?.context ?? '-'} \n @graph \n {dataForDisplay?.map((item, index) => {\n return <>#{index + 1} \n \n {`${x[0]}`} \n {`${x[0]}` == 'potentialAction' ? '' : (`${x[0]}` == 'url' ? {`${x[1]}`} :\n {`${typeof(x[1])!=='object' ? x[1] : '-'}`} )}\n {`${x[0]}` == 'potentialAction' ? item.potentialAction?.length > 0 && item?.potentialAction?.map((z, id) => {\n return \n {z?.type} \n {z?.queryInput} \n \n ;\n }) : ''}\n ;\n })}\n \n ;\n })}\n {data?.graph?.length > 1 ? \n setExpanded(!expanded)}>\n {expanded ? 'Hide schema' : 'Show full schema'}\n : ''}\n }\n \n \n \n\n );\n});\n\nconst MainContainer = styled.div`\n width: 100%;\n padding: 25px;\n background: #FFFFFF;\n`;\n\nconst Title = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\nconst Subtitle = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 10px;\n word-break: break-word;\n`;\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\nconst URL = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst ModalContentWrapper = styled.div`\n max-height: 70vh;\n overflow-y: auto;\n margin-top: 10px;\n // border: 1px solid #E8E8E8;\n // border-radius: 8px;\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n`;\n","import css from '../../index.module.scss';\nimport {\n Typography,\n Row,\n Col,\n Popover,\n Tooltip,\n} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport {AnalyticsCollapseCard} from '../../Common/AnalyticsCollapseCard';\nimport styles from '../style.module.scss';\nimport {useTranslation} from 'next-i18next';\nimport {getStatusColor} from '@/utils/colors';\nimport {NextImg} from '@/utils/nextImg';\n\nimport classNames from 'classnames';\nimport {Code, ExternalLink, Image,\n List,\n Video} from 'react-feather';\nimport {WarningMiniBar} from '@/components/common-components/components';\nimport {\n ButtonLink,\n} from '@/components/common-components/components';\nimport {Button} from '@/components/common-components/v2';\nimport {useState} from 'react';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {observer} from 'mobx-react-lite';\nimport {SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, SCA_PAGE_IMAGES_SHOW_MISSING_ALT, SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN} from '@/constants/events';\nimport {SchemaModal} from '../SchemaModal';\nimport {toJS} from 'mobx';\nimport {linkgraphDomain} from '@/utils/const';\n\n\nexport const TechnicalsData = observer(() => {\n const [showMissingAltText, setShowMissingAltText] = useState(false);\n const [isActiveInternalBrokenLinks, setIsActiveInternalBrokenLinks] = useState(false);\n const [isActiveExternalBrokenLinks, setIsActiveExternalBrokenLinks] = useState(false);\n const [showSchemaModal, setShowSchemaModal] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const {Title} = Typography;\n const {t} = useTranslation('common');\n\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/icon/broken-image.svg';\n // };\n\n const translateWord = (status: string) => {\n switch (status) {\n case 'Good':\n return t('good');\n case 'Average':\n return t('average');\n case 'Bad':\n return t('bad');\n case 'Missing':\n return t('missing');\n case 'Not Included':\n return 'Not Included';\n default:\n return '';\n }\n };\n\n const internalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveInternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.internal?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveInternalBrokenLinks(!isActiveInternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveInternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken internal links',\n });\n }\n },\n }];\n\n const uiFormatImageSize = (size: string) => {\n if (size) {\n let returnSize = null;\n const sizeArray = size.split('x');\n returnSize = {`x ${sizeArray[0]}`}
{sizeArray[1]};\n return returnSize;\n } else {\n return '-';\n }\n };\n\n const brokenHeaders = {currentPage?.analysis?.brokenHeaders?.map((item, i) => {\n return {item.type}{(i + 1) < currentPage?.analysis?.brokenHeaders?.length && `, `};\n })}{translateWord(currentPage?.analysis?.status?.headers)};\n\n const getMissingAltText = () => {\n if (showMissingAltText && currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '');\n } else if (currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img;\n }\n };\n\n const getMissingAltTotal = () => {\n if (!currentPage?.analysis?.images?.img?.length) return null;\n if (currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length;\n } else {\n return null;\n }\n };\n\n const generateInternalLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getInternalBrokenLinksCount || currentPage?.analysis?.getInternalBrokenLinksCount === 0) {\n const msg = currentPage?.analysis?.getInternalBrokenLinksCount > 1 || currentPage?.analysis?.getInternalBrokenLinksCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getInternalBrokenLinksCount} ${msg}`);\n if (currentPage?.analysis?.getInternalBrokenLinksCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getInternalRedirectsCount || currentPage?.analysis?.getInternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getInternalRedirectsCount > 1 || currentPage?.analysis?.getInternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getInternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.internal?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const imagesFilter = [{\n label: 'Show only missing alt text',\n checked: showMissingAltText,\n disabled: currentPage?.analysis?.images?.img?.filter(image => !image.alt || image.alt === '')?.length == 0,\n onChange: () => {\n setShowMissingAltText(!showMissingAltText);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_IMAGES_SHOW_MISSING_ALT, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for images with missing alt text',\n });\n }\n },\n }];\n\n const externalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveExternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.external?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveExternalBrokenLinks(!isActiveExternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken external links',\n });\n }\n },\n }];\n\n const generateExternallLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getExternalBrokenCount || currentPage?.analysis?.getExternalBrokenCount === 0) {\n const msg = currentPage?.analysis?.getExternalBrokenCount > 1 || currentPage?.analysis?.getExternalBrokenCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getExternalBrokenCount} ${msg}`);\n if (currentPage?.analysis?.getExternalBrokenCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getExternalRedirectsCount || currentPage?.analysis?.getExternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getExternalRedirectsCount > 1 || currentPage?.analysis?.getExternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getExternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.external?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const getExternalLinks = () => {\n if (isActiveExternalBrokenLinks && currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const getInternalLinks = () => {\n if (isActiveInternalBrokenLinks && currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const displayStatusCode = (statusCode: number) => {\n if (statusCode) {\n if (statusCode >= 200 && statusCode < 300) {\n return {statusCode};\n } else if (statusCode >= 300 && statusCode < 400) {\n return {statusCode};\n } else if (statusCode >= 400) {\n if (statusCode === 429) {\n return {statusCode};\n } else {\n return {statusCode};\n }\n }\n } else {\n return 'N/A';\n }\n };\n\n const displayFollowCode = (followCode: string) => {\n if (followCode) {\n if (followCode === 'nofollow') {\n return 'NF';\n } else {\n return DF;\n }\n } else {\n return '-';\n }\n };\n\n return <>\n \n \n \n {t('head')}\n \n {currentPage?.analysis?.metaSummary?.map(meta => {\n return (\n \n {meta.value}\n {meta.suggestion}\n \n )}\n />\n );\n })}\n \n \n {t('rich-media-tags')}\n \n \n {header.values.length && header.values.map((heading, i) => {\n return {`<${header.type}> `}\n {heading}\n {` `};\n })}\n \n }\n >\n \n
\n : \n
: \n
;\n }}\n />\n \n addDefaultSrc(e)}\n />\n \n \n {\n navigator.clipboard.writeText(image.src);\n }}>{image.src}\n \n ) : '-'}\n {image.alt || '-'}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n setShowSchemaModal(true)}>\n {t('view-schema-markups')}\n \n \n ) : (\n \n {t('view-schema-markups')}\n \n )\n }\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n \n {\n navigator.clipboard.writeText(js.src);\n }}>{js.src}\n \n )}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n ;\n});\n","import {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {HeaderSection} from './HeaderSection';\nimport {TechnicalsData} from './TechnicalsData';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Technicals = observer(({changeView}: Props) => {\n return \n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nconst DataContainer = styled.div`\n height: auto;\n overflow-y: auto;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n","import React from 'react';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport classNames from 'classnames';\n\ninterface Props {\n isSubscriber: boolean;\n store: CurrentPageStore;\n setCompetitors: (competitors: any[]) => void;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n compListCollapsed: boolean;\n}\n\nexport const KeywordSelector = ({store, isSubscriber, setActiveKw, setCompetitors, activeKw, compListCollapsed}: Props) => {\n const {Option} = Select;\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(store?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n };\n\n return \n \n {compListCollapsed ? 'Kw' : 'Keyword'}\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '250px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={classNames(styles.selectInput, compListCollapsed && styles.minified)}\n suffixIcon={ ;\n};\n","import {Checkbox} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {faCheck, faPlus} from '@fortawesome/pro-solid-svg-icons';\nimport {faSquareCheck} from '@fortawesome/pro-light-svg-icons';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {EditorState, Modifier, SelectionState, ContentState} from 'draft-js';\nimport {debounce} from 'lodash';\nimport {observer} from 'mobx-react';\nimport {useCallback, useState} from 'react';\nimport styled from 'styled-components';\n// import {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n\ninterface Props {\n activeCompetitor: any;\n htmlToDraft: any;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const HeadingsTree = observer(({\n activeCompetitor,\n htmlToDraft,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedIndexData,\n checkedIndexData}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer:\n {currentPage: {\n setCopiedHeadings,\n }}} = useStore('');\n\n\n const [addedHeadings, setAddedHeadings] = useState([]);\n const [copiedHeading, setCopiedHeading] = useState({\n tag: '',\n text: '',\n });\n\n const [filters, setFilters] = useState([\n {\n tag: 'h1',\n active: true,\n },\n {\n tag: 'h2',\n active: true,\n },\n {\n tag: 'h3',\n active: true,\n },\n {\n tag: 'h4',\n active: true,\n },\n {\n tag: 'h5',\n active: true,\n },\n {\n tag: 'h6',\n active: true,\n },\n ]);\n\n const onCheckboxChecked = (checked: boolean, tag: string) => {\n const curFilters = [...filters];\n\n const updatedFilters = curFilters.map(filter => {\n if (filter.tag == tag) {\n return {\n ...filter,\n active: checked,\n };\n } else {\n return {...filter};\n }\n });\n\n setFilters(updatedFilters);\n };\n\n const checkboxClickHandler = (e, headingContent, headingTag, idx) => {\n if (e?.target?.checked) {\n setCheckedCount(checkedCount + 1);\n const newItem = {'id': idx, 'headingContent': headingContent, 'headingTag': headingTag};\n setCheckedIndexData([...checkedIndexData, newItem]);\n } else {\n setCheckedCount(checkedCount - 1);\n\n const updatedCheckedIndexData = checkedIndexData.filter(item => item?.id !== idx);\n setCheckedIndexData(updatedCheckedIndexData);\n }\n };\n\n const handleCopyClick = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n navigator.clipboard.writeText(updatedCopiedHeadings);\n };\n\n // const [blockskMap, setBlocksMap] = useState([]);\n\n // const mapHeadingsToDraftBlockTypes = {\n // 'h1': 'header-one',\n // 'h2': 'header-twp',\n // 'h3': 'header-three',\n // 'h4': 'header-four',\n // 'h5': 'header-five',\n // 'h6': 'header-six',\n // }\n\n // useEffect(() => {\n // if (!currentPage?.getCurrentEditorState) return;\n\n // const contentState = currentPage.getCurrentEditorState.getCurrentContent();\n\n // const map = convertToRaw(contentState).blocks\n // setBlocksMap(map);\n\n // }, [currentPage?.getCurrentEditorState]);\n\n\n // const checkIfEditorContainsHeading = (text: string, type: string) => {\n // if (!blockskMap || !blockskMap.length) return false;\n\n // const included = blockskMap.find(block => block.type == mapHeadingsToDraftBlockTypes[type] && block.text == text);\n\n // return included;\n // }\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n currentPage.editContent(state, isNewDecorations);\n }, 2000);\n\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const insertText = async (textToAdd: any, headingType?: string, cleanText?: string) => {\n // NEW FLOW start\n const {contentBlocks, entityMap} = htmlToDraft(textToAdd);\n // const contentState = convertHtmlToEditorState(textToAdd);\n\n const selection = currentPage.currentEditorState.getSelection();\n\n const newSelection = new SelectionState({\n anchorKey: selection.getAnchorKey(),\n anchorOffset: selection.getEndOffset(),\n focusKey: selection.getAnchorKey(),\n focusOffset: selection.getEndOffset(),\n });\n\n\n const fragment = ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap();\n // const fragment = contentState.getCurrentContent().getBlockMap();\n\n const nonStyledState = Modifier.replaceWithFragment(\n currentPage.currentEditorState.getCurrentContent(),\n newSelection,\n fragment,\n );\n\n // WE are calculating nodes to toggle blue background on new Ai generated nodes\n let firstNewBlockId: number;\n const currentBlock = selection.getAnchorKey();\n const nextBlock = currentPage.currentEditorState.getCurrentContent().getBlockAfter(selection.getAnchorKey())?.getKey();\n\n const existingNodes = document.querySelectorAll('[data-block=\"true\"]');\n existingNodes?.forEach((elem, id) => {\n if (elem.getAttribute('data-offset-key') && elem.getAttribute('data-offset-key') == `${currentBlock}-0-0`) {\n firstNewBlockId = id + 1;\n }\n });\n\n\n const updatedState = EditorState.push(currentPage.currentEditorState, nonStyledState, 'insert-fragment');\n currentPage.setCurrentEditorState(updatedState);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('[data-block=\"true\"]');\n if (newTextElems.length) {\n for (let i = firstNewBlockId; i <= newTextElems.length; i++) {\n if (newTextElems[i]?.getAttribute('data-offset-key') && newTextElems[i]?.getAttribute('data-offset-key') != `${nextBlock}-0-0` && newTextElems[i]?.getAttribute('data-offset-key') != `${currentBlock}-0-0`) {\n newTextElems[i].classList.add('newTextBlock');\n } else {\n return;\n }\n }\n }\n }, 500);\n\n debouncedUpdate(updatedState, currentPage.analytics?.focusTerms, currentPage.focusTermsClassNames, false);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('.newTextBlock');\n if (newTextElems.length) {\n newTextElems.forEach(elem => {\n elem.classList.remove('newTextBlock');\n });\n }\n }, 3500);\n\n const curAddedHeadings = [...addedHeadings];\n const updatedAddedHeading = [];\n checkedIndexData?.map(item => {\n updatedAddedHeading?.push({type: item?.headingTag, text: item?.headingContent});\n });\n if (headingType && cleanText) {\n setAddedHeadings([\n ...curAddedHeadings,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n } else {\n setAddedHeadings([\n ...curAddedHeadings,\n ...updatedAddedHeading,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n }\n // NEW FLOW END\n };\n\n const addHeadingsHandler = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n insertText(`${updatedCopiedHeadings}`);\n setShowBulkAddContentBtn(true);\n setCheckedCount(0);\n setCheckedIndexData([]);\n };\n\n return \n Page structure\n \n \n {filters.map((filter, idx) => {\n if (activeCompetitor?.headingsHierarchy?.find(heading => heading.tag == filter.tag)) {\n return onCheckboxChecked(e.target.checked, filter.tag)}\n key={idx}>\n {filter.tag}\n ;\n }\n })}\n \n {showBulkAddContentBtn && setShowBulkAddContentBtn(false)}> Bulk Add to Content }\n \n {!showBulkAddContentBtn &&\n \n {\n addHeadingsHandler();\n }}> \n \n Copy to clipboard\n }> {\n handleCopyClick();\n }}> Copy \n {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}> Cancel \n \n }\n \n {activeCompetitor?.headingsHierarchy?.filter(heading => filters.filter(filter => filter.active)?.map(filter => filter.tag)?.includes(heading.tag))?.map((heading, idx) => {\n const isIncluded = [...addedHeadings].filter(item => item.text == heading.content && item.type == heading.tag)?.length > 0;\n return \n {!showBulkAddContentBtn && checkboxClickHandler(e, heading.content, heading.tag, idx)} />\n }\n \n {isIncluded ? \n {heading.content} \n \n \n {copiedHeading.tag == heading.tag && copiedHeading.text == heading.content ? <>\n }>\n {\n navigator.clipboard.writeText(`<${heading.tag}>${heading.content}`);\n setCopiedHeading({tag: heading.tag, text: heading.content});\n }}>\n \n \n insertText(`<${heading.tag}>${heading.content}`, heading.tag, heading.content)}>\n \n \n\n ;\n })}\n \n ;\n});\nconst calculateIndent = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '15px';\n case 'h2':\n return '25px';\n case 'h3':\n return '45px';\n case 'h4':\n return '55px';\n case 'h5':\n return '65px';\n case 'h6':\n return '75px';\n }\n};\nconst getTopMargin = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '20px';\n default:\n return '0px';\n }\n};\nconst calculateFontSize = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '21px';\n case 'h2':\n return '18px';\n case 'h3':\n return '16px';\n case 'h4':\n return '14px';\n case 'h5':\n return '14px';\n case 'h6':\n return '14px';\n }\n};\nconst generateColor = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '#233A61';\n case 'h2':\n return opaqueColor('#233A61', 85);\n case 'h3':\n return opaqueColor('#233A61', 70);\n case 'h4':\n return opaqueColor('#233A61', 55);\n case 'h5':\n return opaqueColor('#233A61', 47);\n case 'h6':\n return opaqueColor('#233A61', 40);\n }\n};\n\nconst Wrapper = styled.div`\n\n`;\n\nconst ActionsWrapper = styled.div`\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 10px;\n`;\n\nconst AddHeadings = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst CopyAction = styled.div`\n font-size: 12px;\n cursor: pointer;\n`;\n\nconst CancelAction = styled.div`\n cursor: pointer;\n color: #F44343;\n`;\n\nconst FiltersWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst BulkAddAction = styled.div`\n margin-top: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst FiltersContainer = styled.div`\n display: flex;\n background: #F9F9FB;\n border: 1px solid #E8E8E8;\n border-radius: 8px;\n padding: 12px 14px;\n margin-bottom: 20px;\n width: fit-content;\n`;\n\nconst FiltersTree = styled.div`\n display: flex;\n flex-direction: column;\n`;\nconst SingleHeading = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; itemId: number; isIncluded?: boolean}>`\n display: flex;\n margin-top: ${p => p.itemId == 0 ? '0px' : getTopMargin(p.type)};\n margin-bottom: 0px;\n border-radius: 8px;\n padding: 6px 10px;\n cursor: pointer;\n align-items: center;\n width: 100%;\n opacity: ${p => p.isIncluded ? .5 : 1};\n\n .copyClass {\n display: none;\n margin-left: auto;\n }\n .copyClass.disabled {\n pointer-events: none;\n color: gray;\n }\n\n &:hover {\n background-color: ${opaqueColor('#2D6CCA', 15)};\n\n .copyClass {\n display: block;\n }\n }\n`;\nconst HeadingTag = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n border-radius: 5px;\n margin-left: ${p => calculateIndent(p.type)};\n background-color: ${p => generateColor(p.type)};\n padding: 2px 7px; \n margin-right: 10px;\n color: #fff;\n height: fit-content;\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n position: relative;\n`;\nconst HeadingText = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n color: #121212;\n font-size: ${p => calculateFontSize(p.type)};\n ${p => (p.type == 'h1' || p.type == 'h2') && 'line-height: 24px'};\n`;\n\nconst Copy = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-right: 20px;\n margin-bottom: auto;\n min-width: 50px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\nconst InsertText = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-left: 20px;\n margin-bottom: auto;\n min-width: 105px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\n\nconst CheckboxStyled = styled(Checkbox)<{tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\ntext-transform: uppercase;\n .ant-checkbox-checked {\n .ant-checkbox-inner {\n background-color: ${p => generateColor(p.tag)} !important;\n border-color: ${p => generateColor(p.tag)} !important;\n }\n }\n`;\n","import {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {KeywordSelector} from './KeywordSelector';\nimport {HeadingsTree} from './HeadingsTree';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faBars, faBarsSort} from '@fortawesome/pro-solid-svg-icons';\nimport {Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {faArrowUpRightFromSquare, faListTree} from '@fortawesome/pro-regular-svg-icons';\nimport {generateHeadingOutline} from '@/utils/blockRenderComponents';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n setCompListCollapsed: (value: boolean) => void;\n compListCollapsed: boolean;\n htmlToDraft: any;\n activeKw: string;\n setActiveKw: (value) => void;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const CompetitorHeadingsDrawerContent = observer(({\n htmlToDraft,\n setCompListCollapsed,\n compListCollapsed,\n activeKw,\n setActiveKw,\n setCheckedIndexData,\n checkedIndexData,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedHeadingsWithTags,\n checkedHeadingsWithTags}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n\n const [competitors, setCompetitors] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors ?? []);\n const [activeCompetitor, setActiveCompetitor] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n\n\n useEffect(() => {\n if (currentPage?.topRankingCompetitorActiveKw && currentPage?.analytics?.competitorsData?.length && currentPage?.analytics?.competitorsData.find(item => item.keyword == currentPage?.topRankingCompetitorActiveKw)) {\n !activeKw && setActiveKw(currentPage?.topRankingCompetitorActiveKw);\n } else if (currentPage?.analytics?.competitorsData && currentPage?.analytics?.competitorsData[0]) {\n !activeKw && setActiveKw(currentPage?.analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n }, [...(currentPage?.analytics?.competitorsData ?? ''), currentPage?.analytics?.competitorsData?.length]);\n\n useEffect(() => {\n if (toJS(currentPage).analytics?.competitorsData) {\n const contentState = currentPage.currentEditorState.getCurrentContent();\n const outline = generateHeadingOutline(contentState);\n const currentArticleOutline = [{\n title: 'Current Article Outline',\n headingsHierarchy: outline,\n isCurrentArticleOutline: true,\n }];\n\n const updatedCompetitors = toJS(currentPage).analytics.competitorsData?.map(value => {\n return {\n ...value,\n competitors: [...currentArticleOutline, ...value.competitors],\n };\n });\n setCompetitors(updatedCompetitors?.find(item => item.keyword == activeKw)?.competitors ?? []);\n if (!activeCompetitor) {\n setActiveCompetitor(toJS(currentPage.analytics?.competitorsData)?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n }\n }\n }, [currentPage.analytics?.competitorsData, activeKw, currentPage.currentEditorState]);\n\n const competitorsChangeHandler = (competitorsList: any[]) => {\n setCompetitors(competitorsList);\n\n setActiveCompetitor(competitorsList[0]);\n };\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n \n \n setCompListCollapsed(!compListCollapsed)} fontSize={20} style={{marginTop: 20, marginRight: 10, cursor: 'pointer'}}/>\n \n \n \n {competitors?.length? competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)?.map((competitor, idx) => {\n return <>\n {competitor?.isCurrentArticleOutline ?\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n :\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n {competitors?.filter(value => value?.headingsHierarchy && value?.headingsHierarchy?.length && value?.isCurrentArticleOutline)?.length ? idx : idx + 1} \n \n \n {competitor.title} \n \n {competitor.url}\n \n : null}>\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor?.url}`} style={{width: 20, height: 20}}/>\n \n \n {!compListCollapsed && \n {competitor.title} \n \n {competitor.url}\n window.open(competitor?.url, '_blank')}/>\n \n }\n \n \n };\n }) : Add atleast one target keyword to view the Heading outlines \n }\n\n \n \n \n \n\n\n ;\n});\n\nconst Wrapper = styled.div`\n padding: 10px 30px 30px;\n display: flex;\n cursor: default;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n align-items: center;\n`;\n\nconst Left = styled.div<{isCollapsed: boolean}>`\n width: ${p => p.isCollapsed ? '105px' : 'auto'};\n background: transparent;\n padding-right: 30px;\n`;\nconst Right = styled.div`\n background-color: #fff;\n width: 100%;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px rgba(0, 0, 0, 0.06);\n border-radius: 14px;\n padding: 20px 30px;\n`;\nconst CompetitorsList = styled.div`\n\n`;\nconst SingleCompetitor = styled.div<{isActive?: boolean}>`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 7px;\n padding: 9px;\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n border-radius: 8px;\n transition: background .3s ease;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n ${p => p.isActive && 'color: #fff;'}\n }\n\n :hover {\n background-color: #233A61;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n color: #fff;\n }\n }\n`;\nconst Order = styled.div`\n color: #121212;\n width: 25px;\n`;\nconst NameLogoUrl = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Logo = styled.div`\n margin-right: 10px;\n`;\nconst NameAndUrl = styled.div`\n text-align: left;\n max-width: 200px;\n`;\nconst Name = styled.div`\n color: #121212;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\nconst Url = styled.a`\n color: #2D6CCA;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n display: flex;\n font-size: 12px;\n align-items: center;\n`;\n\nconst Headingoutlines = styled.p`\n color: red;\n margin-left: 30px;\n margin-top: -9px;\n`;\n\nconst CurrentArticleOutline = styled.div<{isActive?: boolean}>`\n display: flex;\n align-items: center;\n gap: 12px;\n padding-left: 32px;\n margin-bottom: 10px;\n cursor: pointer;\n border-radius: 8px;\n ${p => p.isActive && 'color: #fff;'}\n svg {\n width: 16px;\n height: 13px;\n }\n .text {\n font-family: Inter;\n font-size: 14px;\n font-weight: 400;\n line-height: 16.94px;\n text-align: left;\n color: rgba(18, 18, 18, 1);\n ${p => p.isActive && 'color: #fff;'}\n text-decoration: underline;\n padding: 7px;\n }\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n :hover {\n background-color: #233A61;\n color: #fff;\n\n .text {\n color: #fff;\n }\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {CompetitorHeadingsDrawerContent} from './DrawerContent';\nimport {useState} from 'react';\n\ninterface Props {\n htmlToDraft: any;\n}\n\nexport const CompetitorsHeadingsDrawer = observer(({htmlToDraft}: Props) => {\n const {contentOptimizer: {currentPage: {analytics, topRankingCompetitorActiveKw, isCompetitorsHeadingsDrawerOpen, closeCompetitorsHeadingsDrawer, setCopiedHeadings}}} = useStore('');\n\n const [compListCollapsed, setCompListCollapsed] = useState(false);\n const [activeKw, setActiveKw] = useState('');\n const [showBulkAddContentBtn, setShowBulkAddContentBtn] = useState(true);\n const [checkedCount, setCheckedCount] = useState(0);\n const [checkedHeadingsWithTags, setCheckedHeadingsWithTags] = useState('');\n const [checkedIndexData, setCheckedIndexData] = useState([]);\n\n return (\n {\n closeCompetitorsHeadingsDrawer();\n if (topRankingCompetitorActiveKw && analytics?.competitorsData?.length && analytics?.competitorsData.find(item => item.keyword == topRankingCompetitorActiveKw)) {\n setActiveKw(topRankingCompetitorActiveKw);\n } else if (analytics?.competitorsData && analytics?.competitorsData[0]) {\n setActiveKw(analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}\n closeIcon={ {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }} style={{display: isCompetitorsHeadingsDrawerOpen ? 'block' : 'none'}}/>}\n className={styles.competitorsHeadingsDrawerStyle}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n >\n Headings Outline\n \n \n );\n});\n","import {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Spin} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {Analytics} from './Analytics';\nimport {CompetingFocusTermsDrawer} from './SideDrawers/CompetingFocusTermsDrawer';\nimport {ContentIdeasDrawer} from './SideDrawers/ContentIdeasDrawer';\nimport {ContentResearchDrawer} from './SideDrawers/ContentResearchDrawer/ContentResearchDrawer';\nimport {KeywordsDrawer} from './SideDrawers/KeywordsDrawer';\nimport {Technicals} from './Technicals';\nimport {CompetitorsHeadingsDrawer} from './SideDrawers/CompetitorsHeadingsDrawer';\n\nexport const SidebarContent = observer(() => {\n const [showTechnicals, setShowTechincals] = useState(false);\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const antIconSecond = setShowTechincals(!showTechnicals)}/> : setShowTechincals(!showTechnicals)}/>;\n const currentView = <>\n \n setShowTechincals(!showTechnicals)}/>\n \n \n setShowTechincals(!showTechnicals)}/>\n \n ;\n\n return \n \n \n {currentPage.isInitialPageLoad && \n }\n \n {currentView}\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n position: relative;\n`;\n\nconst TechnicalsContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute; \n width: 100%;\n left: ${p => p.showTechnicals ? 0 : '400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => p.showTechnicals ? 0 : '350px !important'};\n }\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst ContentContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute;\n width: 100%;\n left: ${p => !p.showTechnicals ? 0 : '-400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => !p.showTechnicals ? 0 : '-350px !important'};\n }\n\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst LoadingBannerContainer = styled.div`\n background-color: transparent;\n height: 25px;\n width: 100%;\n`;\nconst LongLoadingBanner = styled.div`\nbackground: rgba(84, 41, 125, 0.5);\nborder-radius: 5px;\nfont-size: 12;\nheight: 25px;\npadding-top: 2px;\nwidth: 100%;\n`;\n","import React, {useEffect, useState, useRef} from 'react';\nimport styles from './index.module.scss';\nimport {Loader} from './Utils/loader';\nimport {Error as ErrorView} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/RightSidebar/v2-sidebar/Utils/error';\nimport {Resizable} from 're-resizable';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\nimport {SidebarContent} from './SidebarContent';\n\ninterface Props {\n style?: string;\n onResizeCallback?: (width: number) => void;\n isHidden?: boolean;\n store?: CurrentPageStore;\n}\n\nexport const RightSidebarV2: React.FC = observer(({onResizeCallback, isHidden = false, store}) => {\n const {contentOptimizer: {currentPage: {isPublic, isEditorScrolled}}} = useStore('');\n const [topPosition, setTopPosition] = useState((window?.innerHeight && window?.innerHeight) > 800 ? 78 : 50);\n\n const sideBarRef = useRef(null);\n\n // This changes the width of the editor according to the with of the right sidebar\n useEffect(() => {\n const sidebarUpdate = () => {\n if (sideBarRef?.current?.clientWidth > 350 && window.innerWidth <= 1400) {\n onResizeCallback(350);\n } else if (sideBarRef?.current?.clientWidth <= 350 && window.innerWidth > 1400) {\n onResizeCallback(400);\n }\n };\n window.addEventListener('resize', sidebarUpdate);\n\n return () => {\n window.removeEventListener('resize', sidebarUpdate);\n };\n }, []);\n\n useEffect(() => {\n if (sideBarRef?.current?.clientWidth) {\n onResizeCallback(sideBarRef?.current?.clientWidth);\n }\n }, [sideBarRef?.current]);\n\n const handleScroll = () => {\n const position = window.pageYOffset;\n if (position > 0) {\n if (position <= 70) {\n setTopPosition(topPosition - position);\n } else {\n setTopPosition(0);\n }\n } else {\n setTopPosition(topPosition);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, {passive: true});\n }, []);\n\n\n return (\n \n {\n onResizeCallback(elRef.offsetWidth);\n }}\n enable={{\n top: false,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n className={styles.resize}>\n {store?.content?.isAnalyzing && !store?.content?.analyzingError && ( \n );\n});\n","import {useEffect} from 'react';\nimport {WarningOutlined} from '@ant-design/icons';\nimport {useRouter} from 'next/router';\nimport {RootStoreType, useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styles from './styles.module.scss';\n// import {Drawer} from 'antd';\nimport {EditorState, SelectionState} from 'draft-js';\nimport {mapFocusTerms, multiWordCountRegex, prepareFinalTerms} from './LeftSide/EditorSection/content-editor/utils';\nimport {decoratedState} from './LeftSide/EditorSection/content-editor/decorators';\nimport firebase from 'firebase/app';\nimport 'firebase/database';\n// import {ContentGenerator} from './ContentGenerator/ContentGenerator';\nimport {LeftSide} from './LeftSide/LeftSide';\n// import {AiOutlineDrawer} from './AiOutlineDrawer';\n// import {CaAiQuotaInfo} from '@/components/common-components/v2/CaAiQuotaInfo';\n// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {RightSidebarV2} from './RightSidebar/v2-sidebar';\nimport {MainLoader} from '@/components/common-components/v2/MainLoader';\nimport {FREDDY_EVENT_SCA_ARTICLE_CREATED, triggerFreddySurvey} from '@/utils/scripts';\nimport {headerStore} from '@/store/storeCompTest';\nexport const PageEditor = observer(\n ({rootStore, isPublic}: { rootStore: RootStoreType; isPublic: boolean }) => {\n const {contentOptimizer, settings} = rootStore;\n const {currentPage, pages, aiOutline: {\n loadAiWriterHistory,\n refetchOneClickDraftResultForArticleCreation,\n }} = contentOptimizer;\n const {\n isUploading,\n isExportingPage,\n isExportingPageLoader,\n setIsPublic,\n // isOpenContentGeneratorDrawer,\n focusTermsClassNames,\n setFocusTermsClassNames,\n // setIsOpenContentGeneratorDrawer,\n setSideBarWidth,\n setViewers,\n viewers,\n isSideBarHidden,\n isInitialEditorStateFetched,\n content,\n editTitle,\n highlights,\n } = currentPage;\n const {aiInProgress} = content;\n const {\n customer: {\n profile: {\n id,\n emailAddress,\n },\n getCustomerQuota,\n },\n } = settings;\n const resultId = contentOptimizer.aiOutline.id;\n\n const {contentOptimizer: {\n currentPage: {\n feTargetKeywords,\n isLinkActive,\n },\n aiMetaData: {\n loadAiMetaData,\n metaData,\n },\n }} = useStore('');\n\n useEffect(() => {\n if (pages?.count === 2) {\n triggerFreddySurvey(id, emailAddress, FREDDY_EVENT_SCA_ARTICLE_CREATED);\n }\n }, [pages?.count]);\n\n // const {setShowOutlinesInDrawer, v2AiOutline, showOutlinesInDrawer} = aiOutline;\n // const [allRef, setAllRef] = useState();\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n query: {uuid, newPage},\n } = useRouter();\n const {t} = useTranslation('common');\n\n\n // const setAllRefToState = element => {\n // setAllRef(element);\n // };\n\n /*\n * CONTENT EDITOR METHODS START\n */\n\n\n // We are settings initial focus terms map so we can use it for initial decoration and highlighting\n\n function moveSelectionToStart(editorState) {\n const content = editorState.getCurrentContent();\n const firstBlock = content.getFirstBlock();\n const firstKey = firstBlock.getKey();\n\n return EditorState.acceptSelection(\n editorState,\n new SelectionState({\n anchorKey: firstKey,\n anchorOffset: 0,\n focusKey: firstKey,\n focusOffset: 0,\n hasFocus: true,\n isBackward: false,\n }),\n );\n }\n\n // This method will put cursor to start of the content\n function moveFocusToStart(editorState) {\n const afterSelectionMove = moveSelectionToStart(editorState);\n return EditorState.forceSelection(\n afterSelectionMove,\n afterSelectionMove.getSelection(),\n );\n }\n\n\n // This method will do the focus terms re-mapping after we update the page content\n const updateFocusTermsState = () => {\n const sortedFocusTerms = currentPage.analytics?.focusTerms?.slice()\n .slice()\n .sort((a, b) => b.name.length - a.name.length);\n\n const internalLinksClusters = currentPage.content?.internalLinkSuggestions?.slice()?.map(item => {\n return {\n name: item.keyword,\n status: 'internal-link-suggestion',\n variations: [],\n };\n });\n\n const finalData = [];\n if (sortedFocusTerms?.length) finalData.push(...sortedFocusTerms);\n if (internalLinksClusters?.length) finalData.push(...internalLinksClusters);\n\n if (sortedFocusTerms) {\n const parts = prepareFinalTerms(sortedFocusTerms);\n const regex = multiWordCountRegex(parts, false);\n\n if (regex == null) {\n return;\n }\n\n setFocusTermsClassNames(mapFocusTerms(finalData));\n }\n };\n\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data + 1)\n .then(() => {\n dbRef.on('value', snapshot => {\n if (snapshot.exists()) {\n const data = snapshot.val();\n setViewers(data);\n }\n });\n });\n }).catch(error => {\n console.error(error);\n });\n }\n\n return () => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().cancel();\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data - 1);\n });\n }\n };\n }, []);\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().set(viewers - 1);\n }\n }, [viewers]);\n\n // useEffect(() => {\n // const newState = currentPage?.content?.formattedEditorState();\n // currentPage.setCurrentEditorState(newState);\n // setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n // }, []);\n\n\n // This useEffect is ment to fire only once initially, after we have contentLoadedAt and uuid set\n // It will do initial content populating + highlighting\n useEffect(() => {\n // this prop is used to allow/dissallow all repolls related to editing a page to happen\n currentPage.setRepollsAllowed(true);\n // we are checking current page uuid from url\n // if the response came in and populated the store they will match and only then we update the state\n // we repeat this both here and in content editor compoenent\n\n if (uuid === currentPage.content.uuid && isInitialEditorStateFetched) {\n const newState = currentPage.content?.formattedEditorState();\n const focusedState = moveFocusToStart(newState);\n currentPage.setCurrentEditorState(focusedState);\n\n // This prop is set to false only after initial editor state has been set because\n // we want to prevent the DraftJs from triggering the onChange event on page mount\n currentPage.setIsInitialEditorStateFetched(true);\n\n // This will re-map focus terms and update the state and will trigger the next useEffect\n // which will use that map to re-decorate the content\n updateFocusTermsState();\n } else {\n const newState = currentPage?.content?.formattedEditorState();\n currentPage.setCurrentEditorState(newState);\n setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentPage.contentLoadedAt, currentPage?.content?.uuid, isInitialEditorStateFetched]);\n\n useEffect(() => {\n currentPage.setRepollsAllowed(true);\n currentPage.setCurrentEditorState(decoratedState(currentPage.currentEditorState, focusTermsClassNames));\n }, [focusTermsClassNames, highlights]);\n\n\n // This is to set initial mapping of the focus terms, which is used for decorating\n useEffect(() => {\n updateFocusTermsState();\n }, [JSON.stringify(currentPage.analytics?.focusTerms?.slice()), JSON.stringify(currentPage.content?.internalLinkSuggestions?.slice())]);\n\n const loadProject = async () => {\n await pages.getAllProjects();\n };\n\n useEffect(() => {\n if (!isPublic) loadProject();\n if (isPublic) {\n setIsPublic(true);\n } else {\n setIsPublic(false);\n }\n }, []);\n\n useEffect(() => {\n if (uuid && !isPublic) {\n loadAiWriterHistory(uuid as string);\n }\n }, []);\n\n useEffect(() => {\n if (resultId) {\n setRefechForBulkArticleCreation();\n }\n }, [resultId, aiInProgress]);\n\n const setRefechForBulkArticleCreation = async () => {\n if (content.aiInProgress && resultId) {\n try {\n const now = new Date().getTime();\n await refetchOneClickDraftResultForArticleCreation(uuid, now);\n } catch (e) {\n Promise.reject(e);\n } finally {\n getCustomerQuota();\n }\n }\n };\n\n useEffect(() => {\n async function load() {\n if (uuid) {\n if (!isPublic) {\n pages.loadPages(false, pages.activeProjectId);\n }\n // this is to check if we are on initial page create screen or are we editing page\n if (!newPage) {\n await currentPage.loadPage(uuid as string);\n const targetKwArr = feTargetKeywords.map(kw => kw.keyword);\n if (content.title?.startsWith('New Document') && targetKwArr?.length) {\n const data = await loadAiMetaData(content.title, targetKwArr);\n if (data) {\n editTitle(data[0]?.metaTitle);\n }\n }\n } else {\n currentPage.initialLoadPage(uuid as string);\n }\n }\n }\n load();\n }, [uuid, currentPage.currentStep, metaData]);\n\n useEffect(() => {\n if (newPage) {\n currentPage.setNewPage(true);\n currentPage.setCurrentStep(1);\n } else {\n currentPage.setNewPage(false);\n }\n }, [newPage]);\n\n useEffect(()=> {\n headerStore.setComponent(null, false, [\n {name: '', spend: 0, total: 0, color: 'green', quotaProps: null},\n ]);\n }, []);\n\n const callBack = (width: number) => {\n if (width <= 400 && width > 0) {\n setSideBarWidth(`${width}px`);\n }\n };\n\n\n return currentPage.loading ? (\n \n {!currentPage.isLinkActive && ((currentPage.newPage && currentPage.currentStep === 1) || <>\n \n {t('error-has-ocurred')}
\n \n )}\n \n \n );\n },\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"notification\":\"styles_notification__OR6ac\",\"contactLink\":\"styles_contactLink__dGgfv\",\"success\":\"styles_success__g7z1D\",\"info\":\"styles_info__efwL4\",\"warning\":\"styles_warning__TRTcI\",\"error\":\"styles_error__PUH5a\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"customInput\":\"style_customInput__xWOlg\",\"customSelect\":\"style_customSelect__5SwsV\",\"individualCustomSelect\":\"style_individualCustomSelect__WX92V\",\"customGeneralSelect\":\"style_customGeneralSelect__OeVke\",\"user\":\"style_user__wmBrz\",\"avatar\":\"style_avatar__mO1Yn\",\"info\":\"style_info__bJG8w\",\"email\":\"style_email__7HMCL\",\"permission\":\"style_permission__eKrIo\",\"shareModal\":\"style_shareModal__tgI8u\",\"icon\":\"style_icon__7Sv9l\",\"back\":\"style_back__XA9rM\",\"header\":\"style_header__P07YH\",\"users\":\"style_users__Xet9k\",\"input\":\"style_input__CbDPX\",\"permissions\":\"style_permissions__1_Cd5\",\"notification\":\"style_notification__69SZ_\",\"checkbox\":\"style_checkbox__HLruZ\",\"inputContainer\":\"style_inputContainer__5l1dT\",\"textarea\":\"style_textarea__lBED_\",\"dropdown\":\"style_dropdown__BLJU4\",\"hideDropdown\":\"style_hideDropdown__EAZwo\",\"cancelModalButton\":\"style_cancelModalButton__0Jn_a\",\"shareModalFooter\":\"style_shareModalFooter__c_I4D\",\"suggestion\":\"style_suggestion__sQOqS\",\"name\":\"style_name__YXf18\",\"subTitle\":\"style_subTitle__hpMvF\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__bvdyc\",\"popoverDivider\":\"style_popoverDivider__7kxDv\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__f7Uga\",\"contentIdeasTitle\":\"style_contentIdeasTitle__NFfEv\",\"descriptionText\":\"style_descriptionText__lFbSB\",\"input\":\"style_input__NVKIY\",\"inputLabel\":\"style_inputLabel__di3As\",\"countrySelector\":\"style_countrySelector__RsNJa\",\"selectInput\":\"style_selectInput__bfqDn\",\"generateIdeasButton\":\"style_generateIdeasButton__wefT5\",\"generatedItemsNumb\":\"style_generatedItemsNumb__oULgy\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__Um6PF\",\"ContentIdea\":\"style_ContentIdea___8T06\",\"controlButtons\":\"style_controlButtons__3DdPK\",\"downloadButton\":\"style_downloadButton__b7Dxj\",\"copyButton\":\"style_copyButton__DS99q\",\"refreshAiOutlineBtn\":\"style_refreshAiOutlineBtn__NfuS_\",\"unsplashContainer\":\"style_unsplashContainer__tKyCE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toolbar\":\"style_toolbar__Vwy8G\",\"leftSection\":\"style_leftSection__N1651\",\"rightSection\":\"style_rightSection__E_CRH\",\"share\":\"style_share__NTvX5\",\"robotIcon\":\"style_robotIcon__d_APK\",\"contentIdeasBtnLabel\":\"style_contentIdeasBtnLabel__4qIOI\",\"shareBtnLabel\":\"style_shareBtnLabel__o5HXJ\",\"undoBtn\":\"style_undoBtn__gR9Ad\",\"redoBtn\":\"style_redoBtn__oFeoL\",\"editor\":\"style_editor__Zg73v\",\"zoom05\":\"style_zoom05__1Dz2Y\",\"zoom075\":\"style_zoom075__JA_q0\",\"zoom09\":\"style_zoom09__pWjeK\",\"zoom1\":\"style_zoom1__2IWB9\",\"zoom12\":\"style_zoom12__O5tgJ\",\"zoom15\":\"style_zoom15__3U5We\",\"zoom2\":\"style_zoom2__RtpNm\",\"expandedEditor\":\"style_expandedEditor__6u5oc\",\"divider\":\"style_divider__Y6Ylq\",\"button\":\"style_button__UOe75\",\"expandBtn\":\"style_expandBtn__eggx8\",\"copyTooltip\":\"style_copyTooltip__S3tye\",\"writeForMeContainer\":\"style_writeForMeContainer__5aagG\",\"writeForMeFeatherIcon\":\"style_writeForMeFeatherIcon__yxu8G\",\"editorTopInfo\":\"style_editorTopInfo__xoncP\",\"leftEditorTopInfo\":\"style_leftEditorTopInfo__L9LlC\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__VSP5g\",\"button\":\"style_button__QUeN9\",\"active\":\"style_active__Fv0RE\",\"urlPopup\":\"style_urlPopup__D9ZJn\",\"inputContainer\":\"style_inputContainer__bm_d7\",\"textLabel\":\"style_textLabel__IaVSL\",\"urlInput\":\"style_urlInput__hn8MM\",\"inputControlls\":\"style_inputControlls__aQiLB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__62ic4\",\"button\":\"style_button__jl08j\",\"active\":\"style_active__7OpW7\",\"urlPopup\":\"style_urlPopup__QdWSN\",\"inputContainer\":\"style_inputContainer__cNQp7\",\"textLabel\":\"style_textLabel__XLCPG\",\"urlInput\":\"style_urlInput__g2XBm\",\"inputControlls\":\"style_inputControlls___Lrie\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__q5NYO\",\"button\":\"style_button__rOfd5\",\"active\":\"style_active__8ok_g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__JEFtz\",\"button\":\"style_button__tWAPP\",\"active\":\"style_active__1Ub_o\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__vN_zL\",\"header-modal\":\"style_header-modal__zaVfr\",\"header-modal__option\":\"style_header-modal__option__uBrLT\",\"header-modal__selected\":\"style_header-modal__selected__HRX68\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__Y7Msi\",\"button\":\"style_button__qE27E\",\"active\":\"style_active__vcuPU\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7_9Fm\",\"button\":\"style_button__I4eBO\",\"active\":\"style_active__vWrUg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__F4Eq3\",\"button\":\"style_button__zXaNR\",\"active\":\"style_active__QB8X9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7hrU8\",\"button\":\"style_button__lBpTe\",\"active\":\"style_active__Vy5N_\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__ngc_6\",\"button\":\"style_button__bwqJh\",\"active\":\"style_active__pcv99\",\"urlPopup\":\"style_urlPopup__MeYFu\",\"inputContainer\":\"style_inputContainer__Yr1Ib\",\"textLabel\":\"style_textLabel__paAwp\",\"urlInput\":\"style_urlInput__u0l_s\",\"inputControlls\":\"style_inputControlls__GUFA1\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"step-one_button__LmGnF\",\"purple\":\"step-one_purple__Dr_VM\",\"teal\":\"step-one_teal__pq6oT\",\"welcome\":\"step-one_welcome__uDuo3\",\"welcomeHeader\":\"step-one_welcomeHeader__qKSL7\",\"welcomeSubHeader\":\"step-one_welcomeSubHeader__yAtvD\",\"welcomeCards\":\"step-one_welcomeCards__lU5iT\",\"welcomeCard\":\"step-one_welcomeCard__K1Ils\",\"welcomeCardHeader\":\"step-one_welcomeCardHeader__YmBsP\",\"welcomeCardSubHeader\":\"step-one_welcomeCardSubHeader__v1GbY\",\"divider\":\"step-one_divider___K9R9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"uploadForm\":\"styles_uploadForm__RQvO_\",\"urlinput\":\"styles_urlinput__NNaUR\",\"uploadBtn\":\"styles_uploadBtn__zNHxo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"keywordContainer\":\"style_keywordContainer__vPXS3\",\"keywordEditIcons\":\"style_keywordEditIcons__3jaVk\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__S1Uen\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__zFqeU\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__5qWYw\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Fg9Sz\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__UBnRt\",\"keywordLocationIcon\":\"style_keywordLocationIcon__uVBJh\",\"showIcons\":\"style_showIcons__gIQdT\",\"keywordDetailsButtonContainer\":\"style_keywordDetailsButtonContainer__nKs7u\",\"keywordDetailsIcon\":\"style_keywordDetailsIcon__6AAJ0\",\"editKwButtonContainer\":\"style_editKwButtonContainer__437ne\",\"editKwButtonIcon\":\"style_editKwButtonIcon__7aEsS\",\"keywordName\":\"style_keywordName__KZoSi\",\"targetKwContainer\":\"style_targetKwContainer__W_edh\",\"keywordMetric\":\"style_keywordMetric__BgvpY\",\"keywordMetricContainer\":\"style_keywordMetricContainer__1Xtmz\",\"expandingContainer\":\"style_expandingContainer__Ty15F\",\"expandBtn\":\"style_expandBtn__bfM2c\",\"keywordsAndSuggestionsContainer\":\"style_keywordsAndSuggestionsContainer__WHZZr\",\"collapsed\":\"style_collapsed___mhNq\",\"targetKeywordsSectionContainer\":\"style_targetKeywordsSectionContainer__MA1nu\",\"expanded\":\"style_expanded__jeR4g\",\"targetKeywordsContainer\":\"style_targetKeywordsContainer__RASzp\",\"locationToggler\":\"style_locationToggler__pes3z\",\"targetKeywordsTitle\":\"style_targetKeywordsTitle__Xiu43\",\"selectRelatedKeywords\":\"style_selectRelatedKeywords__UsR3o\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__iu89Z\",\"suggestedKwSectionTitle\":\"style_suggestedKwSectionTitle__UtMLo\",\"targetKwLoadingMsg\":\"style_targetKwLoadingMsg__vEgdP\",\"kwSuggestionsContainer\":\"style_kwSuggestionsContainer__2wt_G\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__ACSfR\",\"singleSugestedKwInnerContainer\":\"style_singleSugestedKwInnerContainer__b0ror\",\"svAndCpc\":\"style_svAndCpc__c_8wW\",\"controllsBar\":\"style_controllsBar__ALl9x\",\"clickToAdd\":\"style_clickToAdd__xtgcn\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__80skR\",\"suggestedKwTitle\":\"style_suggestedKwTitle__9QaV3\",\"closeSuggestedKW\":\"style_closeSuggestedKW__330Se\",\"secondary-text\":\"style_secondary-text__emnsR\",\"keywords\":\"style_keywords__wjpPt\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__Lm1gP\",\"cpcMetricsProgressBar\":\"style_cpcMetricsProgressBar__LTmQK\",\"focusTermPopover\":\"style_focusTermPopover__pkvY4\",\"popoverTitle\":\"style_popoverTitle__pH9eH\",\"popoverCountrySv\":\"style_popoverCountrySv__3zElP\",\"sv\":\"style_sv__qOMD7\",\"emoji\":\"style_emoji__xv7Ls\",\"popOverTitle\":\"style_popOverTitle__v_wFU\",\"competitors\":\"style_competitors__YGYr0\",\"competitor\":\"style_competitor__GWmTF\",\"popoverDivider\":\"style_popoverDivider__XCRSU\",\"headingsPopover\":\"style_headingsPopover__jTD85\",\"headingTooltipValue\":\"style_headingTooltipValue__dRrjD\",\"countrySelectorPopover\":\"style_countrySelectorPopover__RhvA2\",\"divider\":\"style_divider__0ifEI\",\"columnTitlesRow\":\"style_columnTitlesRow__oKXV2\",\"columnTitle\":\"style_columnTitle__fLfkI\",\"defaultLocationName\":\"style_defaultLocationName__K60S8\",\"locationInfo\":\"style_locationInfo__DGWFc\",\"setAsDefaultText\":\"style_setAsDefaultText__q4qk_\",\"countryReach\":\"style_countryReach__5HPf_\",\"singleCountryRow\":\"style_singleCountryRow__6YTEm\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__lSqDc\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__OhW7Z\",\"newKwFormContainer\":\"style_newKwFormContainer__ysNll\",\"addNewKwBtn\":\"style_addNewKwBtn__aHUY2\",\"addKeywordStyle\":\"style_addKeywordStyle___NjDc\",\"plusIconStyle\":\"style_plusIconStyle__dmf5B\",\"disabledBtn\":\"style_disabledBtn__z9Cbs\",\"addNewKwForm\":\"style_addNewKwForm__5iXKx\",\"newKwInputControllsContainer\":\"style_newKwInputControllsContainer__Hc69J\",\"newKwInputContainer\":\"style_newKwInputContainer__bkNBM\",\"customInputField\":\"style_customInputField__g9Ppg\",\"addNewKwBtnLabel\":\"style_addNewKwBtnLabel__SWOIT\",\"quota\":\"style_quota__MfYRt\",\"quotaValues\":\"style_quotaValues__6t772\",\"plusIcon\":\"style_plusIcon__lL8Wh\",\"newEmphasizedFormStyle\":\"style_newEmphasizedFormStyle__xmFMZ\",\"pulse-purple\":\"style_pulse-purple__P7U1V\",\"newFormStyle\":\"style_newFormStyle__lqdiW\",\"editKwForm\":\"style_editKwForm__Q_jdR\",\"editKwInputContainer\":\"style_editKwInputContainer__WBOeM\",\"editKwControllsContainer\":\"style_editKwControllsContainer__D2l73\",\"populateButton\":\"style_populateButton__aGc27\",\"confirmButton\":\"style_confirmButton__DZXoJ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentOptimizerContainer\":\"bread-crumb_contentOptimizerContainer__rqiMo\",\"divider\":\"bread-crumb_divider__VKsLJ\",\"scrolledEditor\":\"bread-crumb_scrolledEditor__4iLHS\",\"contentOptimizerHeader\":\"bread-crumb_contentOptimizerHeader__mSsmj\",\"title\":\"bread-crumb_title__8VW90\",\"back\":\"bread-crumb_back__VYwHf\",\"share\":\"bread-crumb_share__7_i4v\",\"backWrapper\":\"bread-crumb_backWrapper__XPOW2\",\"headerExtra\":\"bread-crumb_headerExtra__lVFkV\",\"kebab\":\"bread-crumb_kebab__NIs_t\",\"kebabMenu\":\"bread-crumb_kebabMenu__oJYmb\",\"kebabMenuItem\":\"bread-crumb_kebabMenuItem__YYQHl\",\"redText\":\"bread-crumb_redText__WFg6A\",\"exportBtn\":\"bread-crumb_exportBtn__qzHGF\",\"modal\":\"bread-crumb_modal__QLBQN\",\"modalTitle\":\"bread-crumb_modalTitle__0lf8D\",\"websiteLabel\":\"bread-crumb_websiteLabel__uP_MN\",\"editContainer\":\"bread-crumb_editContainer__ok1vS\",\"btn\":\"bread-crumb_btn__lZxTx\",\"exportToPdfButton\":\"bread-crumb_exportToPdfButton__HCYl1\",\"exportToDocsButton\":\"bread-crumb_exportToDocsButton__dtrrC\",\"exportDropdown\":\"bread-crumb_exportDropdown__7llmi\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerKeywords\":\"styles_headerKeywords__xxGL0\",\"popoverDivider\":\"styles_popoverDivider__zaO9y\",\"draftToolkit\":\"styles_draftToolkit__n9jPZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"content-editor_container__QYw4p\",\"left-side\":\"content-editor_left-side__l1TXd\",\"pageEditorError\":\"content-editor_pageEditorError__H_8Vw\",\"headerKeywords\":\"content-editor_headerKeywords__Nu5m7\",\"popoverDivider\":\"content-editor_popoverDivider__m2Vuv\",\"draftToolkit\":\"content-editor_draftToolkit__jDD0p\",\"loaderSpinnerContainer\":\"content-editor_loaderSpinnerContainer__3w2sl\",\"loaderSpinner\":\"content-editor_loaderSpinner__IxzP_\",\"spin\":\"content-editor_spin__6tOJb\",\"selectionTooltip\":\"content-editor_selectionTooltip__Qo0Ri\",\"arrowBottom\":\"content-editor_arrowBottom__3KZVT\",\"textInputNotification\":\"content-editor_textInputNotification__lnemm\",\"contentGeneratorDrawer\":\"content-editor_contentGeneratorDrawer__XXSAo\",\"closeIcons\":\"content-editor_closeIcons__5_3Bw\",\"outlineDrawerBackArrow\":\"content-editor_outlineDrawerBackArrow__GwHmD\",\"contentGeneratorTitle\":\"content-editor_contentGeneratorTitle__Agz_h\",\"selectedTextInfoContainer\":\"content-editor_selectedTextInfoContainer__WRKBY\",\"dataAndIcon\":\"content-editor_dataAndIcon__6OcYR\",\"textAndUrl\":\"content-editor_textAndUrl__XUxuw\",\"text\":\"content-editor_text__21AKd\",\"url\":\"content-editor_url__v_O1a\",\"textUrlControlls\":\"content-editor_textUrlControlls__thYuv\",\"urlPopup\":\"content-editor_urlPopup__gHOHE\",\"inputContainer\":\"content-editor_inputContainer__Mb2tQ\",\"textLabel\":\"content-editor_textLabel__mnezc\",\"urlInput\":\"content-editor_urlInput__2P2Tu\",\"inputControlls\":\"content-editor_inputControlls__qFkMX\",\"linkSuggestionsPopover\":\"content-editor_linkSuggestionsPopover__FFCdv\",\"extensionButton\":\"content-editor_extensionButton__bBbw0\",\"iconButton\":\"content-editor_iconButton__Cfbam\",\"ctaTitle\":\"content-editor_ctaTitle__ssOd0\",\"extensionButtonStyle\":\"content-editor_extensionButtonStyle__PN0ie\",\"closeIcon\":\"content-editor_closeIcon__UKkJM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"modal\":\"style_modal__rZesC\",\"tableOuterClusters\":\"style_tableOuterClusters__qcXJL\",\"roundEdgesTable\":\"style_roundEdgesTable__iZjyo\",\"ant-table-content\":\"style_ant-table-content__S_Fgs\",\"purpleRow\":\"style_purpleRow__bot_O\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"citationsContainer\":\"style_citationsContainer__oVqah\",\"citationsInnerContainer\":\"style_citationsInnerContainer__ZHHEU\",\"singleCitation\":\"style_singleCitation__qbxUz\",\"citationIcon\":\"style_citationIcon___x2Qc\",\"citationInfo\":\"style_citationInfo__tZ76P\",\"citationName\":\"style_citationName__pdvkB\",\"citationUrl\":\"style_citationUrl__RdI_o\",\"citationText\":\"style_citationText__BdN5t\",\"serpUsedByContainer\":\"style_serpUsedByContainer__azyj8\",\"citationSerpsContainer\":\"style_citationSerpsContainer__iipYx\",\"serpIcon\":\"style_serpIcon__w_LvR\",\"metaDescTooltip\":\"style_metaDescTooltip__nuDt4\",\"serpTooltip\":\"style_serpTooltip__QLWro\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__6RNd6\",\"serpTitle\":\"style_serpTitle__RXoga\",\"serpUrl\":\"style_serpUrl__tu4XQ\",\"emptyDataBox\":\"style_emptyDataBox__Mo6mN\",\"emptyImg\":\"style_emptyImg__9U7Nu\",\"emptyDataTitle\":\"style_emptyDataTitle__R5BVL\",\"subTitle\":\"style_subTitle__rYSu7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"questionsContainer\":\"style_questionsContainer__yjLcX\",\"questionsInnerContainer\":\"style_questionsInnerContainer__2asTx\",\"questionsNameAndCopy\":\"style_questionsNameAndCopy__lm2Dj\",\"customQuestionsName\":\"style_customQuestionsName___Vs5R\",\"serpUsedByContainer\":\"style_serpUsedByContainer__AobiD\",\"citationSerpsContainer\":\"style_citationSerpsContainer__jAx_o\",\"serpIcon\":\"style_serpIcon__6QGH4\",\"emptyDataBox\":\"style_emptyDataBox__1nQ8c\",\"emptyImg\":\"style_emptyImg__3_6YA\",\"emptyDataTitle\":\"style_emptyDataTitle__ApBiU\",\"focusTermPopover\":\"style_focusTermPopover__eCy11\",\"popOverTitle\":\"style_popOverTitle__q_bNa\",\"popoverDivider\":\"style_popoverDivider__0eu5_\",\"copyTooltip\":\"style_copyTooltip__kgoSh\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__7gwcB\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__cm2nS\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__RT8Gn\",\"copyIcon\":\"style_copyIcon__j24nu\",\"totalQuestions\":\"style_totalQuestions__2A_bv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__zQsc0\",\"limitedAccess\":\"style_limitedAccess__B2vHw\",\"flexRow\":\"style_flexRow__R2pUv\",\"quota\":\"style_quota__iFHMf\",\"focusTermDropdown\":\"style_focusTermDropdown__L17PC\",\"scoreContainer\":\"style_scoreContainer__stcBp\",\"scoreDescription\":\"style_scoreDescription__QkW_1\",\"scoreDescTitle\":\"style_scoreDescTitle__qa_Kd\",\"scoreDescText\":\"style_scoreDescText__Hprrn\",\"speedIndexContainer\":\"style_speedIndexContainer__Dejs9\",\"speedIndexDot\":\"style_speedIndexDot__ykTus\",\"refecthButtonContainer\":\"style_refecthButtonContainer__NDBTa\",\"popoverInfoContainer\":\"style_popoverInfoContainer__jZwn6\",\"customSpinner\":\"style_customSpinner__I9jMh\",\"keywords\":\"style_keywords__VUAeg\",\"keywordMetric\":\"style_keywordMetric__jFkNF\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__nk_Rf\",\"viewers\":\"style_viewers__3GdID\",\"avatar\":\"style_avatar__nAZ3X\",\"progress\":\"style_progress__Emagh\",\"smallProgress\":\"style_smallProgress__b2LvX\",\"needHelp\":\"style_needHelp__pVjFU\",\"userIcon\":\"style_userIcon__X7Oyb\",\"readabilityLetter\":\"style_readabilityLetter__RlwFP\",\"readabilityAActive\":\"style_readabilityAActive__etxiG\",\"readabilityBActive\":\"style_readabilityBActive__1xJXN\",\"readabilityCActive\":\"style_readabilityCActive__u9Z0Q\",\"readabilityDActive\":\"style_readabilityDActive__xdRpu\",\"readabilityEActive\":\"style_readabilityEActive__VQ8_a\",\"readabilitySecondary\":\"style_readabilitySecondary__2EAQH\",\"focusTermsCollapse\":\"style_focusTermsCollapse__kVGtj\",\"header\":\"style_header__YUb4w\",\"number\":\"style_number__q8kh0\",\"expandedIcon\":\"style_expandedIcon__l8nCj\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin___4hbN\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__ePTwm\",\"focusTermContent\":\"style_focusTermContent__CK3KM\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__DQAwe\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__EA8m7\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__QpYDT\",\"copyIcon\":\"style_copyIcon__3wT4i\",\"focusTermAndTags\":\"style_focusTermAndTags__Kp9wt\",\"icon\":\"style_icon__moQAn\",\"focusTermName\":\"style_focusTermName__Ly6am\",\"foundInElement\":\"style_foundInElement__tEiL_\",\"customFocusTermName\":\"style_customFocusTermName__LzC2O\",\"brandedLabel\":\"style_brandedLabel__6T1gS\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__rwsPG\",\"focusTermUsageCount\":\"style_focusTermUsageCount__1j6I7\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__qBdnF\",\"removeFocusTerms\":\"style_removeFocusTerms__07IkA\",\"removeTermLabel\":\"style_removeTermLabel__VbKWK\",\"removeTermIcon\":\"style_removeTermIcon__cKkeI\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__u3c18\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__SLkEY\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__xzq3T\",\"writingStylePopover\":\"style_writingStylePopover__sHjLJ\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__iCD9H\",\"focusTermPopover\":\"style_focusTermPopover__FKP8t\",\"innerPopover\":\"style_innerPopover__UbNja\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__RFjzG\",\"withArrow\":\"style_withArrow__I_XFV\",\"popoverTitle\":\"style_popoverTitle__lUKZy\",\"popoverCountrySv\":\"style_popoverCountrySv__geNG6\",\"sv\":\"style_sv__kQDDv\",\"emoji\":\"style_emoji__YGsrS\",\"popOverTitle\":\"style_popOverTitle__ahuD1\",\"competitors\":\"style_competitors__hwtcD\",\"competitor\":\"style_competitor__IqYyC\",\"singleCompetitor\":\"style_singleCompetitor__FwGi3\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__4CKN9\",\"snippetsContainer\":\"style_snippetsContainer__ot3Ml\",\"singleSnippet\":\"style_singleSnippet__XCQdn\",\"popoverDivider\":\"style_popoverDivider__chO8P\",\"popOverTermsTitle\":\"style_popOverTermsTitle__NKa1t\",\"headingsPopover\":\"style_headingsPopover__hbinC\",\"headingTooltipValue\":\"style_headingTooltipValue__bTPOI\",\"collapseContainer\":\"style_collapseContainer__TNTaa\",\"collapsableContainer\":\"style_collapsableContainer__HGsnN\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__MGXVA\",\"collapseButton\":\"style_collapseButton__kR3ue\",\"commonPopover\":\"style_commonPopover__kfD05\",\"editKeywordsBtn\":\"style_editKeywordsBtn__IvUg6\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__b8_ix\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__lUYBT\",\"isKeywordRemoving\":\"style_isKeywordRemoving__0Y5Pv\",\"suggestedKwContainer\":\"style_suggestedKwContainer__IrJwP\",\"svAndCpc\":\"style_svAndCpc__eV3Ml\",\"clickToAdd\":\"style_clickToAdd__Rf3jy\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__e16rv\",\"closeSuggestedKW\":\"style_closeSuggestedKW__vmyEL\",\"cancelButton\":\"style_cancelButton__vFlju\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon__hp2tW\",\"keywordContainer\":\"style_keywordContainer__o4y1J\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__HyXGY\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__n0rhQ\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__0GIsE\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Nbr1J\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__C4CXq\",\"keywordLocationIcon\":\"style_keywordLocationIcon__YjZTQ\",\"showIcons\":\"style_showIcons__PKtA1\",\"editKwButtonContainer\":\"style_editKwButtonContainer__5310p\",\"editKwButtonIcon\":\"style_editKwButtonIcon__09bVC\",\"keywordName\":\"style_keywordName__85ap5\",\"keywordMetricContainer\":\"style_keywordMetricContainer__0AxnT\",\"link\":\"style_link__vZDiF\",\"orderContentBtn\":\"style_orderContentBtn__uNKgi\",\"footerText\":\"style_footerText__iKsz1\",\"divider\":\"style_divider__mevUB\",\"viewSchemaBtn\":\"style_viewSchemaBtn__pU_vK\",\"tabs\":\"style_tabs__m6jOQ\",\"truncateText\":\"style_truncateText__hYHYr\",\"darkenTechnical\":\"style_darkenTechnical__gwrKF\",\"importUrlButton\":\"style_importUrlButton__KuVWa\",\"scoreDescHeader\":\"style_scoreDescHeader__hWDqY\",\"popOver\":\"style_popOver__f04Uy\",\"subtitle\":\"style_subtitle__OIvMk\",\"scrollBarSidebar\":\"style_scrollBarSidebar__Br9J8\",\"focusTermsExpanded\":\"style_focusTermsExpanded__6qt2U\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__9vao9\",\"selectContainer\":\"style_selectContainer___uIb5\",\"customSelectInput\":\"style_customSelectInput__eHqgt\",\"globeContainer\":\"style_globeContainer__63VkK\",\"globeIcon\":\"style_globeIcon__jyZcv\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__QGb2A\",\"countryInfo\":\"style_countryInfo__x__GX\",\"countrySearch\":\"style_countrySearch__BmySQ\",\"topDiv\":\"style_topDiv__wvomn\",\"locationArea\":\"style_locationArea__zWDch\",\"addKwBtnContainer\":\"style_addKwBtnContainer__FBfop\",\"tooltipInner\":\"style_tooltipInner___CBL_\",\"writingStyleContainer\":\"style_writingStyleContainer__keOla\",\"singleReadabilityItem\":\"style_singleReadabilityItem__Fe4pT\",\"activeReadabilityItem\":\"style_activeReadabilityItem__UpNZT\",\"prevReadabilityItem\":\"style_prevReadabilityItem__BGp7b\",\"nextReadabilityItem\":\"style_nextReadabilityItem__EGWMl\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__pUSoR\",\"addNewKwForm\":\"style_addNewKwForm__UIbcE\",\"populateButton\":\"style_populateButton__uUxBA\",\"customInputField\":\"style_customInputField__PqCdR\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs__e5i_W\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__ymRtc\",\"questionsTab\":\"style_questionsTab__BzJZ3\",\"countrySelectorPopover\":\"style_countrySelectorPopover__rkd0q\",\"columnTitlesRow\":\"style_columnTitlesRow__gDyYX\",\"columnTitle\":\"style_columnTitle__NsuCR\",\"defaultLocationName\":\"style_defaultLocationName__t5x2F\",\"locationInfo\":\"style_locationInfo__xzAIt\",\"setAsDefaultText\":\"style_setAsDefaultText__URXN3\",\"countryReach\":\"style_countryReach__Vqlx_\",\"singleCountryRow\":\"style_singleCountryRow__pNmS5\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__1cgyK\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__mvCk5\",\"copyTooltip\":\"style_copyTooltip__M8waz\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__RCmbz\",\"miniMetrics\":\"style_miniMetrics__uglSl\",\"miniMetricsLabel\":\"style_miniMetricsLabel__C7fe6\",\"miniMetricsValue\":\"style_miniMetricsValue__lweAH\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__L1MLr\",\"longLoadingBanner\":\"style_longLoadingBanner__n1_Co\",\"customSchemaBtn\":\"style_customSchemaBtn__L967y\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"linkToolTip\":\"style_linkToolTip__bhIce\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsContainer\":\"style_competitorsContainer__SfNOS\",\"competitorsInnerContainer\":\"style_competitorsInnerContainer___TbD7\",\"singleCompetitor\":\"style_singleCompetitor__U87HC\",\"competitorDetailsContainer\":\"style_competitorDetailsContainer__StWBo\",\"competitorPosition\":\"style_competitorPosition__M88ib\",\"competitorContentScore\":\"style_competitorContentScore__KDgTT\",\"competitorWordCount\":\"style_competitorWordCount__GBsaT\",\"splitter\":\"style_splitter__eGmIb\",\"progress\":\"style_progress__2Uzzo\",\"competitorIcon\":\"style_competitorIcon__FaDSp\",\"competitorInfo\":\"style_competitorInfo__V54hG\",\"competitorName\":\"style_competitorName__F92CB\",\"competitorUrl\":\"style_competitorUrl__s2401\",\"competitorText\":\"style_competitorText__Fzphu\",\"emptyDataBox\":\"style_emptyDataBox__4N8UY\",\"emptyImg\":\"style_emptyImg__CYXAU\",\"emptyDataTitle\":\"style_emptyDataTitle__Js1W9\",\"selectInput\":\"style_selectInput___gVgJ\",\"keywordChecked\":\"style_keywordChecked__C87zU\",\"ant-select\":\"style_ant-select__7CoFi\",\"ant-select-disabled\":\"style_ant-select-disabled__ju49Y\",\"ant-select-selector\":\"style_ant-select-selector__r_4up\",\"ant-select-single\":\"style_ant-select-single__R__La\",\"ant-select-customize-input\":\"style_ant-select-customize-input__4fC4G\",\"tooltipOverlay\":\"style_tooltipOverlay__6zcSe\",\"competitorTooltipUrl\":\"style_competitorTooltipUrl__U2ss8\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"analyticsCollapseCard\":\"style_analyticsCollapseCard__sEtSW\",\"expandIcon\":\"style_expandIcon__nKE6c\",\"header\":\"style_header__hnfX_\",\"headerRight\":\"style_headerRight__YroUz\",\"title\":\"style_title__ICalb\",\"divider\":\"style_divider__zJoLJ\",\"colTitle\":\"style_colTitle__nPW60\",\"pageText\":\"style_pageText__eXO_c\",\"analyticsHideArrow\":\"style_analyticsHideArrow__dF_7X\",\"paginationStyle\":\"style_paginationStyle__DHqNy\",\"singlePageBlur\":\"style_singlePageBlur__xKJPI\",\"filters\":\"style_filters__l5Lmi\",\"filtersText\":\"style_filtersText__Ri9O_\",\"filtersItems\":\"style_filtersItems__wtY3s\",\"chevron\":\"style_chevron__PPxCQ\",\"OptionContainer\":\"style_OptionContainer__9w4R7\",\"checkboxLabel\":\"style_checkboxLabel__mF6_s\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__DXBXv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorIcon\":\"style_competitorIcon__77Of4\",\"pageTitleUrl\":\"style_pageTitleUrl__l8xBO\",\"selectInput\":\"style_selectInput__bKQhM\",\"tableOuterPages\":\"style_tableOuterPages__AgusG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__l3WUN\",\"truncate\":\"style_truncate__5_fss\",\"tabsContainer\":\"style_tabsContainer__UYJo0\",\"tooltipContent\":\"style_tooltipContent__yIv6r\",\"title\":\"style_title__vbncV\",\"stat\":\"style_stat__2U44j\",\"label\":\"style_label__oCj7Z\",\"value\":\"style_value__OatCd\",\"competingTermsDrawerStyle\":\"style_competingTermsDrawerStyle__98Cfv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"selectInput\":\"style_selectInput__RDSGZ\",\"minified\":\"style_minified__rLAna\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsHeadingsDrawerStyle\":\"style_competitorsHeadingsDrawerStyle__ejLJA\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__fymKP\",\"popoverDivider\":\"style_popoverDivider__TIZ7J\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__4jpzP\",\"contentIdeasTitle\":\"style_contentIdeasTitle__rDNWa\",\"descriptionText\":\"style_descriptionText__dkTjD\",\"input\":\"style_input__ULYYv\",\"inputLabel\":\"style_inputLabel__ItSkl\",\"countrySelector\":\"style_countrySelector__DElA_\",\"selectInput\":\"style_selectInput__bf__m\",\"generateIdeasButton\":\"style_generateIdeasButton__AqGzy\",\"generatedItemsNumb\":\"style_generatedItemsNumb__iz2UY\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__4mBeR\",\"ContentIdea\":\"style_ContentIdea__2PlUV\",\"controlButtons\":\"style_controlButtons__YpGL7\",\"downloadButton\":\"style_downloadButton__iWffV\",\"copyButton\":\"style_copyButton___gD7q\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"overViewContainer\":\"style_overViewContainer__gRQCk\",\"title\":\"style_title__HNTaD\",\"boldTitle\":\"style_boldTitle__6f4Ii\",\"searchVolume\":\"style_searchVolume__kmSSg\",\"commonCitations\":\"style_commonCitations__g_Ylt\",\"citationScroll\":\"style_citationScroll__spbFE\",\"singleCitation\":\"style_singleCitation__0mNxO\",\"citationIcon\":\"style_citationIcon__UfZKe\",\"citationInfo\":\"style_citationInfo__fh1eJ\",\"citationName\":\"style_citationName__0_jeb\",\"citationUrl\":\"style_citationUrl____8Xs\",\"citationText\":\"style_citationText__j1sAb\",\"serpUsedByContainer\":\"style_serpUsedByContainer__82DwT\",\"citationSerpsContainer\":\"style_citationSerpsContainer__8KMGG\",\"serpIcon\":\"style_serpIcon__2dcxZ\",\"serpTooltip\":\"style_serpTooltip__mFPIs\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__tXyUj\",\"serpTitle\":\"style_serpTitle__KxJsy\",\"serpUrl\":\"style_serpUrl__oCtSk\",\"rankingContainer\":\"style_rankingContainer__V9EQL\",\"statusBar\":\"style_statusBar__qUtAS\",\"barTitle\":\"style_barTitle__yUiCm\",\"barSubTitle\":\"style_barSubTitle__ltuLr\",\"createButton\":\"style_createButton__4IncC\",\"rankingTable\":\"style_rankingTable__hRQEi\",\"firstColumnText\":\"style_firstColumnText__WROJq\",\"progress\":\"style_progress__Ft_pg\",\"dot\":\"style_dot__n0CLC\",\"topCompetitorTable\":\"style_topCompetitorTable__StrGn\",\"td\":\"style_td__vaRRm\",\"th\":\"style_th__e9zfY\",\"similarKeywordsTable\":\"style_similarKeywordsTable__53Snx\",\"paginationContainer\":\"style_paginationContainer__jJX9i\",\"titleText\":\"style_titleText__Z96eD\",\"urlText\":\"style_urlText__Qo1bK\",\"competitorImg\":\"style_competitorImg__Ct7If\",\"topTagsContainer\":\"style_topTagsContainer__30JuF\",\"topTags\":\"style_topTags__lUSuL\",\"addToProjectBtnExpanded\":\"style_addToProjectBtnExpanded___r13i\",\"addToProjectBtn\":\"style_addToProjectBtn__t13df\",\"disabledBtn\":\"style_disabledBtn__iGVvR\",\"addedToProjectBtnExpanded\":\"style_addedToProjectBtnExpanded__y3OYB\",\"iconRemove\":\"style_iconRemove__r5k98\",\"iconAdded\":\"style_iconAdded__KtJk2\",\"addedToProjectBtn\":\"style_addedToProjectBtn__AQ2cX\",\"viewAllKWButton\":\"style_viewAllKWButton__mqQ1f\",\"tooltipOverlay\":\"style_tooltipOverlay__EQTVG\",\"truncate\":\"style_truncate___oeK6\",\"contentResearchDrawerStyle\":\"style_contentResearchDrawerStyle__zXIxG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__V9bN1\",\"limitedAccess\":\"style_limitedAccess__9hmvs\",\"flexRow\":\"style_flexRow__TypB_\",\"quota\":\"style_quota__rhh52\",\"focusTermDropdown\":\"style_focusTermDropdown__AOpQn\",\"scoreContainer\":\"style_scoreContainer__loUPZ\",\"scoreDescription\":\"style_scoreDescription__fydWp\",\"scoreDescTitle\":\"style_scoreDescTitle__N5Fq9\",\"scoreDescText\":\"style_scoreDescText__49I_N\",\"speedIndexContainer\":\"style_speedIndexContainer__hpZ7E\",\"speedIndexDot\":\"style_speedIndexDot__XHb3w\",\"refecthButtonContainer\":\"style_refecthButtonContainer__jX7gt\",\"popoverInfoContainer\":\"style_popoverInfoContainer__zv0v3\",\"customSpinner\":\"style_customSpinner___6GwX\",\"keywords\":\"style_keywords__fho0v\",\"keywordMetric\":\"style_keywordMetric__8JKbU\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__UMcSb\",\"viewers\":\"style_viewers__L2oXV\",\"avatar\":\"style_avatar__fZe_c\",\"progress\":\"style_progress__JMqDz\",\"smallProgress\":\"style_smallProgress__gDgKa\",\"needHelp\":\"style_needHelp__wFCHN\",\"userIcon\":\"style_userIcon__ByzNC\",\"readabilityLetter\":\"style_readabilityLetter__hQD0j\",\"readabilityAActive\":\"style_readabilityAActive__X2_dk\",\"readabilityBActive\":\"style_readabilityBActive__fAWmd\",\"readabilityCActive\":\"style_readabilityCActive__i1lv3\",\"readabilityDActive\":\"style_readabilityDActive__VivCX\",\"readabilityEActive\":\"style_readabilityEActive__H5ftS\",\"readabilitySecondary\":\"style_readabilitySecondary__QWVvd\",\"focusTermsCollapse\":\"style_focusTermsCollapse__UdsfG\",\"header\":\"style_header__PDtnu\",\"number\":\"style_number__G29Vf\",\"expandedIcon\":\"style_expandedIcon__VyaR6\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin__fA2SL\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__PWpsl\",\"focusTermContent\":\"style_focusTermContent__erOS3\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__ih_4n\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__lXX3f\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__uE5uE\",\"copyIcon\":\"style_copyIcon__Yl1p4\",\"focusTermAndTags\":\"style_focusTermAndTags__e71fF\",\"icon\":\"style_icon__SlMha\",\"focusTermName\":\"style_focusTermName__2byG0\",\"foundInElement\":\"style_foundInElement__W0Nx4\",\"customFocusTermName\":\"style_customFocusTermName__Ms_Z_\",\"brandedLabel\":\"style_brandedLabel__RK_ob\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__z9yEJ\",\"focusTermUsageCount\":\"style_focusTermUsageCount__2P6MT\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__pHGc3\",\"removeFocusTerms\":\"style_removeFocusTerms__ERiTh\",\"removeTermLabel\":\"style_removeTermLabel__Hngc_\",\"removeTermIcon\":\"style_removeTermIcon__M1_JE\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__Oa1Mz\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__DyVeh\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__glCbD\",\"writingStylePopover\":\"style_writingStylePopover__C3ut3\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__5vHOV\",\"focusTermPopover\":\"style_focusTermPopover__VnTU3\",\"innerPopover\":\"style_innerPopover__lSYg1\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__24Dg6\",\"withArrow\":\"style_withArrow__5GtWL\",\"popoverTitle\":\"style_popoverTitle__ExoBo\",\"popoverCountrySv\":\"style_popoverCountrySv__XjYX9\",\"sv\":\"style_sv__uUHFn\",\"emoji\":\"style_emoji__YIvMa\",\"popOverTitle\":\"style_popOverTitle__QEfN0\",\"competitors\":\"style_competitors___oTWx\",\"competitor\":\"style_competitor__xaN9N\",\"singleCompetitor\":\"style_singleCompetitor__y4FaW\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__IGy_S\",\"snippetsContainer\":\"style_snippetsContainer__ujuID\",\"singleSnippet\":\"style_singleSnippet__VPWpj\",\"popoverDivider\":\"style_popoverDivider__boUZ7\",\"headingsPopover\":\"style_headingsPopover__y8sGr\",\"headingTooltipValue\":\"style_headingTooltipValue__fgpE6\",\"collapseContainer\":\"style_collapseContainer__pts2d\",\"collapsableContainer\":\"style_collapsableContainer__H44WO\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__88ikQ\",\"collapseButton\":\"style_collapseButton__so3g3\",\"commonPopover\":\"style_commonPopover__GswDO\",\"editKeywordsBtn\":\"style_editKeywordsBtn__u6kSF\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__NVC47\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__PZNMQ\",\"isKeywordRemoving\":\"style_isKeywordRemoving__juQLI\",\"suggestedKwContainer\":\"style_suggestedKwContainer__szYtD\",\"svAndCpc\":\"style_svAndCpc__KtqVX\",\"clickToAdd\":\"style_clickToAdd__GtPlI\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__uAxIa\",\"closeSuggestedKW\":\"style_closeSuggestedKW__g89NG\",\"cancelButton\":\"style_cancelButton__CSqoR\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon___PuoH\",\"keywordContainer\":\"style_keywordContainer__4fdS3\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__2uDTM\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__Num0E\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__Qqz06\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__aT7_s\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__ceI0z\",\"keywordLocationIcon\":\"style_keywordLocationIcon__eF4lH\",\"showIcons\":\"style_showIcons__iTCoZ\",\"editKwButtonContainer\":\"style_editKwButtonContainer__saLfy\",\"editKwButtonIcon\":\"style_editKwButtonIcon__gMi05\",\"keywordName\":\"style_keywordName__q2NAW\",\"keywordMetricContainer\":\"style_keywordMetricContainer___q6X_\",\"link\":\"style_link__01A4S\",\"orderContentBtn\":\"style_orderContentBtn__DE32O\",\"footerText\":\"style_footerText__s81Rx\",\"divider\":\"style_divider__kuakJ\",\"viewSchemaBtn\":\"style_viewSchemaBtn__4XAB1\",\"tabs\":\"style_tabs__yKF1D\",\"truncateText\":\"style_truncateText__uv_Dk\",\"darkenTechnical\":\"style_darkenTechnical__xbbue\",\"importUrlButton\":\"style_importUrlButton__gFSge\",\"scoreDescHeader\":\"style_scoreDescHeader__jw8OS\",\"popOver\":\"style_popOver__TgfyK\",\"subtitle\":\"style_subtitle__py_8r\",\"scrollBarSidebar\":\"style_scrollBarSidebar__7vCov\",\"focusTermsExpanded\":\"style_focusTermsExpanded__K1IrF\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__gHhKR\",\"selectContainer\":\"style_selectContainer__dc_Qg\",\"customSelectInput\":\"style_customSelectInput__4LY7U\",\"globeContainer\":\"style_globeContainer__wDM6e\",\"globeIcon\":\"style_globeIcon__Grl8C\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__a4Cas\",\"countryInfo\":\"style_countryInfo__fnbn7\",\"countrySearch\":\"style_countrySearch__67Vea\",\"topDiv\":\"style_topDiv__VdAWB\",\"locationArea\":\"style_locationArea__aoXon\",\"addKwBtnContainer\":\"style_addKwBtnContainer__fZ77F\",\"tooltipInner\":\"style_tooltipInner__vtG3X\",\"writingStyleContainer\":\"style_writingStyleContainer___9YQW\",\"singleReadabilityItem\":\"style_singleReadabilityItem__eEjir\",\"activeReadabilityItem\":\"style_activeReadabilityItem__wuJaK\",\"prevReadabilityItem\":\"style_prevReadabilityItem__Tp5ZP\",\"nextReadabilityItem\":\"style_nextReadabilityItem__bvcj1\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__q2__N\",\"addNewKwForm\":\"style_addNewKwForm__RKuU2\",\"populateButton\":\"style_populateButton__GrfTY\",\"customInputField\":\"style_customInputField__zvN4C\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs___0OIs\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__Gd2PJ\",\"questionsTab\":\"style_questionsTab__dppHa\",\"countrySelectorPopover\":\"style_countrySelectorPopover__T8e40\",\"columnTitlesRow\":\"style_columnTitlesRow__NMSYq\",\"columnTitle\":\"style_columnTitle__7VIWu\",\"defaultLocationName\":\"style_defaultLocationName__F5x15\",\"locationInfo\":\"style_locationInfo__NpXoS\",\"setAsDefaultText\":\"style_setAsDefaultText__cnlk2\",\"countryReach\":\"style_countryReach__pE0aL\",\"singleCountryRow\":\"style_singleCountryRow__pUxir\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__3i839\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__qu_SS\",\"copyTooltip\":\"style_copyTooltip__3916s\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__pm0sj\",\"miniMetrics\":\"style_miniMetrics__zV6fP\",\"miniMetricsLabel\":\"style_miniMetricsLabel__EtBkz\",\"miniMetricsValue\":\"style_miniMetricsValue__TOlMK\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__kw3Fc\",\"longLoadingBanner\":\"style_longLoadingBanner__Xqc_5\",\"customSchemaBtn\":\"style_customSchemaBtn__R0sVb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarError\":\"error_sidebarError__2cjOS\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"resize\":\"v2-sidebar_resize__QB3FU\",\"sidebar\":\"v2-sidebar_sidebar__q6cEA\",\"ant-typography\":\"v2-sidebar_ant-typography__ta5hf\",\"title\":\"v2-sidebar_title__OlAx5\",\"subTitle\":\"v2-sidebar_subTitle__LhneY\",\"secondary-text\":\"v2-sidebar_secondary-text__4LWw2\",\"divider\":\"v2-sidebar_divider__9z9OB\",\"link\":\"v2-sidebar_link___z0EU\",\"fullWidth\":\"v2-sidebar_fullWidth__k3Ujx\",\"back\":\"v2-sidebar_back__FYZmn\",\"close\":\"v2-sidebar_close__0lvVI\",\"edit\":\"v2-sidebar_edit__YifNd\",\"green\":\"v2-sidebar_green__KFjaa\",\"orange\":\"v2-sidebar_orange__cSWrx\",\"red\":\"v2-sidebar_red__JmlMA\",\"disable\":\"v2-sidebar_disable__nfA52\",\"upgradeCard\":\"v2-sidebar_upgradeCard__c27O9\",\"upgradeCardTitle\":\"v2-sidebar_upgradeCardTitle__HzPcb\",\"fullAccess\":\"v2-sidebar_fullAccess__tvMBu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__NBfKV\",\"left-side\":\"styles_left-side__LpfI5\",\"pageEditorError\":\"styles_pageEditorError__I7i3p\",\"headerKeywords\":\"styles_headerKeywords__2WBVR\",\"popoverDivider\":\"styles_popoverDivider__1cFJJ\",\"draftToolkit\":\"styles_draftToolkit__UgO6K\",\"loaderSpinnerContainer\":\"styles_loaderSpinnerContainer__unc8w\",\"loaderSpinner\":\"styles_loaderSpinner__qi_LK\",\"spin\":\"styles_spin__YiR1L\",\"selectionTooltip\":\"styles_selectionTooltip__DsvgJ\",\"arrowBottom\":\"styles_arrowBottom__usbcz\",\"textInputNotification\":\"styles_textInputNotification__5FRSY\",\"contentGeneratorDrawer\":\"styles_contentGeneratorDrawer__T7pXe\",\"closeIcons\":\"styles_closeIcons__8uuC5\",\"outlineDrawerBackArrow\":\"styles_outlineDrawerBackArrow__mEByX\",\"contentGeneratorTitle\":\"styles_contentGeneratorTitle__fm_kc\",\"selectedTextInfoContainer\":\"styles_selectedTextInfoContainer__lwCTc\",\"dataAndIcon\":\"styles_dataAndIcon__NAyfz\",\"textAndUrl\":\"styles_textAndUrl__cOjPy\",\"text\":\"styles_text__TfrwZ\",\"url\":\"styles_url__p8_St\",\"textUrlControlls\":\"styles_textUrlControlls__L9_rW\",\"urlPopup\":\"styles_urlPopup__3ZEur\",\"inputContainer\":\"styles_inputContainer__ACZFh\",\"textLabel\":\"styles_textLabel__yKZPz\",\"urlInput\":\"styles_urlInput__DVTni\",\"inputControlls\":\"styles_inputControlls__Ynfjt\",\"linkSuggestionsPopover\":\"styles_linkSuggestionsPopover__2c_Jo\"};"],"names":["notificationType","Notification","type","text","showContactSupportLink","param","settings","customer","isGHLAccount","useStore","openLiveChat","chatBtn","document","querySelector","click","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","div","className","classnames","styles","jsx","NextImg","src","span","onClick","CaAiQuotaInfo","observer","quotaUtilization","mode","size","customLabel","isMinified","colorSetup","useState","dark","textColor","light","gray","sizeSetup","small","fontSize","normal","profile","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","Wrapper","Label","ca","allowedAiContentGeneration","consumed","total","styled","_templateObject","p","_templateObject1","VideoPlayerModal","iconPath","title","subTitle","button1","videoLink","button2","FontAwesomeIcon","icon","faCheck","style","marginRight","buttonMinimize","onClickButton1","onClickButton2","button3","onClickButton3","home","videoPlayerModal","setVideoPlayerModal","minimized","setMinimized","Fragment","ModalStyled","destroyOnClose","width","display","alignSelf","visible","onClose","maskStyle","background","justifyContent","marginBottom","TitleText","SubTitleText","Button","color","variant","faArrowDownLeftAndArrowUpRightToCenter","iframe","height","frameBorder","allow","allowFullScreen","borderRadius","SmallPopupStyled","position","CloseOutlinedStyled","faArrowUpRightAndArrowDownLeftFromCenter","Modal","_templateObject3","_templateObject4","Table","props","block","blockProps","editor","getData","get","target","concat","createPortal","jsx_runtime","EditorBlock","data","tableKey","tableShape","colgroup","isArray","table","borderCollapse","margin","id","dangerouslySetInnerHTML","__html","tbody","map","row","i","tr","cell","j","element","th","border","padding","backgroundColor","textAlign","colSpan","colspan","rowSpan","rowspan","data-position","defaultValue","td","BlockImage","image","useRef","contentState","content","alt","getEntityAt","getEntity","widthImg","includes","heightImg","ref","iframeRegex","test","srcMatch","match","widthMatch","heightMatch","titleMatch","urlPattern","referrerPolicy","getNumberFromEnglishCounting","WriteForMe","htmlToDraft","contentOptimizer","currentPage","contentFragment","getCustomerQuota","isFullBtn","setIsFullBtn","currentEditorState","focusTermsClassNames","isSideBarHidden","antIcon","LoadingOutlined","spin","antIconLarge","useEffect","preventingDefaultMenu","e","stopPropagation","querySelectorAll","forEach","elem","addEventListener","removeEventListener","setTimeout","editorWrapperElem","getElementById","editorElem","clientWidth","offsetWidth","getEditorRealMargin","window","debouncedChange","debounce","state","focusTerms","isNewDecorations","editContent","debouncedUpdate","useCallback","getSelection","editorState","insertText","isBlock","firstNewBlockId","contentBlocks","entityMap","fragment","html","selection","newSelection","SelectionState","anchorKey","getKey","anchorOffset","getText","length","focusKey","focusOffset","getAnchorKey","getEndOffset","ContentState","createFromBlockArray","getBlockMap","nonStyledState","Modifier","replaceWithFragment","getCurrentContent","currentBlock","nextBlock","getBlockAfter","existingNodes","getAttribute","updatedState","EditorState","push","setCurrentEditorState","setAiTooltip","show","newTextElems","classList","add","analytics","remove","getParams","currentContent","fetchAndInsertText","action","selectedText","start","getAnchorOffset","getFocusOffset","end","getBlockForKey","isCollapsed","slice","fetchFragment","aiTooltip","Promise","reject","isTextSelected","isEmptyContent","Container","Tooltip","WriteForMeStyled","cursor","fragmentLoading","Spin","marginTop","indicator","faFeather","WriteForMeMiniStyled","BasedOn","isSelection","UsedQuota","used","_templateObject2","CustomBlock","blockRef","Option","Select","isOpen","setIsOpen","require","typesMap","hotKeysLabelMap","blockType","getType","dropdownRef","handleClickOutside","event","current","contains","onEditorChange","prevSelection","prevEditorState","forceSelection","BlockContainer","blockHeight","offsetHeight","topOffset","writeForMeTopOffset","isScaPublicPage","DropdownContainer","onContextMenu","currentValue","open","onChange","value","hasFocus","isBackward","newEditorState","RichUtils","toggleBlockType","dropdownStyle","dropdownMatchSelectWidth","suffixIcon","faCaretDown","Object","keys","idx","CustomBlock_templateObject","CustomBlock_templateObject1","Input","CommonInput","UploadFromUrlForm","store","form","Form","useForm","t","useTranslation","onUploadHandler","url","setIsCreateFromUrl","uploadFromUrl","updateContentLoadedAt","setCurrentStep","initialValues","onFinish","Item","name","rules","required","message","validator","_","isURL","require_protocol","resolve","inputType","placeholder","buttonType","loading","isUploading","Step1","setIsCreateFromScratch","setIsFirstArticleEdit","router","useRouter","onStartFromScratchClick","setIsFetchingTargetKw","analysis","clearUrl","createWithContent","createFromText","routes","landingPageOptimizer","query","uuid","undefined","shallow","br","Welcome","currentStep","styleMap","ContentEditor","getEditorState","showAiBanner","editorContainer","heroSection","lastScrollPosition","setLastScrollPosition","addHeroImageLoading","setAddHeroImageLoading","localStorage","setItem","aiOutline","aiMetaData","pages","getHeroImageById","clearFocusTermsClusters","getCurrentEditorState","zoomLevel","newPage","clearFeTargetKeywords","clearTargetKeywords","isInitialEditorStateFetched","setIsEditorScrolled","isEditorScrolled","setFocusTermsSorter","resetRepollCounters","clearAllTaData","setIsUnspashDrawerOpen","updateHeroImage","isHeroImageLoading","setContentType","clearAiOutline","isOpenAiOutlineDrawer","setIsOpenAiOutlineDrawer","clearV2AiOutline","setIsOpenAiContentToolsDrawer","clearTemplateOutlines","clearTemplates","setIsOpenAiWriterDrawer","clearOneClickIdea","clearOneClickOutlines","setAiWriter","aiWriterController","setAiTemplate","aiTemplatesController","clearMetaData","navBar","setIsDockedSider","heroImage","aiInProgress","setHeroImage","heroImageAltText","antIconOrange","windowHeight","innerHeight","showForm","label","key","removeSizeDataFromBlock","delete","set","blockMap","handleTabInTable","direction","collapsed","targetKey","targetBlock","getBlockBefore","merge","getLength","splitBlock","getLastBlock","createEmpty","setBlockType","isTargetTable","endOffset","setSelectionIfNone","getHasFocus","moveSelectionToStart","toggleInlineStyle","inlineStyle","customStyleMap","existingMatch","getCurrentInlineStyle","filter","split","toList","kebabCase","endsWith","rexp","RegExp","newString","replace","toggleListType","listType","getCurrentBlockType","handleDeleteKey","startBlock","getStartKey","endBlock","getEndKey","handleKeypressWhenSelectionNotCollapsed","toggleBlockData","newData","selectionState","newContentState","setBlockData","setIndent","listMax","indentMax","setDepth","adjustment","startKey","endKey","blocks","toSeq","skipUntil","k","takeUntil","depth","getDepth","maxDepth","newDepth","Math","max","min","selectionBefore","selectionAfter","isEditorFocus","focus","setIsEditorFocus","oneClick","getSingleUrlParam","writeWithAi","onEditorBlockTypeChange","getCurrentBlock","blockKey","currentSelection","handleChangeBlockType","keysMap","curPressKeys","checkKey","preventDefault","keyCode","multipleExist","keysArray","every","clearPressKeysArr","checkTitle","titleArray","handleAddHeroImage","targetKeywordsCount","cleanedHtml","res","loadPage","notification","error","warning","scrollTo","top","addHtmlToDocument","newHtml","hasText","reset","convertHtmlToEditorState","newBlockMap","newContent","currentEditor","blur","chars","prevBlock","firstCell","getStartOffset","firstTableKey","lastCell","lastTableKey","sameTable","startOffset","v","toOrderedMap","has","genKey","ContentBlock","Map","firstBlock","removeRange","first","butLast","subSelection","notLastTable","notFirstTable","notTable","separatorBlock","notTableStart","find","selectionKey","handlePastedText","pastedHtml","replaceText","moveFocusToEnd","getFirstBlock","blockRendererFn","contentBlock","component","editable","templateUsed","templateIcon","templateName","templateDesc","isStandaloneTool","toJS","isUseMask","onScroll","scrollTop","classNames","isExportingPage","getZoomLevel","editorHeightOffset","breadcrumbHeight","keywordsHeight","opaqueColor","alignItems","boxShadow","faBrainCircuit","fontWeight","marginLeft","faArrowRight","HeroImageWrapper","SkeletonRingLoader","HeroSection","HeroImage","ButtonsContainer","getPopupContainer","trigger","ButtonWrapper","faArrowsRotate","faICursor","faTrash","AiBanner","shouldPopulatePageHtml","Editor","editorKey","draftEditorState","scrollY","blockStyleFn","handleKeyCommand","command","offset","blockBefore","currentBlockType","acceptSelection","onBackspace","getFocusKey","float","keyBindingFn","KeyBindingUtil","hasCommandModifier","getDefaultKeyBinding","content_editor_templateObject","content_editor_templateObject1","content_editor_templateObject2","img","content_editor_templateObject3","content_editor_templateObject4","_templateObject5","User","avatar","email","isOwner","permission","onPermissionChange","activePermission","setActivePermission","Avatar","CaretDownFilled","share_modal_Option","ShareModal","pagePermissions","shareDialog","setEmail","setPermission","globalPermission","setGlobalPermission","isEditableByAnyone","handleGlobalPermissionsUpdate","location","existingPermission","existingViewPermission","isViewableByAnyone","navigator","clipboard","writeText","href","success","editPagePermissions","closeDialog","MixPanel","track","SCA_PAGE_SHARED","handleInviteUser","closeAfterSubmit","emails","warn","closable","closeIcon","faXmark","bodyStyle","Title","Head","InputContainer","V2Button","disabled","emailReg","EmailError","Body","ul","li","createdByUser","users","sort","user","toLowerCase","Divider","Footer","GrayButton","paddingBottom","paddingTop","share_modal_templateObject1","share_modal_templateObject2","share_modal_templateObject3","share_modal_templateObject4","share_modal_templateObject5","_templateObject6","_templateObject7","AiTooltip","activeOption","setActiveOption","urlCopy","setUrlCopy","setIsCopy","onLinkRemove","updatedSelection","toggleLink","sendTextToEditor","insertLinkToText","decorator","createCompositeDecorators","formatUrl","urlValue","entityKey","newContentWithEntity","createEntity","getLastCreatedEntityKey","newNewContent","textValue","withLinkText","withProperCursor","getSelectionAfter","isLinkEdit","bottom","left","onMouseDown","flexDirection","ButtonV2","paddingLeft","faEarthAmerica","faPen","isLink","faLinkSimpleSlash","word","faCopy","internalLinkSuggestions","link","keyword","trim","Popover","placement","overlayClassName","overlayStyle","SuggestionsContainerTitle","faCircleInfo","SuggestionsTitle","results","suggestion","SingleLinkContainer","Left","Link","Right","isUsed","SuggestionsMenuItem","faLink","faAngleRight","AiTooltip_templateObject","AiTooltip_templateObject1","AiTooltip_templateObject2","AiTooltip_templateObject3","AiTooltip_templateObject4","AiTooltip_templateObject5","AiTooltip_templateObject6","a","AiTooltip_templateObject7","Unsplash","contentType","UNSPLASH_ACCESS_KEY","UnsplashReact","namedExports","searchInput","onAddImage","imageUrl","onImageUpload","insertImage","accessKey","Uploader","withDefaultProps","InsertIntoApplicationUploader","onFinishedUploading","FreeStockTab","gap","Radio","RadioStyled","ImageComponent","setImagesList","historyCopyStatus","setShowSelectedHistoryImage","setShowHistoryImage","rootElement","setImagesAddedCount","imagesAddedCount","elemIdx","setElemIdx","imagesLoadedCount","setImagesLoadedCount","setShowAddHeroCheck","setShowAddToArticleCheck","setShowCopiedCheck","showAddHeroCheck","showAddToArticleCheck","showCopiedCheck","templatesHistory","currentElement","IntersectionObserver","entries","entry","intersectionRatio","unobserve","imagesLoading","item","imageList","images","root","threshold","observe","handleHistoryImageCopyClick","execCommand","result","inputs","fieldValue","selectedHistoryImageAdd","index","imgOnLoad","onMouseLeave","Col","onMouseOver","ColCardContainer","hide","ColCardImage","String","onLoad","button","copyIconWhite","viewImageCheck2","imageComponent_templateObject","imageComponent_templateObject1","ImageListComponent","buttonTitle","dummyImages","imagesDummy","setImagesDummy","imagesList","Row","gutter","overflow","maxHeight","val","CardStyle","load","Card","AICreateImagesTab","activeTab","isUnsplashDrawerOpen","setHistoryCopyStatus","aspectRatio","setAspectRatio","imagesAspectRatio","setImagesAspectRatio","isRealistic","setIsRealistic","loadAiTemplateOutlinesHistory","loadAiGeneratedImage","setDummyImages","setImageGenerateInputValue","imageGenerateInputValue","historyLoading","setCopyStatus","projects","setShowScaTopUpModal","isWhitelabel","isAllowedAiContentGenerationQuotaLimitReached","plans","showSidebarPaymentDrawer","setButtonTitle","showError","setShowError","showSelectedHistoryImage","showHistoryImage","selectSuffixIcon","filteredObj","projectId","defaultAiSettings","onGenerateBtnClick","subtitle","QuotaWrapper","QuotaInfoDetail","consumedData","totalData","heading","description","ctaLabel","showCta","customCta","isCenter","InputWrapper","CommonInputStyled","onFocus","whiteSpace","SettingContainer","SelectContainer","OptionLabel","SelectStyled","grayBackground","aspectRatioOptions","Checkbox","autoFocus","defaultChecked","checked","ModalImage","centered","footer","onOk","onCancel","ai_create_images_tab_templateObject","ai_create_images_tab_templateObject1","ai_create_images_tab_templateObject4","ai_create_images_tab_templateObject5","ai_create_images_tab_templateObject6","AddImageDrawer","checkTab","setActiveTab","handleClose","URL","queryParams","URLSearchParams","search","newURL","origin","pathname","toString","hash","history","pushState","path","Drawer","mask","maskClosable","TabsStyled","Tabs","tabBarGutter","activeKey","copyAndModifyQueryParams","TabPane","tab","AddImageDrawer_templateObject","EditorSection","isCopy","setEditorHeightOffset","setShowAiBanner","showEditAltModal","setShowEditAltModal","altText","setAltText","setElement","modalEditorStates","setModalEditorStates","hideButton","setHideButton","noFirstVisit","getItem","handleModalOpen","currentAlt","handleUpdateAlt","tagkey","attributes","blockList","next","newEntity","entity","mergeEntityData","promptForLink","pageX","pageY","closeContextMenu","headerKeywordsRef","updateKeywordsRef","isNil","isManualUpdate","debouncedHighlightingChange","decorated","changeType","acceptedTypes","decoratedState","debouncedHighlighting","errorMessage","isImportError","isCreatedFromScratch","prevOffset","blockWithLinkAtBeginning","linkKey","characterList","getCharacterList","initialSelectedText","generateSelectedText","lastWasEnd","selectedBlocks","blockArray","selectedTextFromBlocks","join","xSelection","x","prevChar","nextChar","prevEntity","nextEntity","finalPrevOffset","finalNextOffset","char","blockLength","finalAnchorOffset","rangeCount","getRangeAt","getBoundingClientRect","noEntityCase","noSelectionLeft","noSelectionTop","noSelectionBottom","tempX","clientY","clientX","linkInstance","startsWith","getLastChangeType","lastChangedBlockKey","lastChangedBlock","lastChangedBlockType","addCrossIcon","isExtensionInstalled","handleShowNotification","checkDate","getCount","date1","hoursDifference","Number","diffInMs","abs","date2","now","Date","maxWidth","checkCount","CloseOutlined","rel","transform","zIndex","InputTitle","InputStyled","ButtonsWrapper","CancelButton","ButtonStyled","EditorSection_templateObject","EditorSection_templateObject1","EditorSection_templateObject3","EditorSection_templateObject5","Header_Option","Header","blockTypeEnhancement","CaretDownOutlined","pointerEvents","UnorderedList","UnorderedListOutlined","Bold","inlineStyleEnhancement","BoldOutlined","Italic","ItalicOutlined","Underline","UnderlineOutlined","OrderedList","OrderedListOutlined","Code","CodeOutlined","Anchor","updateText","showNewUrlEditor","setShowNewUrlEditor","editorValues","setEditorValues","selectionRange","setSelectionRange","customSelection","dateRef","onkeydown","ctrlKey","shiftKey","metaKey","iconClicked","LinkOutlined","AnchorRemove","entityTypeEnhancement","removeLink","faUnlink","AddImage","openDrawer","faImage","Dragger","Upload","BrowseImage","loader","setLoader","isError","setIsError","altValue","parentElement","setImgFile","setImage","contentStateWithEntity","AtomicBlockUtils","insertAtomicBlock","formData","FormData","append","imgFile","CONTENT_ASSISTANT_API","uploadImage","ele","which","handleImageChange","selectedFile","reader","FileReader","onloadend","readAsDataURL","RequiredFileType","faTrashXmark","StyleDragger","multiple","showUploadList","customRequest","file","onDrop","getFile","dataTransfer","files","faCloudArrowUp","InputWraper","AtributeWrapper","Pwrapper","CancelBtn","AddBtn","browseFile_templateObject","browseFile_templateObject1","browseFile_templateObject2","UploadURL","imgRegex","imageFormat","urlUpload_templateObject","urlUpload_templateObject1","urlUpload_templateObject2","UploadImage","FileBtn","faFileImage","Popup","StyledInputContainer","StyledTabs","defaultActiveKey","UploadImage_templateObject2","UploadImage_templateObject3","InsertIframe","showIframeEditor","setShowIframeEditor","setUrl","contentData","iframeUrl","faRectangleCode","LargeBadge","alpha","StyledPopup","StyledUrlContainer","InsertButton","insertIframe_templateObject1","Textarea","Toolkit","isTaActive","setIsSideBarHidden","setZoomLevel","isPublic","updatingFolder","isLinkgraph","newState","undo","UndoOutlined","redo","RedoOutlined","faWandMagicSparkles","arrowPointAtCenter","faChevronRight","transition","useClickedOnPageHandler","callback","SingleKeywordDataCard","getSpecificCountryByCode","kw","keywordsFormProps","countries","Text","Typography","updateKeyword","useWatch","keywordResearcherV2","postNewKeywords","keywordDetails","loadKeywordDetailList","loadKeywordDetails","setDetailsRepolling","isKwNameEdit","setIsKwNameEdit","showLocationSelector","setShowLocationSelector","isEditDefaultLocation","setIsEditDefaultLocation","popRef","showKwErrorMsg","setShowKwErrorMsg","showMessage","r","removeTargetKeywords","err","payload","keywordsArray","feTargetKeywords","feKw","updateFeTargetKeywords","locationId","countryCode","editKeywords","response","status","allowedFocusTerms","isEmpty","setFieldsValue","postAndGetData","keywords","kwClickHandler","targetKeywords","setIsDrawerFromCa","setActiveTargetKw","setIsOpenKeywordDrawer","values","formKeyword","formatArray","preparedKeyword","kwArray","locationSelected","reach","updatelocationData","keywordForFrontendArray","JSON","stringify","SCA_PAGE_UPDATE_KEYWORD_LOCATION","locationDebouncerChange","country","updateCountriesList","openLocationSelector","searchForLocation","shouldUpdate","resetFields","faTimes","toUpperCase","overlayInnerStyle","faLocationDot","mouseLeaveDelay","mouseEnterDelay","openClassName","faArrowLeft","faSearch","faInfoCircle","faGlobe","formatNumber","faMapMarkerAlt","serpTaskStatus","Flag","code","searchVolumeFormatter","sv","Globe","globalSv","svTopCountries","indx","_countryCode","searchVolume","Progress","showInfo","strokeWidth","percent","round","trailColor","strokeColor","getProgressColor","SkeletonHorizontalLoaderGray","lightLoader","skeletonHeight","skeletonMarginTop","kd","getInverseProgressColor","costPerClickFormatter","cpc","TargetKeywords","expanded","isAddingNewKw","setIsAddingNewKw","newKwValue","setNewKwValue","kwLengthErr","setKwLengthErr","targetrKeywordsContainer","addHorizontalScroll","topScroll","leftScroll","scrollX","onscroll","deltaY","scrollLeft","newKwLocation","setNewKwLocation","popoverRef","onAddKeywordFinish","format","faPlus","numberWithCommas","textOverflow","faExclamationTriangle","SCA_PAGE_ADD_KEYWORD","SuggestedKeywordCard","isRemoving","setIsRemoving","addSuggestedKwToTargetKw","passedKw","stagedForAddingKw","SCA_PAGE_ADD_KEYWORD_SUGGESTION","removeTargetKeyword","removeSuggestedKeyword","strong","KeywordSuggestions","keywordSuggestionsContainer","showAllSuggestionsHandler","kwSuggestions","isFetchingSuggestedKw","editorText","TargetKeywordsAndSuggestions","isExpanded","setIsExpanded","containerRef","parentRef","ChevronDown","faChevronDown","faChevronsDown","faChevronUp","MetaIdeasList","metaIdeas","onIdeaUse","metaCopied","setMetaCopied","copyMetaHandler","desc","IdeasContainer","idea","SingleIdeaContainer","MetaTitle","metaTitle","MetaDesc","metaDesc","MetaIdeasList_templateObject","MetaIdeasList_templateObject1","MetaIdeasList_templateObject2","MetaIdeasList_templateObject3","MetaTagGenerator","updateMetaData","setIsExternalTitleEdit","isMetaUpdating","editTitle","setLoading","loadAiMetaData","metaData","showMetaDataModal","setShowMetaDataModal","customMetaTitle","setCustomMetaTitle","customMetaDesc","setCustomMetaDesc","showAiMetaResults","setShowAiMetaResults","antdIcon","updateMetadata","meta_title","meta_desc","checkPageTitle","regexp","aiButtonTooltipMsg","msg","generateSingleMetaIcon","metaValue","faHexagonExclamation","metaValueMinLength","metaValueMaxLength","largerThenMax","smallerThanMin","idealSize","missing","largerBy","smallerBy","statusMsg","faTriangleExclamation","faCircleCheck","updateMetaDataHandler","aiMetaDataHandler","targetKwArr","aiSuggestionMsg","metaDataTooltipContent","destroyTooltipOnHide","onVisibleChange","MetaDataBtnStyled","OneClickPublisherV2","extractOptions","wpArray","syncedAt","postStatus","synced","publishedAtUrl","topicalMapName","errorId","setErrorId","smallPageLoad","setUnsavedChanges","unsavedChangesInContent","wpPublish","fetchWpPublishData","postingData","showDataModal","setShowDataModal","publishWpPage","setShowAddSiteModal","isApiError","isShopifyApiError","updateApiError","setShowIndividualPopover","showIndividualPopover","setLoadingData","loadShopifyBlogs","blogs","creatingPage","creatingBlog","createNewShopifyPage","createNewShopifyBlog","getVendorAccounts","vendorAccounts","ottoV2Store","loadIssueTableData","ottoUrls","selectedWpSite","setSelectedWpSite","triggerSites","setTriggerSites","selectedShopifySite","setSelectedShopifySite","showWpVideo","setShowWpVideo","filteredObject","setFilteredObject","selectedUser","setSelectedUser","selectedWpSiteUsers","setSelectedWpSiteUsers","setTrigger","showSynchronizeTypeDropdown","setShowSynchronizeTypeDropdown","synchronizeType","setSynchronizeType","parent","setParent","project","setProject","reloadProjectUuid","refOne","refTwo","newBtnLabelOptions","setNewBtnLabelOptions","currentProject","offerPublishUrl","importedFromUrl","wpPublishedAtUrl","cleanWpArr","getDomain","showWpFormType","setShowWpFormType","syncWp","createNewWp","syncShopify","shopifySynced","createNewShopify","wpPostCategories","wpPostStatus","wpPostType","wpPublishedAtWebsiteId","defaultWpPostCategories","defaultWpPostStatus","defaultWpPostType","defaultWpWebsiteId","shopifyContentType","wpPostParent","shopDomain","wpWebsite","wpPostCategory","account_id","accountId","postParent","wpNewPostCategory","author","wpPostAuthorId","selectedWPsiteData","articles","updatedArticles","setShopifyInitialValues","newBtnLabel","setNewBtnLabel","syncBtnLabel","setSyncBtnLabel","Group","antdIconLarge","wpPostMetaDesc","getTopLinkUrl","getTopLinkId","publishWpPageHandler","notificationV2","topicalMapObject","obj","issueType","params","issue_type","page_size","pageSize","page","is_loading","pageId","pageUrl","postType","postAuthor","postCategories","selectedVendor","shopifySite","shop_domain","shopifyPayload","blog_title","ca_page_id","post_type","tags","new_post","permalink","getSyncedPill","SyncedPill","faCircleXmark","setFields","errors","categories","options","category","children","wpPublisherSyncSection","WpUpdatePostSection","isActive","CustomRadioButton","VideoTutorialBtn","InputsContainer","wpSyncedAt","shopifySyncedAt","wpSynced","shopifyContentUrl","WpLastSyncLeft","moment","WpSyncedPostDetails","sanitizeUrl","faUpRightFromSquare","InputLabelWrapper","FormLabel","initialValue","PurpleRadioButton","blueColor","getFieldValue","StyledFormItem","blog","on","userEmail","itemsArray","areCategoriesSame","Array","PublishButton","htmlType","wpPublisherNewPostSection","WpNewPostSection","borderRadiusTop","wpSite","OptionalTag","pattern","wordCount","wpPublishTooltipContent","WpPublishTooltipContentWrapper","ErrorNotificationContainer","ErrorNotification","textDecoration","onClickShopify","alignConfig","points","handleClick","shopifyBlogId","shopifyBlogTitle","shopifyPostType","shopifyAuthor","shopifyAccountId","shopifyTags","Dropdown","overlay","DropdownContentContainer","align","SynchronizeType","isCleanedHtmlUpdated","_content_wpPostAuthorId","faWordpressSimple","faCaretRight","isShopifyCustomer","faShopify","SynchronizeBtn","faRotate","OneClickPublisherV2_templateObject","OneClickPublisherV2_templateObject1","OneClickPublisherV2_templateObject2","OneClickPublisherV2_templateObject3","OneClickPublisherV2_templateObject4","OneClickPublisherV2_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject19","TitleEditor","languages","contentLoadedAt","isAnalyzing","isExternalTitleEdit","viewers","setShowQuickSyncModal","showQuickSyncModal","userAiSettings","updateUserAiSettings","getUserAiSettings","titleLeft","setTitleLeft","setTitle","modalUrl","setModalUrl","editPageUrl","setEditPageUrl","isCloseClicked","setIsCloseClicked","showDownloadConfirmationModal","setShowDownloadConfirmationModal","submitDisabled","setSubmitDisabled","renderWithbrowser","setRenderWithBrowser","keepContentModal","setKeepContentModal","titleContainerWidth","setTitleContainerWidth","calculateWidth","collapsedViewers","setCollapsedViewers","titleRef","getTitleLeft","urlInput","debouncedChangeFocusOut","URL_PATTERN","popupRef","language","setLanguage","defaultLanguage","onLanguageChangeHandler","option","selectSufixIcon","onEditUrlSubmit","updateUrlHandler","shouldOverwriteContent","renderWIthBrowser","SCA_PAGE_URL_UPDATE","titleWidth","ctx","createElement","getContext","measureText","formatedTitleWidth","WpInstructionsModal","WpAddSiteModal","CommonModal","EditUrlModalTitle","EditUrlModalSub","EditUrlLink","EditUrlModalButtons","CheckboxStyled","input","onBlur","readOnly","ScaArticleStatusSelectorV2","articleUuid","articleStatus","ProjectsSelector","projectName","pageUuid","minifiedVersion","EditUrlContainer","valuePropName","Loader","faArrowDownToBracket","faArrowUpFromBracket","opacity","StyledSelect","showSearch","filterOption","indexOf","onMouseEnter","lang","formatCountryCode","title_editor_templateObject","title_editor_templateObject2","title_editor_templateObject3","title_editor_templateObject4","title_editor_templateObject5","dropdownColors","grey","listItemsBackgroundColor","borderColor","BreadCrumb","headerTopRef","isKebabOpen","setIsKebabOpen","isModalOpen","setIsModalOpen","exportToDocsLoading","setExportToDocsLoading","briefAntIcon","copySuccess","setCopySuccess","clearAnalytics","isExporting","isSaving","exportToGoogledoc","deleteDialog","incrementInTotalArticle","setPageRemovedFromEditor","isAllowedPagesQuotaLimitReached","clientHeight","createPage","PAGES_API","SCA_CREATE_PAGE","exportToGoogleDocs","exportPageToGoogleDocs","PageHeader","onBack","login","backIcon","extra","ShareButton","openDialog","faShareNodes","ExportButton","faFileArrowDown","faEllipsisV","ButtonComponent","googledocLink","SCA_PAGE_EXPORT_TO_DOCS","GoogleOutlined","resp","exportArticleAsHtml","setAttribute","encodeURIComponent","body","appendChild","removeChild","allowedPages","DeleteModal","removeFromEditorCallback","h1","Btn","TopSection","minWidth","DraftToolkit","TextSuggestions","setIsTaActive","setFocusTermsForInsertion","stagingTaSuggestions","taActiveTerm","setTaActiveTerm","setStagingTaSuggestions","highlightedNodeId","setHighlightedNodeId","showOriginalBlockId","setShowOriginalBlockId","updatingTa","totalOccurances","setTotalOccurances","getElementsByClassName","class","onArrowClickHandler","updatedValues","term","order","nodesWithTerm","_higlightedNode_dataset","higlightedNode","dataset","blockIndex","elemOffset","offsetTop","Heading","blocksRenderer","blocksArray","domNode","attribs","typeDettector","onBlockStatusChange","prepDataArr","itemIndex","onDotClickHandler","updateImageStyle","replaceAll","TextContainer","regExp","isSuggestion","SingleBlockWithSuggestion","showingOriginalBlock","currNodeId","data-block-index","termIncluded","right","textTransform","parse","faRotateLeft","BlockWrapper","Controller","DotsContainer","Dot","Arrow","faArrowUp","faArrowDown","checkCurBlockStatus","highlightedNode","elementStatus","_highlightedNode_dataset","TextSuggestions_templateObject","TextSuggestions_templateObject1","TextSuggestions_templateObject2","TextSuggestions_templateObject3","TextSuggestions_templateObject4","TextSuggestions_templateObject5","TextSuggestions_templateObject6","TextSuggestions_templateObject7","TextSuggestions_templateObject8","TextSuggestions_templateObject9","TextSuggestions_templateObject10","TextSuggestions_templateObject11","TextSuggestions_templateObject12","MissingPlacementsBanner","setShow","termsWithNoSuggestions","setTermsWithNoSuggestions","getlinksForInsertion","linksAssistantSuggestions","prepArr","linksIncluded","noPlacementsTermsCount","autoAdjustOverflow","MissingPlacementsBanner_templateObject","SingleTerm","finalTermsList","setFinalTermsList","setVisible","kwUpdate","termIndex","setTermIndex","getstagingLinkSuggestions","setStagingLinkSuggestions","setLinkActiveTerm","linkActiveTerm","onTermClickHandler","curTerm","newClass","incDec","cardClick","scrollTerms","acceptedStatus","dismissedStatus","CardTitle","isTerm","faCircleX","faCircleDashed","StatusTitle","isVal","DividerLine","SuggestionCard","newItems","updateTerm","SingleTerm_templateObject","SingleTerm_templateObject1","SingleTerm_templateObject2","SingleTerm_templateObject3","SingleTerm_templateObject4","SingleTerm_templateObject6","LinksList","taLinkSuggestionLoading","setFilter","loadLinksData","expectedData","outerArray","linksData","innerArray","uniqueData","seenSet","Set","array","stringRepresentation","suggestionList","allLinks","arrayToObject","givenValue","expectedValue","internalLinkSuggestionsV2","getTerms","elements","DOMParser","parseFromString","innerText","formattedArray","arr","arrTwo","indexx","filteredValue","addData","firstTerm","LinkAssistantRightSidebar","inputValue","activeKeywordsList","setIsLinkActive","setLinksForInsertion","stagingLinkSuggestions","setIsTaUpdating","fetchLinkSuggestions","setActiveKeywordsList","updated","setUpdated","setInputValue","anyButtonClicked","setAnyButtonClicked","activeKwArr","active","onCheckboxClicked","elemId","filteredKw","findIndex","onCancelClickHandler","onSubmitHandler","finalHtmlOutput","updatedEditorState","keywordsDropdown","KeywordsDropdownContainer","OverlayTitle","addLink","allLink","urlWithProtocols","links","stringToArray","keywordNewLineReg","popoverContent","CustomTextarea","paddingToNumber","paddingToText","isKeyWordv2","autoSize","minHeight","autoSizeCheck","nativeEvent","LinkSubmitBtns","selectedLink","TaWrapper","TermsMainWrapper","TitleContainer","Description","ActionButtonsContainer","some","linkAssistantRightsideBar_templateObject","linkAssistantRightsideBar_templateObject1","linkAssistantRightsideBar_templateObject3","linkAssistantRightsideBar_templateObject4","linkAssistantRightsideBar_templateObject5","linkAssistantRightsideBar_templateObject7","viewSuggestionsOption","css","blinkAnimation","keyframes","linkAssistantRightsideBar_templateObject9","linkAssistantRightsideBar_templateObject10","linkAssistantRightsideBar_templateObject11","linkAssistantRightsideBar_templateObject12","TextSuggestionsLinks","isLinkActive","doc","TextSuggestionsLinks_templateObject","TextSuggestionsLinks_templateObject1","TextSuggestionsLinks_templateObject2","TextSuggestionsLinks_templateObject3","TextSuggestionsLinks_templateObject4","TextSuggestionsLinks_templateObject5","LeftSide","sideBarWidth","LeftSideContainer","isLinkSuggestionActive","isNewPage","LeftSide_templateObject","Error","WarningOutlined","h3","SingleCluster","SORT_DIRECTION","removingTerms","cluster","isClusterRemoving","tableData","setTableData","sortField","setSortField","sortDirection","setSortDirecion","removeClusterHandler","isBulkRemovingCluster","bulkRemoveTerms","setTerms","dataFiltered","filterDataInMemory","handleTableChange","pagination","filters","sorter","column","sortFieldName","dataSource","loadingRows","columns","dataIndex","render","record","foundIn","FoundInLabel","isBranded","formatLargeNumber","defaultSortOrder","usedCount","idealCountMax","RemoveClusterBtn","rowKey","SingleCluster_templateObject","SingleCluster_templateObject1","BulkRemoveTermsModal","clusteredTerms","setClusteredTerms","clusterToRemove","setClusterToRemove","clusterTerms","clusters","tempArr","focusTermsSorter","tempCluster","b","clusterTitle","termsArr","ModalTitle","CollapseStyled","expandIconPosition","Collapse","Panel","header","ClusterHeader","ClusterName","ClusterDesc","clusterSv","BulkRemoveTermsModal_templateObject","BulkRemoveTermsModal_templateObject1","BulkRemoveTermsModal_templateObject2","BulkRemoveTermsModal_templateObject3","BulkRemoveTermsModal_templateObject5","TermsDropdownController","onViewChange","currentView","onChangeIncludeBranded","includeBranded","onTermsFilter","onSortTerms","showExportModal","setShowExportModal","showBulkRemoveTermsModal","setShowBulkRemoveTermsModal","getTermsCount","termsFiltersSetup","setTermsFiltersSetup","handleOnSortChange","downloadFileToTxt","pageTitle","articleUrl","imagesCount","count","videosCount","videos","iframesCount","iframes","internalLinksCount","internal","externallLinksCount","external","socialCount","social","javascriptCount","js","headersSum","headers","headersCount","pageTechnicalsString","includedFocusterms","notIncludedFocusTerms","ft","requiredCountMin","questionsSting","questions","q","convertedText","Blob","createObjectURL","download","getXlsExportLink","token","getTokenFromCookies","baseUrl","getApiUrl","BaseApi","CA_ENDPOINT","termsFilterHandler","updatedTermsSetup","updatedFilteredTermsArr","tooltipStyle","isNotPublic","viewChangeDropdown","TermsViewDropdownContainer","CheckboxStyledHighlights","highlights","setHighlights","PTag","BulkRemoveTermsBtn","TermsContainer","ExportModalTitle","ExportModalDesc","ExportModalButtonsContainer","faFileSpreadsheet","faFileLines","faGoogle","TermsFilterContainer","customBackground","GroupTermsContainer","Menu","sorters","Sort","faArrowUpArrowDown","SortTxt","isRemovingFocusTerms","AddButton","setShowAddFocusTermModal","ExportBtn","AdjustBtnContainer","GearIcon","faSliders","TermsDropdownController_templateObject","TermsDropdownController_templateObject1","TermsDropdownController_templateObject2","TermsDropdownController_templateObject4","TermsDropdownController_templateObject5","TermsDropdownController_templateObject7","TermsDropdownController_templateObject9","TermsDropdownController_templateObject10","TermsDropdownController_templateObject11","TermsDropdownController_templateObject12","TermsDropdownController_templateObject13","TermsDropdownController_templateObject14","TermsDropdownController_templateObject15","TermsDropdownController_templateObject16","TermsDropdownController_templateObject17","TermsDataController","onFilter","isClustersExpanded","setIsClustersExpanded","termsSearchQuery","setTermsSearchQuery","termsSearchInputValue","setTermsSearchInputValue","secondAntIcon","handleOnClusterClick","filteredSearch","clusterName","termSearchHandler","formatInput","trimmedArr","SearchAndSort","prefix","faMagnifyingGlass","ClustersWrapper","ClustersContainer","expandedClusters","ClusterTooltipSingleRow","ClusterTooltipLabel","ClusterTooltipValue","SingleClusterContainer","activeCluster","TermsDataController_templateObject","TermsDataController_templateObject1","TermsDataController_templateObject2","TermsDataController_templateObject3","TermsDataController_templateObject4","TermsDataController_templateObject5","TermsDataController_templateObject6","TermsDataController_templateObject7","AntdInput","focusTerm","removeTermHandler","removeTerms","termContainerSetup","hoverBackground","fitTermInQuota","quote","startIndex","h5","targetKewyordsOnlyArr","getTwoGreenPercentageColor","percentage","requiredCountMax","competitors","competitor","getSiteName","hostname","snippets","snippet","normalizedScore","source","LowerSection","isAnyFocusTermLink","wikipediaLink","wikidataLink","knowledgeGraphLink","crunchbaseLink","ReferencesWrapper","ReferencesTitle","LinksWrapper","SingleLink","faWikipediaW","TermContainer","TermName","BrandedLabel","CopyIcon","FocusTermsTab_SingleTerm_templateObject","FocusTermsTab_SingleTerm_templateObject1","FocusTermsTab_SingleTerm_templateObject2","FocusTermsTab_SingleTerm_templateObject3","FocusTermsTab_SingleTerm_templateObject4","FocusTermsTab_SingleTerm_templateObject5","FocusTermsTab_SingleTerm_templateObject6","SingleTerm_templateObject7","SingleTerm_templateObject8","SingleTerm_templateObject9","SingleTerm_templateObject10","SingleTerm_templateObject11","TermsDropdowns","includedBranded","setIncludeBranded","setQuery","termsToShow","setTermsToShow","isCopied","setIsCopied","standardTerms","setStandardTerms","queryParam","prepTermsArr","filteredTerms","termsToShowParam","TopicalTermsContainer","focusMode","focusTermsExpanded","CopyButton","TermsDropdowns_templateObject","TermsDropdowns_templateObject1","TermsDropdowns_templateObject2","FocusTermsTab","includedTerms","includeMoreTerms","includeLessTerms","EmptyDataBox","FocusTermsTab_templateObject","LinkSuggestionsDropdownController","isSynced","setIsSynced","isSyncing","setIsSyncing","onLinksSync","getInternalLinkSuggestionsv2","FocusModeBtn","setFocusTermsExpanded","faDownLeftAndUpRightToCenter","faUpRightAndDownLeftFromCenter","FocusModeLabel","ExportIcon","faFileDownload","RefetrchBtnContainer","faSyncAlt","LinkSuggestionsDropdownController_templateObject","LinkSuggestionsDropdownController_templateObject2","LinkSuggestionsDropdownController_templateObject3","LinkSuggestionsDropdownController_templateObject4","SingleSuggestion","customCallback","isRemovingTerm","setIsRemovingTerm","isBookmarked","setIsBookmarked","removeInternalLinkSuggestion","bookmarkInternalLinkSuggestion","TitleAndStar","faStarSolid","faStar","SingleISugesstion_templateObject","SingleISugesstion_templateObject1","SingleISugesstion_templateObject2","SingleISugesstion_templateObject3","SingleISugesstion_templateObject4","SingleISugesstion_templateObject5","InternalLinksSuggestions","isQueried","DropdownsContainer","InternalLinkSuggestions_templateObject","SingleCitation","citation","addDefaultSrc","onError","substring","serps","serp","CommonCitations","commonCitations","SidebarTooltip","SuggestionsDataController","visibleKeywords","updateKeywords","linksDropDownFromSuggestion","showEditor","setShowEditor","hostnameEditor","EditorContainer","FormStyled","updateHostname","InputStyeld","ButtonContainer","isUpdatingHostname","UpdateButton","topMessage","HostnameContainer","HostnameLink","addProtocolToDomain","HostnameLinkBtnContainer","AddNewUrlBtn","ViewDropdownContainer","viewControlls","ViewControllsContainer","SearchAndSortWraper","SearchContainer","SuggestionsDataController_templateObject","SuggestionsDataController_templateObject1","SuggestionsDataController_templateObject3","SuggestionsDataController_templateObject4","SuggestionsDataController_templateObject5","SuggestionsDataController_templateObject6","SuggestionsDataController_templateObject7","SuggestionsDataController_templateObject9","CommonBtn","SuggestionsDataController_templateObject12","SuggestionsDataController_templateObject17","SuggestionsDataController_templateObject19","_templateObject20","_templateObject21","LinkSuggestionsTab","perc","setCurrentView","searchQuery","setSearchQuery","dataArr","setDataArr","initialDataArr","setInitialDataArr","setIsQueried","selectedOption","setSelectedOption","domain","setDomain","isVisiblePopover","setIsVisiblePopover","updateLoading","setUpdateLoading","urlsError","setUrlsError","isFetchingIntLinksSug","onDataFilter","filterDataHandler","formattedArr","customDataArr","foundLinks","n","filteredSelectedLinks","foundLink","calculateUsagePercentage","postLInkSuggestion","initValues","handleRadioChange","submitUrl","apiError","kwArr","SuggestionsBannerContainer","TooltipTitle","TooltipDescription","exportLinkIcon","Pill","StyledPopover","PopoverContentWrapper","PopoverTitle","providedUrl","AddDomainSection","DomainDetails","AddDomainTitle","AddDomainDesc","AddDomainInput","ProvideUrlsSection","ProvideUrlsDetails","ErrorMessageForURL","Dismiss","Update","onOpenChange","LinkSuggestionsTab_templateObject","LinkSuggestionsTab_templateObject1","LinkSuggestionsTab_templateObject2","LinkSuggestionsTab_templateObject3","LinkSuggestionsTab_templateObject4","LinkSuggestionsTab_templateObject6","LinkSuggestionsTab_templateObject7","LinkSuggestionsTab_templateObject8","LinkSuggestionsTab_templateObject9","LinkSuggestionsTab_templateObject10","LinkSuggestionsTab_templateObject11","LinkSuggestionsTab_templateObject12","LinkSuggestionsTab_templateObject14","LinkSuggestionsTab_templateObject15","LinkSuggestionsTab_templateObject16","LinkSuggestionsTab_templateObject18","SingleQuestion","question","aiCopied","setAiCopied","setCreatingPage","isAiGenerating","setIsAiGenerating","justify","faMessageCheck","faFilePlus","QuestionsTab","level","htmlString","string","copiedText","textContent","htmlContent","plainTextContent","copyToClipboardWithHtmlAndText","AddFocusTermModal","showAddFocusTermModal","terms","addFocusTerms","isFocusTermsLoading","handleAddFocusTerms","StyledModal","Desc","TextArea","AddFocusTermModal_templateObject1","AddFocusTermModal_templateObject2","AddFocusTermModal_templateObject3","AddFocusTermModal_templateObject4","FocusTermsTabs","setActiveKey","onChangeTab","SCA_PAGE_FOCUS_TERMS_TAB_OPEN","SCA_PAGE_QUESTIONS_TAB_OPEN","SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN","CommonTabsStyled","tabBarStyle","editorScrolled","TabTitleContainer","totalUsedTerms","totalUsedQuestions","totalUsedSuggestions","CommonTabs","CommonTabPane","FocusTermsTabs_templateObject2","SingleMetrics","tooltipLabel","showTooltip","headingData","StyledLable","StyledIcon","RangeValues","h2","h2Min","h2Max","h3Min","h3Max","internalLinks","internalLinksMin","internalLinksMax","externalLinks","externalLinksMin","externalLinksMax","isWithinRecomendedRange","SingleMetrics_templateObject","SingleMetrics_templateObject1","SingleMetrics_templateObject2","SingleMetrics_templateObject3","ContentScore","scoreCounts","scoreExtended","internalLinksData","externalLinksData","avg","h1value","h1Min","h1Max","h2value","h3value","setViewSuggestionsOption","setLinksDropDownFromSuggestion","isWordCountLoading","isScoreLoading","score","suggestedWordCountLimits","viewSuggestionHandler","shouldShowTooltip","tooltipMsg","cur","openText","scrollToText","anchorTag","scrollIntoView","behavior","countsSetup","lower","upper","paragraphs","paragraphsMin","paragraphsMax","headings","headingsMin","headingsMax","StyleHeadingsTooltipTitle","internalLinksLength","externalLinksLength","StyledLinksTabs","StyledRecommender","StyledRecomentedValue","StyledSuggestionLink","showAsLink","StyledCurrentValue","StyledFontAwesomeIcon","StyledLinksDiv","StyledLinkItem","faArrowUpRightFromSquare","ReactEcharts","grid","series","axisLine","roundCap","lineStyle","progress","startAngle","radius","endAngle","pointer","offsetCenter","itemStyle","axisTick","splitLine","distance","splitNumber","axisLabel","detail","RightSection","ContentScore_templateObject","ContentScore_templateObject1","ContentScore_templateObject2","ContentScore_templateObject5","ContentScore_templateObject6","ContentScore_templateObject7","ContentScore_templateObject8","ContentScore_templateObject9","ContentScore_templateObject10","WordCount","WordCount_templateObject","WordCount_templateObject1","HeaderSection","MiniContainer","ScoreAndWordCount","ProgressStyled","strokeLinecap","gapDegree","gapPosition","MiniTitleContainer","HeaderSection_templateObject","HeaderSection_templateObject1","HeaderSection_templateObject2","HeaderSection_templateObject3","HeaderSection_templateObject5","HeaderSection_templateObject6","HeaderSection_templateObject7","termsForInsertion","termsAssistantSuggestions","overflowY","TermsAssistant_MissingPlacementsBanner_templateObject","dots","setDots","saved","dismissed","savedPlacements","dismissedPlacements","placements","Data","PlacementsInfo","generatePlacmenetsInfo","TermsList_SingleTerm_templateObject","TermsList_SingleTerm_templateObject1","TermsList_SingleTerm_templateObject2","TermsList_SingleTerm_templateObject3","TermsList_SingleTerm_templateObject4","TermsList","termOccurances","TermsSelectionDropdown","_filter","selectedTerms","setSelectedTerms","popoverVisible","setPopoverVisible","showLimitError","setShowLimitEror","fetchTaSuggestions","taSuggestionsLoading","handleCheckboxClick","updatedList","onTermsSearchHandler","onBulkSelectTop20Handler","addCompleteTerms","prepcCompleteTerms","completeTermsLength","prepIncludeMoreTerms","onUncheckAllClickHandler","onTriggerClickHandler","HeadingSection","SearchBox","QuotaInfo","ControllsBar","BulkControllBtn","SingleTermRow","opaque","TermUsage","BtnsContainer","Trigger","TermsSelectionDropdown_templateObject","TermsSelectionDropdown_templateObject1","TermsSelectionDropdown_templateObject2","TermsSelectionDropdown_templateObject3","TermsSelectionDropdown_templateObject4","TermsSelectionDropdown_templateObject6","TermsSelectionDropdown_templateObject7","TermsSelectionDropdown_templateObject8","TermsSelectionDropdown_templateObject9","TermsSelectionDropdown_templateObject11","TermsSelectionDropdown_templateObject12","TermsSelectionDropdown_templateObject13","TermsAssistantRightSidebar","RightSidebar_templateObject","RightSidebar_templateObject1","RightSidebar_templateObject2","RightSidebar_templateObject3","RightSidebar_templateObject4","RightSidebar_templateObject5","SingleCompetitor","contentScore","TopRankingCompetitors","topRankingCompetitorActiveKw","competitorsData","setTopRankingCompetitorsActiveKw","openCompetingFocusTermsDrawer","onSelect","dropdownClassName","DrawersTriggers","changeView","loadingTaSuggestions","setLoadingTaSuggestions","handleTriggerAssistant","finalPrepArr","buttonsConf","faListTree","hoverColor","openCompetitorsHeadingsDrawer","faMagicWandSparkles","tooltipContent","faWrench","faChartSimple","updatedButtonConf","SingleItem","DrawersTriggers_templateObject","DrawersTriggers_templateObject1","Analytics","ContentContainer","Analytics_templateObject","Analytics_templateObject1","KeywordSelector","isSubscriber","isCompetitorsTable","setFilteredCompetitorsData","setActiveKw","setCompetitors","activeKw","handleOnSelectChange","KeywordDropdownWrapper","KeywordSelector_templateObject","CompetitorsTable","filteredCompetitorsData","schemaTypesList","allSchemasCount","nullCount","selectedSchema","setSelectedSchema","setShowCompetitorTermsTableDetail","isSmallScreen","setIsSmallScreen","allowScroll","setAllowScroll","onWindowResize","innerWidth","average","reFormatSchemaType","schema","selectedSchemaValue","filteredItems","graph","graphItem","fixed","ellipsis","PageUrlWrapper","lineHeight","dr","parseFloat","toFixed","DRWrapper","schemaLength","schemaItemsList","BlueTextWithUnderline","ULStyled","LinksContainer","paddingRight","LinkWrapper","StyledAnchor","h1Count","h2Count","h3Count","TypesSchemaFilterWrapper","SchemaFilterTitle","SchemaFilterWrapper","SchemaFilter","scroll","y","_dir","CompetitorsTable_templateObject","CompetitorsTable_templateObject1","CompetitorsTable_templateObject2","CompetitorsTable_templateObject3","CompetitorsTable_templateObject4","CompetitorsTable_templateObject5","CompetitorsTable_templateObject6","CompetitorsTable_templateObject7","CompetitorsTable_templateObject8","CompetitorsTable_templateObject9","CompetitorsTable_templateObject10","CompetitorsTable_templateObject11","CompetitorsTable_templateObject12","CompetitorsDetail","competitorSchemaObject","competitorTitle","competitorUrl","competitorSchemaGraphIdx","formats","renderSchemaData","dataObj","LargeLine","mainLebel","mainValue","SchemaLabel","SchemaValue","urlValidationRegex2","isValid","utc","BackArrowContainer","SchemaContainer","SchemaHeader","SchemaPageTitle","context","CompetitorsDetail_templateObject","CompetitorsDetail_templateObject1","CompetitorsDetail_templateObject2","CompetitorsDetail_templateObject3","CompetitorsDetail_templateObject4","CompetitorsDetail_templateObject5","CompetitorsDetail_templateObject6","CompetitorsDetail_templateObject7","CompetitorsDrawerTab","setSchemaTypesList","setAllSchemasCount","setNullCount","showCompetitorTermsTableDetail","squareTooltip","IsRanking","IsNotRanking","focusTermsTooltip","CompetingFocusTermsDrawer","isCompetingFocusTermsDrawerOpen","closeCompetingFocusTermsDrawer","isOpeningKwSuggestionsFromContentResearch","setIsOpeningKwSuggestionFromContentResearch","selectedKeyword","setSelectedKeyword","selectedCompTabKw","setSelectedCompTabKw","isHovered","setIsHovered","maxElemHeight","setMaxElemHeight","allRef","keywordSuggestionsRef","elementsArray","elementsWidthArr","exportSingleNode","node","today","date","getFullYear","getMonth","getDate","html2canvas","then","canvas","toDataURL","onTabChange","schemaCountsHandler","competitorsTypes","countOccurrences","inputArray","counts","prototype","hasOwnProperty","call","afterVisibleChange","focusTermsGridData","TitleStyled","tabPosition","overflowX","Subtitle","data-html2canvas-ignore","SectionHeader","sites","Rank","Site","rotate","wrap","contentScores","focusTermUsageBySites","Square","keywordSuggestionsGridData","keywordSuggestionsUsageBySites","CompetingFocusTermsDrawer_templateObject","CompetingFocusTermsDrawer_templateObject1","CompetingFocusTermsDrawer_templateObject2","CompetingFocusTermsDrawer_templateObject3","CompetingFocusTermsDrawer_templateObject4","CompetingFocusTermsDrawer_templateObject5","CompetingFocusTermsDrawer_templateObject6","CompetingFocusTermsDrawer_templateObject7","CompetingFocusTermsDrawer_templateObject9","CompetingFocusTermsDrawer_templateObject10","CompetingFocusTermsDrawer_templateObject11","NewContentIdeaForm","drawerVisible","usaCode","selectedCountry","setSelectedCountry","onFormSubmit","topic","loadContentIdeasData","SCA_PAGE_CONTENT_IDEAS_GENERATE","SingleContentIdea","setConvertedText","newLineIndex","textWithoutLeadingSpace","firstTitle","breakFileName","fileName","faDownload","SCA_PAGE_CONTENT_IDEA_DOWNLOAD","SCA_PAGE_CONTENT_IDEA_COPY","CopyOutlined","ContentIdeas","csvModel","wordsArray","CsvDownloader","datas","filename","displayName","ExportOutlined","ContentIdeasDrawer","contentIdeas","setDrawerVisible","clearContentIdeas","setIsOpenContentGeneratorDrawer","SimilarKeyword","isIncluded","OverviewPage","addToLoadingArray","loadingArray","onRemoveKeywordFinish","ContentResearchDrawer","keywordDetail","isContentResearchDrawerOpen","closeContentResearchDrawer","getKeywordDetail","removeFromLoadingArray","countryName","similarKeywordsPageNumber","setSimilarKeywordsPageNumber","similarKeywordsPageSize","similarKeywordsData","setSimilarKeywordsData","similarKeywordsList","setSimilarKeywordsList","topCompetitorsData","setTopCompetitorsData","rankingPotentialData","setRankingPotentialData","handleFilterRenderData","dataArray","pageNumber","targetKwArray","similarKeywordsFormattedData","isKwIncluded","similarKeywords","onPaginationChange","relevanceData","competition","typicalTop10","averageContentScores","averageDr","averageWordCount","readAbility","averageReadability","SimilarKeywordConfig","BarChartColumn","numeral","PageTitle","skeletonMarginRight","totalSearchResults","rankingPotential","xAxis","svTrend","interval","formatter","rich","month","year","yAxis","volume","areaStyle","symbolSize","symbol","MiddleContainer","readability","Pagination","showSizeChanger","defaultPageSize","showQuickJumper","termsGrid","ContentResearchDrawer_templateObject","ContentResearchDrawer_templateObject1","ContentResearchDrawer_templateObject2","ContentResearchDrawer_templateObject3","ContentResearchDrawer_templateObject4","ContentResearchDrawer_templateObject5","ContentResearchDrawer_templateObject6","ContentResearchDrawer_templateObject7","ContentResearchDrawer_templateObject8","ContentResearchDrawer_templateObject9","ContentResearchDrawer_templateObject10","KeywordsDrawer","isOpenKeywordsDrawer","isDrawerFromCa","KeywordDetailContent","TechnicalsViewSwitcher","TechnicalsSwitcherContainer","ViewSwitcher_templateObject","PageSpeedIndex","refetchArticle","refetchPage","SpeedIndexContainer","psiMetrics","avgSpeedIndex","SpeedIndexDot","LastFetchContainer","updatedAt","faRotateRight","isInitialPageLoad","isTechnicalsDataLoading","PageSpeedIndex_templateObject","PageSpeedIndex_templateObject1","PageSpeedIndex_templateObject2","PageSpeedIndex_templateObject3","TechnicalScore","technicalsMsgColorMap","technicalScore","TitleAndWordCount","TechnicalScore_templateObject","TechnicalScore_templateObject1","TechnicalScore_templateObject2","TechnicalScore_templateObject3","auditLoader","setAuditLoader","onPageAuditPopoverVisible","setOnPageAuditPopoverVisible","contentAuditStore","loadContentAudit","setNewRecordId","antIconSecond","onRunPageAudit","countryCodeToUse","getId","shouldUseHeadlessBrowser","onPageAuditDetails","TopSeactionContainer","PopoverWrapper","getUniqueKeywords","existingValues","getFieldsValue","AntdCheckbox","PopoverKwContainer","PopoverBtnContainer","RunPageAuditBtn","faFileChartColumn","BtnText","Technicals_HeaderSection_templateObject","Technicals_HeaderSection_templateObject1","Technicals_HeaderSection_templateObject3","Technicals_HeaderSection_templateObject4","Technicals_HeaderSection_templateObject5","Technicals_HeaderSection_templateObject6","HeaderSection_templateObject8","AnalyticsCollapseCard","descriptionColor","colTitle1","colTitle2","sortKey","colTitle3","colTitle4","dataRenderer","isCollapse","defaultActive","plan","warningBar","setPageNumber","checkData","setCheckData","isFilterOpened","setIsFilterOpened","sortOrder","setSortOrder","formatData","setFormatData","sortData","sortBy","bordered","expandIcon","CaretUpFilled","faCaretUp","defaultCurrent","faFilter","ChevronUp","disabledTooltip","SchemaModal","setShowModal","dataList","setExpanded","dataForDisplay","ModalContentWrapper","MainContainer","potentialAction","z","wordBreak","queryInput","SchemaModal_templateObject","SchemaModal_templateObject1","SchemaModal_templateObject2","SchemaModal_templateObject3","SchemaModal_templateObject4","SchemaModal_templateObject5","SchemaModal_templateObject6","TechnicalsData","showMissingAltText","setShowMissingAltText","isActiveInternalBrokenLinks","setIsActiveInternalBrokenLinks","isActiveExternalBrokenLinks","setIsActiveExternalBrokenLinks","showSchemaModal","setShowSchemaModal","internalLinksFilters","statusCode","SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN","uiFormatImageSize","sizeArray","brokenHeaders","translateWord","getMissingAltTotal","imagesFilter","SCA_PAGE_IMAGES_SHOW_MISSING_ALT","externalLinksFilters","SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN","displayStatusCode","displayFollowCode","followCode","jsonLd","metaSummary","meta","field","statusColor","suggestionColor","getStatusColor","Image","getMissingAltText","WarningMiniBar","Video","video","visitable","ExternalLink","generateInternalLinksDesc","msgArr","labelColor","getInternalBrokenLinksCount","getInternalRedirectsCount","anchor","generateExternallLinksDesc","getExternalBrokenCount","getExternalRedirectsCount","List","ButtonLink","linkgraphDomain","Technicals","DataContainer","Technicals_templateObject","Technicals_templateObject1","compListCollapsed","HeadingsTree","activeCompetitor","setShowBulkAddContentBtn","showBulkAddContentBtn","setCheckedCount","checkedCount","setCheckedIndexData","checkedIndexData","setCopiedHeadings","addedHeadings","setAddedHeadings","copiedHeading","setCopiedHeading","tag","setFilters","onCheckboxChecked","curFilters","checkboxClickHandler","headingContent","headingTag","handleCopyClick","updatedCopiedHeadings","textToAdd","headingType","cleanText","curAddedHeadings","updatedAddedHeading","addHeadingsHandler","FiltersWrapper","FiltersContainer","headingsHierarchy","BulkAddAction","faSquareCheck","ActionsWrapper","AddHeadings","CopyAction","CancelAction","FiltersTree","SingleHeading","itemId","HeadingTag","HeadingText","Copy","InsertText","calculateIndent","getTopMargin","calculateFontSize","generateColor","HeadingsTree_templateObject","HeadingsTree_templateObject1","HeadingsTree_templateObject2","HeadingsTree_templateObject3","HeadingsTree_templateObject4","HeadingsTree_templateObject5","HeadingsTree_templateObject6","HeadingsTree_templateObject7","HeadingsTree_templateObject8","HeadingsTree_templateObject9","HeadingsTree_templateObject10","HeadingsTree_templateObject11","HeadingsTree_templateObject12","HeadingsTree_templateObject13","CompetitorHeadingsDrawerContent","setCompListCollapsed","setCheckedHeadingsWithTags","checkedHeadingsWithTags","setActiveCompetitor","updatedCompetitors","currentArticleOutline","generateHeadingOutline","getBlocksAsArray","outline","lastIndexOf","isCurrentArticleOutline","faBars","faBarsSort","competitorsList","CompetitorsList","CurrentArticleOutline","Order","NameLogoUrl","Name","Url","Logo","NameAndUrl","Headingoutlines","DrawerContent_templateObject","DrawerContent_templateObject1","DrawerContent_templateObject2","DrawerContent_templateObject3","DrawerContent_templateObject4","DrawerContent_templateObject5","DrawerContent_templateObject6","DrawerContent_templateObject7","DrawerContent_templateObject8","DrawerContent_templateObject9","DrawerContent_templateObject10","DrawerContent_templateObject11","DrawerContent_templateObject12","DrawerContent_templateObject13","CompetitorsHeadingsDrawer","isCompetitorsHeadingsDrawerOpen","closeCompetitorsHeadingsDrawer","SidebarContent","showTechnicals","setShowTechincals","TechnicalsContainer","LoadingBannerContainer","LongLoadingBanner","isFetchingTargetKw","SidebarContent_templateObject","SidebarContent_templateObject1","SidebarContent_templateObject2","SidebarContent_templateObject3","SidebarContent_templateObject4","RightSidebarV2","onResizeCallback","isHidden","topPosition","setTopPosition","sideBarRef","sidebarUpdate","handleScroll","pageYOffset","passive","_document_querySelector","Resizable","onResize","dir","elRef","enable","topRight","bottomRight","bottomLeft","topLeft","analyzingError","ErrorView","PageEditor","rootStore","loadAiWriterHistory","refetchOneClickDraftResultForArticleCreation","isExportingPageLoader","setIsPublic","setFocusTermsClassNames","setSideBarWidth","setViewers","emailAddress","resultId","triggerFreddySurvey","FREDDY_EVENT_SCA_ARTICLE_CREATED","updateFocusTermsState","sortedFocusTerms","internalLinksClusters","variations","finalData","parts","prepareFinalTerms","regex","multiWordCountRegex","mapFocusTerms","dbRef","firebase","database","snapshot","exists","catch","console","onDisconnect","cancel","setRepollsAllowed","focusedState","moveFocusToStart","afterSelectionMove","firstKey","formattedEditorState","setIsInitialEditorStateFetched","loadProject","getAllProjects","setRefechForBulkArticleCreation","getTime","loadPages","activeProjectId","initialLoadPage","setNewPage","headerStore","setComponent","spend","quotaProps","MainLoader","module","exports"],"sourceRoot":""}
Accepted
\n Dismissed
\n {\n setShowOriginalBlockId(block.itemIndex);\n }}>\n Show original\n
: null}\n\n {showOriginalBlockId && showOriginalBlockId == block.itemIndex && block.status !== 'default' ?\n {block.status} : null}\n \n {highlightedNodeId !== block.itemIndex && block.status == 'dismissed' ? parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
\n\n \n {showOriginalBlockId && showOriginalBlockId == block.itemIndex ?\n ', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original
: null}\n \n ORIGINAL
\n {block.status !== 'default' && block.status !== 'dismissed' ?\n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
\n :\n null}\n \n\n );\n } else {\n return ', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' ')), options)}\n
\n {termsWithNoSuggestions?.map((term, idx) => {\n return
\n );\n\n\n return {`‧ ${term}`}
;\n })}\n \n We could not find a placement for\n {noPlacementsTermsCount()}\n
\n setShow(false)}>Dismiss
\n {term[0]?.title}
\n{term[0].link}
\nSuggestion {termIndex+1} of {term?.length}
\n{linkActiveTerm?.term}
\n\n
\n \n \n \n
\n {term?.length > 1 && \n \n {term?.map((suggestion, idx) => {\n return scrollTerms(e, idx)} color={suggestion.status == 'default' ? '#A3A4A4' : suggestion.status == 'dismissed' ? '#F44343' : '#1FAC47'} key={idx} isActive={highlightedNodeId == suggestion.itemIndex}/>;\n })}\n \n \n \n
}\n \n {filter?.map((term, idx) => {\n return ;\n })}\n
;\n});\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Checkbox, Dropdown, Popover, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled, {css, keyframes} from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\nimport {LinksList} from './linksList';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPlus, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport React, {useEffect, useState} from 'react';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const LinkAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsLinkActive,\n setLinksForInsertion,\n editContent,\n stagingLinkSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n updateContentLoadedAt,\n content,\n fetchLinkSuggestions,\n getstagingLinkSuggestions,\n },\n }} = useStore('');\n const {settings: {customer: {getCustomerQuota}}} = useStore('');\n const antIcon = '));\n }\n\n if (getstagingLinkSuggestions[i].isSuggestion) {\n if (getstagingLinkSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(getstagingLinkSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('
e.stopPropagation()}>\n {activeKeywordsList?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n
\n ;\n\n const addLink = async () => {\n if (inputValue?.length) {\n const allLink = content?.internalLinkSuggestionsV2?.allLinks?.map((item:any)=> item?.url);\n const links = stringToArray(inputValue, keywordNewLineReg, ',');\n const urlWithProtocols = links.map(value => value.startsWith('/') ? value.slice(1) : value);\n setAnyButtonClicked(true);\n await fetchLinkSuggestions([...allLink, ...urlWithProtocols.map((val:any)=> `${new URL(allLink[1]).origin}/${val}`)]);\n getCustomerQuota();\n setAnyButtonClicked(false);\n setVisible(false);\n setUpdated({});\n }\n setInputValue('');\n };\n\n\n const handleInputChange = (e: React.ChangeEvent\n Add more links you want to get suggestions for: \n \n \n \n \n \n
\n );\n\n\n const selectedLink = getstagingLinkSuggestions?.filter((item:any)=> item.status == 'accepted')?.length;\n\n return \n \n setVisible(false)}>Keyword: {activeKeywordsList?.filter(kw => kw.active)?.length}/{activeKeywordsList?.length} \n \n \n setVisible(true)}> \n \n
\n \n Review the suggested link placements to evaluate their fit and relevance within the context of your article.\n
\n {`To finalize and implement the changes, please click on 'Save Changes'.`}\n
\n onCancelClickHandler()}>\n {selectedLink > 0 ? 'Discard' : 'Cancel'}\n \n item.status !== 'default')}\n color='green'\n style={{width: '35%', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n Save changes\n {updatingTa ?
\n\n ')) {\n return 'p';\n }\n if (text.startsWith('
')) {\n return 'h1';\n }\n if (text.startsWith('')) {\n return 'h2';\n }\n if (text.startsWith('')) {\n return 'h3';\n }\n if (text.startsWith('')) {\n return 'h4';\n }\n if (text.startsWith('')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (linkActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (linkActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions([...prepDataArr]);\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n const parser = new DOMParser();\n const doc = parser.parseFromString(block.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n const suggestionList = [];\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n\n if (block.isSuggestion) {\n return (\n <>\n term.keyword?.replaceAll(' ', '-')+`${block?.itemIndex}`)), block.status)}>\n {showOriginalBlockId != null && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n ;\n }\n })}\n\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsLinkActive(false);\n clearAllTaData();\n setLinksForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n \n {blocksRenderer(getstagingLinkSuggestions)}\n ;\n});\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 65%;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:10%;\n padding-right:40px;\n color: rgba(0, 0, 0, 0.85);\n border-right: 1px solid lightgray;\n .linkInsertionChange {\n text-decoration: underline;\n }\n p a{\n color: rgba(0, 0, 0, 0.85);\n }\n .default p span a{\n color: #1890ff;\n }\n .accepted{\n span a{\n text-decoration: underline;\n color: #1FAC47 !important;\n text-decoration-color: #1FAC47 !important;\n\n }\n }\n .dismissed{\n span a{\n text-decoration: underline;\n color: #F44343 !important;\n text-decoration-color: #F44343 !important;\n }\n }\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n img {\n width: 100%;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styles from './content-editor.module.scss';\nimport {EditorSection} from './EditorSection/EditorSection';\n// import {FocusTermsPopups} from './FocusTermsPopups';\nimport {TopSection} from './TopSection/TopSection';\nimport styled from 'styled-components';\nimport {TextSuggestions} from '../RightSidebar/v2-sidebar/Analytics/TermsAssistant/TextSuggestions';\nimport {TextSuggestionsLinks} from '../RightSidebar/v2-sidebar/Analytics/LinkAssistant/TextSuggestionsLinks';\n\n\ninterface Props {\n // allRef: any;\n newPage: any;\n htmlToDraft: any;\n}\n\nexport const LeftSide = observer(({newPage, htmlToDraft}: Props) => {\n const {contentOptimizer} = useStore('');\n const {currentPage} = contentOptimizer;\n const {\n sideBarWidth,\n isSideBarHidden,\n isTaActive,\n isLinkActive,\n } = currentPage;\n\n return \n \n ;\n});\n\n\nconst LeftSideContainer = styled.div<{isNewPage?: boolean; isSideBarHidden?: boolean; sideBarWidth?: string; isLinkSuggestionActive?: boolean}>`\n overflow: hidden;\n text-align: -webkit-center; \n transition: all .3s ease;\n width: 100%;\n max-width: ${p => p.isLinkSuggestionActive ? '100%' : !p.isNewPage ? !p.isSideBarHidden ? `calc(100% - ${p.sideBarWidth} + 15px)` : '100%' : '100%'};\n`;\n","import {WarningOutlined} from '@ant-design/icons';\nimport React from 'react';\nimport styles from './index.module.scss';\n\nexport const Error: React.FC = () => {\n return (\n \n An error has occurred, please try again later.
\n \n );\n};\n","import {FocusTermClusteredType} from '@/store/content-optimizer/currentPage';\nimport {Table} from '@/components/common-components/components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {filterDataInMemory} from '@/utils/filter-data';\nimport styles from './style.module.scss';\nimport {formatLargeNumber} from '@/utils/number';\nimport {ColumnType} from 'antd/es/table';\n\ninterface Props {\n cluster: FocusTermClusteredType;\n isClusterRemoving: boolean;\n}\n\nexport const SingleCluster = observer(({\n cluster,\n isClusterRemoving,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n enum SORT_DIRECTION {\n ascend = 'ascend',\n descend = 'descend'\n }\n\n const [tableData, setTableData] = useState([]);\n const [sortField, setSortField] = useState('requiredCountMin');\n const [sortDirection, setSortDirecion] = useState(SORT_DIRECTION.descend);\n\n\n const removeClusterHandler = (term: string) => {\n if (currentPage.isBulkRemovingCluster) return;\n currentPage.bulkRemoveTerms([term], 'term', cluster.title);\n };\n\n const setTerms = () => {\n const {dataFiltered} = filterDataInMemory(cluster?.focusTerms, '', [], [], 1, cluster?.focusTerms.length, sortField, sortDirection);\n setTableData(dataFiltered);\n };\n\n const handleTableChange = async (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortFieldName} = column || {};\n\n setSortField(sortFieldName);\n setSortDirecion(order);\n if (order) {\n const {dataFiltered} = filterDataInMemory(tableData, '', [], [], 1, tableData.length, sortFieldName, order);\n setTableData(dataFiltered);\n } else {\n setTableData(cluster?.focusTerms);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [cluster]);\n\n type ExtendedColumnsType = ColumnType & {defaultSortOrder?: 'ascend' | 'descend'; sortFieldName?: string};\n\n const tableColumns = (removingTerms: boolean): ExtendedColumnsType[] => {\n return [\n {\n title: 'TOPICAL TERM',\n dataIndex: 'name',\n key: 'name',\n align: 'left' as 'left',\n width: 250,\n render: (_, record) => {\n return \n {record.name}\n {record?.foundIn && record.foundIn.map((item, idx) => {\n return {item} ;\n })}\n {record?.isBranded && {'branded'} }\n ;\n },\n },\n {\n title: 'MSV',\n dataIndex: 'sv',\n key: 'sv',\n align: 'right' as 'right',\n sortFieldName: 'sv',\n width: 60,\n sorter: true,\n render: (_, record) => {\n return {formatLargeNumber(record.sv)};\n },\n },\n {\n title: 'USAGE',\n dataIndex: 'requiredCountMin',\n key: 'requiredCountMin',\n defaultSortOrder: 'descend',\n align: 'right' as 'right',\n width: 60,\n sortFieldName: 'requiredCountMin',\n sorter: true,\n render: (_, record) => {\n return {`${record.usedCount}/${record.idealCountMax}`};\n },\n },\n {\n title: 'REMOVE',\n dataIndex: 'name',\n key: 'name',\n align: 'right' as 'right',\n width: 80,\n render: (_, record) => {\n return removeClusterHandler(record.name)}>\n ;\n },\n },\n\n ];\n };\n\n return \n >;\n}\n\nexport const BulkRemoveTermsModal = observer(({\n isModalOpen,\n setIsModalOpen,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n const [clusteredTerms, setClusteredTerms] = useState([]);\n const [clusterToRemove, setClusterToRemove] = useState('');\n\n const setTerms = () => {\n const clusterTerms = toJS(currentPage?.analytics?.clusters);\n const tempArr = [];\n\n setClusteredTerms(toJS(clusterTerms));\n\n if (currentPage.focusTermsSorter.key) {\n clusterTerms?.forEach((item, id) => {\n let tempCluster = [];\n\n tempCluster = item?.focusTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n\n tempArr.push({\n ...clusterTerms[id],\n focusTerms: tempCluster,\n });\n });\n\n\n setClusteredTerms(tempArr);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n const removeClusterHandler = async (e, clusterTitle: string) => {\n e.preventDefault();\n e.stopPropagation();\n const clusterToRemove = clusteredTerms?.find(cluster => cluster.title === clusterTitle);\n const termsArr = clusterToRemove?.focusTerms?.map(term => term.name);\n setClusterToRemove(clusterTitle);\n try {\n await currentPage.bulkRemoveTerms(termsArr, 'cluster', clusterTitle);\n } catch (e) {\n setClusterToRemove('');\n } finally {\n setClusterToRemove('');\n }\n };\n\n return Bulk Remove Topical Terms \n \n {clusteredTerms?.filter(cluster => cluster.focusTerms?.length > 0)?.map((cluster, idx) => {\n return \n {cluster.title} \n {`(Terms: ${cluster.focusTerms?.length}, MSV: ${formatLargeNumber(cluster.clusterSv)})`} \n }\n extra={ removeClusterHandler(e, cluster.title)}>\n }>\n \n ;\n })}\n \n setIsModalOpen(false)}>Close \n \n \n\n\n ;\n});\n\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 5px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\n\nconst ClusterHeader = styled.div`\n display: flex;\n align-items: baseline;\n`;\nconst ClusterName = styled.div`\n font-weight: 500;\n color: #121212;\n`;\nconst ClusterDesc = styled.div`\n font-size: 12px;\n color: #4E5156;\n margin-left: 5px;\n`;\n\nconst CollapseStyled = styled(Collapse)`\n // background: #fff;\n border: none;\n max-height: calc(75vh - 185px);\n overflow-y: auto;\n\n .ant-collapse-content {\n border-top: 0px solid transparent;\n background-color: #fff;\n }\n\n .ant-collapse-item {\n border-radius: 10px !important;\n margin-bottom: 10px;\n border: 1px solid #E8E8E8;\n background-color: #fff;\n }\n\n .ant-collapse-content-box {\n padding-top: 0px;\n }\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faArrowUpArrowDown, faSliders} from '@fortawesome/pro-regular-svg-icons';\nimport {faFileArrowDown, faFileLines, faFileSpreadsheet} from '@fortawesome/pro-light-svg-icons';\nimport {faPlus, faTrash} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Dropdown, Radio, Tooltip, Spin, Divider, Menu} from 'antd';\nimport {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport {Modal} from '@/components/common-components';\nimport {faGoogle} from '@fortawesome/free-brands-svg-icons';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport {BulkRemoveTermsModal} from '../BulkRemoveTermsModal/BulkRemoveTermsModal';\nimport {toJS} from 'mobx';\nimport {useStore} from '@/store/root-store';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface TopicalProps {\n onViewChange?: Dispatch>;\n onChangeIncludeBranded?: Dispatch>;\n onTermsFilter?: Dispatch>;\n includeBranded: boolean;\n currentView?: 'clusters' | 'completion';\n store: CurrentPageStore;\n onSortTerms?: () => void;\n}\n\n\nexport const TermsDropdownController = observer(({onViewChange, currentView, store, onChangeIncludeBranded, includeBranded, onTermsFilter, onSortTerms}: TopicalProps) => {\n const {Group} = Radio;\n const antIcon = \n e.stopPropagation()}>\n onViewChange(e.target.value)} style={{display: 'flex', flexDirection: 'column'}}>\n Editor settings: \n currentPage?.setHighlights(e.target.checked)}>Enable Terms Highlighting in the Editor \n Terms recommendations: \n onCheckboxClicked(e.target.checked)}>Include Branded Terms \n\n \n {isNotPublic && setShowBulkRemoveTermsModal(true)}> }\n \n ;\n\n return \n setShowExportModal(false)}>\n Export Content Brief \n Export a brief with the SEO and Content data for this article (Meta Data, Word Count, Focus Terms, questions, Link Suggestions, etc.) \n \n setShowExportModal(false)}>Close \n \n window.open(getXlsExportLink(), '_self')}>\n \n downloadFileToTxt()}>\n \n exportToGoogleDocs()} disabled={exportToDocsLoading}>\n {exportToDocsLoading ? \n \n \n \n \n \n {Object.keys(termsFiltersSetup).map((item, idx) => {\n return \n termsFilterHandler(e.target.checked, item)}>\n {getTermsCount(termsFiltersSetup[item].type)}\n \n ;\n })}\n \n \n \n \n {sorters.map((item, index) => (\n handleOnSortChange(item)} key={index}>{item.label} \n ))}\n \n }>\n \n Sort \n \n \n \n\n {store?.isRemovingFocusTerms && \n currentPage.setShowAddFocusTermModal(true)}>\n \n \n \n\n {isNotPublic && setShowExportModal(true)}>\n }\n\n \n \n \n \n \n \n \n \n ;\n});\n\n// TOPICAL TERMS STYLED COMPONENTES\nconst GearIcon = styled.a`\n height: 14px;\n cursor: pointer;\n margin-top: auto;\n margin-bottom: auto;\n display: block;\n`;\nconst GroupTermsContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n`;\n\nconst TermsContainer = styled.div`\n display: flex;\n flex-direction: column;\n background-color: transparent;\n padding: 10px 10px;\n background-color: #2D2F34;\n border-radius: 5px 5px 0 0;\n`;\n\nconst ExportBtn = styled(Button)`\n background: transparent;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: auto;\n margin-right: 0px;\n padding: 7px 10px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst AdjustBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n padding-bottom: 5px;\n cursor: default;\n`;\n\n\nconst TermsViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n padding: 12px 20px;\n border-radius: 17px;\n margin-top: 10px;\n width: 232px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n// margin-left: 3px !important;\n display: flex;\n align-items: flex-start;\n font-weight: 500 !important;\n margin-right: 8px;\n\n .ant-checkbox-inner {\n width: 14px;\n height: 14px;\n padding: 7px;\n border-radius: 4px !important;\n ::after {\n top: 47% !important;\n left: 18.5% !important;\n }\n }\n\n .ant-checkbox {\n padding-right: 0px !important;\n padding-left: 0px !important;\n }\n\n span {\n padding-right: 1px;\n padding-left: 1px;\n font-size: 13px;\n }\n`;\n\nconst PTag = styled.p`\nmargin-left: 10px;\nmargin-bottom: 0px !important;\n`;\n\nconst CheckboxStyledHighlights = styled(CheckboxStyled)`\nmargin-bottom: 4px;\n`;\n\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n margin-bottom:5px;\n`;\n\n\nconst ExportModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n\nconst ExportModalDesc = styled.div`\n color: #4E5156;\n`;\n\nconst ExportModalButtonsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst BulkRemoveTermsBtn = styled.div`\n cursor: pointer;\n margin-top: 6px;\n font-weight: 500;\n`;\nconst TermsFilterContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 103%;\n border-radius: 0px 4px 4px 0px;\n margin-left: -10px;\n padding: 0px 9px 10px 15px;\n`;\n\nconst AddButton = styled.div`\n margin-left: 6px;\n cursor: pointer;\n`;\n\nconst Sort = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n`;\n\nconst SortTxt = styled.span`\n color: var(--Text-gray-light, var(--Gray-light, #E8E8E8));\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {formatLargeNumber} from '@/utils/number';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip, Input as AntdInput} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react-lite';\nimport {ChangeEvent, useState} from 'react';\nimport styled from 'styled-components';\nimport {faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\n\ninterface Props {\n store: CurrentPageStore;\n onFilter: (query: string[]) => void;\n}\nexport const TermsDataController = observer(({\n store,\n onFilter,\n}: Props) => {\n const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n\n const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n return \n \n \n \n {store?.isAnalyzing ? : \n {toJS(store.analytics?.clusters)?.map((cluster, id) => {\n return \n \n Terms in cluster: \n {cluster.focusTerms?.length} \n \n \n Monthly Search Volume: \n {formatLargeNumber(cluster.clusterSv)} \n \n }>\n item.trim() === cluster.title).length > 0}\n onClick={() => handleOnClusterClick(cluster.title)}>{`#${cluster.title} - ${cluster.focusTerms?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n \n ;\n});\n\nconst ClusterTooltipSingleRow = styled.div`\n display: flex;\n justify-content: space-between\n`;\nconst ClusterTooltipLabel = styled.div`\n font-size: 12px;\n font-weight: 400;\n color: #E8E8E8;\n`;\n\nconst ClusterTooltipValue = styled.div`\n font-size: 12px;\n font-weight: 500;\n color: #FFFFFF;\n`;\n\nconst Wrapper = styled.div`\n margin-bottom: 15px;\n border-radius: 8px;\n background: #282B2F;\n box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.02);\n padding: 10px;\n`;\nconst SearchAndSort = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\nconst ClustersWrapper = styled.div`\n display: flex;\n`;\nconst ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n display: flex;\n flex-wrap: wrap;\n\n height: ${p => p.expandedClusters ? 'auto' : '25px'};\n overflow: hidden;\n`;\n\nconst SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n border-radius: 60px;\n padding: 3px 8px;\n width: auto;\n height: 20px;\n font-size: 11px;\n margin-right: 6px;\n margin-bottom: 6px;\n cursor: pointer;\n\n &:hover {\n background-color: #4B4D51 !important;\n }\n`;\n\nconst InputStyled = styled(AntdInput)`\n height: 32px;\n margin-bottom: 5px;\n background: #282B2F;\n border-color: transparent !important;\n .ant-input {\n margin-left: 7px;\n background: #282B2F;\n color: white !important;\n color: var(--Text-gray, var(--Gray, #A3A4A4));\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n }\n .ant-input-affix-wrapper {\n border: none !important;\n }\n &:hover{\n box-shadow: none !important;\n border-color: transparent !important;\n }\n &:focus{\n box-shadow: none !important;\n }\n`;\n","import {useState} from 'react';\nimport {faArrowDown, faCheck, faTrash} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport styles from '../../style.module.scss';\nimport {\n costPerClickFormatter,\n searchVolumeFormatter,\n isScaPublicPage,\n} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/LeftSide/EditorSection/content-editor/utils';\nimport {\n Divider,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport {NextImg} from '@/utils/nextImg';\n\nimport {getTwoGreenPercentageColor} from '@/utils/colors';\nimport classNames from 'classnames';\nimport {useTranslation} from 'next-i18next';\nimport {CurrentPageStore, FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {getDomain, getSiteName} from '@/utils/url';\nimport {isNil} from 'lodash';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport styled from 'styled-components';\nimport {faWikipediaW} from '@fortawesome/free-brands-svg-icons';\n\ninterface Props {\n focusTerm: FocusTermModel;\n i: number;\n store: CurrentPageStore;\n}\n\nexport const SingleTerm = observer(({focusTerm, i, store}: Props) => {\n const {t} = useTranslation('landing-page-optimizer');\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemoving, setIsRemoving] = useState(false);\n\n const antIcon = \n Topical term
\n {focusTerm.name}
\n \n {focusTerm.sv !== undefined && focusTerm.sv !== null && {`SV: ${searchVolumeFormatter(focusTerm.sv)}`}}\n {focusTerm.cpc !== undefined && focusTerm.cpc !== null && {`CPC: ${costPerClickFormatter(focusTerm.cpc)}`}}\n \n {focusTerm?.foundIn && focusTerm?.foundIn.length > 0 ?\n \n Used in \n {focusTerm.foundIn.map((item, i)=> {\n if (focusTerm.foundIn.length === 1) {\n return {`<${item}>`};\n } else {\n if (i === focusTerm.foundIn.length - 1) {\n return <>and {`<${item}>`};\n } else if (i === focusTerm.foundIn.length - 2) {\n return {`<${item}>`} ;\n } else {\n return {`<${item}>`}, ;\n }\n }\n })}\n :\n null}\n {'Current / Recommended # of uses'}
\n \n {store?.content?.targetKewyordsOnlyArr?.includes(focusTerm.name) ?
Target keywords do not have any usage limitations. : null}\n {focusTerm.usedCount}\n of {focusTerm.requiredCountMin}\n {`(Max: ${focusTerm.requiredCountMax || 0})`}\n \n {'Competitors using this term'}
\n \n {focusTerm?.competitors?.results?.map((competitor, index) => (\n \n {competitor.title ?? getSiteName(competitor.hostname)}
\n {competitor.url}\n \n {competitor?.snippets?.map((snippet, idx) => {\n return \n \n {/* {snippet.length > 130 ? snippet.substring(0, 130) + '...' : snippet} */}\n
\n {idx !== (competitor?.snippets?.length - 1) && }>\n \n \n // {`${index + 1}. `}{competitor.hostname}\n ))}\n\n \n {(!isNil(focusTerm?.normalizedScore) || focusTerm?.source) ? \n {focusTerm?.source ?\n {`Keyword source: `}{focusTerm?.source?.join(', ')}
: null}\n {!isNil(focusTerm?.normalizedScore) ? <>\n {`Importance score: `}{focusTerm.normalizedScore}
\n : null\n }\n {isAnyFocusTermLink() ?\n \n Entity References \n \n {focusTerm?.crunchbaseLink ?\n window.open(focusTerm?.crunchbaseLink)} style={{display: 'flex'}}>\n \n Crunchbase\n : ''}\n {focusTerm?.knowledgeGraphLink ?\n window.open(focusTerm?.knowledgeGraphLink)} style={{display: 'flex'}}>\n \n Google\n : ''}\n {focusTerm?.wikipediaLink ?\n window.open(focusTerm?.wikipediaLink)} style={{display: 'flex'}}>\n : ''}\n {focusTerm?.wikidataLink ?\n window.open(focusTerm?.wikidataLink)} style={{display: 'flex'}}>\n \n Wikidata\n : ''}\n \n : ''}\n \n \n }\n >\n\n \n \n {focusTerm.name} \n {focusTerm?.isBranded && {'branded'} }\n {focusTerm?.foundIn && focusTerm.foundIn.map((item, idx) => {\n return {item} ;\n })}\n \n \n {termContainerSetup[focusTerm.status].icon}\n {focusTerm.usedCount} / {focusTerm.requiredCountMin}\n\n \n {\n navigator.clipboard.writeText(focusTerm.name);\n setCopySuccess(true);\n }}>\n \n \n \n\n {!isScaPublicPage() ? {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n {(isRemoving && store.isRemovingFocusTerms) ? \n \n );\n});\n\nconst TermContainer = styled.div`\n margin-right: 5px;\n margin-left: 5px;\n margin-bottom: 9px;\n display: flex;\n max-width: 300px;\n cursor: default;\n\n\n .termControllsContainer {\n position: absolute;\n right: -100%;\n width: 100%;\n height: 100%;\n transition: all .3s ease;\n background: #2D2F34;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n }\n\n &:hover {\n .termControllsContainer {\n right: 0;\n }\n }\n`;\nconst Left = styled.div<{background: string; hoverBackground: string}>`\n padding: 3px 8px;\n background: ${p => p.background};\n width: 100%;\n border-radius: 36px 0 0 36px;\n display: flex;\n flex-wrap: wrap;\n max-width: 260px;\n align-items: center;\n transition: background .2s ease;\n\n &:hover {\n background: ${p => p.hoverBackground};\n }\n`;\nconst TermName = styled.div`\n font-size: 13px;\n color: #fff;\n line-height: 13px;\n`;\nconst BrandedLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n color: #4ebbab;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\nconst FoundInLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\n\nconst Right = styled.div<{border: string}>`\n padding: 5px 7px;\n border: ${p => `2px solid ${p.border}`};\n border-radius: 0 36px 36px 0;\n font-size: 13px;\n display: flex;\n align-items: center;\n line-height: 13px;\n position: relative;\n overflow: hidden;\n min-width: fit-content;\n cursor: pointer;\n \n\n\n`;\n\nconst CopyIcon = styled.div`\n`;\nconst ReferencesTitle = styled.p``;\nconst ReferencesWrapper = styled.div``;\nconst LinksWrapper = styled.div`\ndisplay: flex;\nflex-wrap: wrap;\ngap: 8px;\n`;\nconst SingleLink = styled.div`\ndisplay: flex;\npadding: 3px 6px;\njustify-content: center;\nalign-items: center;\ngap: 4px;\nborder-radius: 6px;\nborder: 1px solid #E8E8E8;\nbackground:#FFF;\ncursor: pointer;\nspan {\n color: #121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n}\n`;\nconst LowerSection = styled.div`\npadding: 10px 21px;\nbackground: #f9f9fb;\n`;\n","import {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {TermsDropdownController} from '../DropdownController/TermsDropdownController';\nimport styled from 'styled-components';\nimport {toJS} from 'mobx';\nimport {TermsDataController} from '../DropdownController/TermsDataController';\nimport {SingleTerm} from './SingleTerm';\nimport {FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {Tooltip} from 'antd';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\n\nexport const TermsDropdowns = observer(() => {\n // const [defaultActiveCluster, setDefaultActiveCluster] = useState(['1']);\n const [includedBranded, setIncludeBranded] = useState(true);\n const [query, setQuery] = useState([]);\n const [termsToShow, setTermsToShow] = useState(['include-more', 'included', 'include-less']);\n const [isCopied, setIsCopied] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const [standardTerms, setStandardTerms] = useState([]);\n\n const setTerms = (queryParam?: string[]) => {\n if (queryParam?.length) {\n setQuery(queryParam);\n } else {\n setQuery([]);\n }\n\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (queryParam?.length) {\n for (let i = 0; i < queryParam.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(queryParam[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n if (currentPage.focusTermsSorter.key === 'leastCount') {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (a.usedCount < b.usedCount) return -1;\n });\n } else {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n }\n\n\n filteredTerms = filteredTerms?.filter(term => termsToShow.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n const filterTermsHandler = (termsToShowParam: string[]) => {\n setTermsToShow(termsToShowParam);\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (query?.length) {\n for (let i = 0; i < query.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(query[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n\n filteredTerms = filteredTerms?.filter(term => termsToShowParam.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n return <>\n \n \n \n \n {standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n }).map((term, idx) => {\n return ;\n })}\n \n {\n if (!visible) {\n setTimeout(() => setIsCopied(false), 300);\n }\n }}>\n {\n if (standardTerms?.length) {\n navigator.clipboard.writeText(standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n })?.map(i => i?.name).join(', '));\n }\n setIsCopied(true);\n }}\n > \n ;\n});\n\nconst TopicalTermsContainer = styled.div`\nbackground-color: #2D2F34;\n \n`;\n\nconst TermsContainer = styled.div<{focusMode?: boolean}>`\n padding-right: 15px;\n padding-bottom: 16px;\n border-radius: 0 0 8px 8px;\n display: flex;\n flex-wrap: wrap;\n max-height: ${p => !p.focusMode ? '476px' : 'calc(100vh - 440px)'};\n overflow-y: auto;\n \n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst CopyButton = styled.button`\n background-color: transparent;\n border: 0px;\n cursor: pointer;\n margin: 6px;\n color: rgb(52, 174, 243);\n`;\n\n","import {observer} from 'mobx-react-lite';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {TermsDropdowns} from './TermsDropdowns';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const FocusTermsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n return currentPage?.analytics?.includedTerms?.length || currentPage?.analytics?.includeMoreTerms?.length || currentPage?.analytics?.includeLessTerms?.length ? (\n \n {/* ;\n});\n\nconst EmptyDataBox = styled.div`\n background: #2d2f34;\n border-radius: 5px;\n box-shadow: 0 4px 21px rgba(0, 0, 0, 0.02);\n display: flex;\n padding: 12px 15px;\n\n .emptyImg {\n display: flex;\n justify-content: center;\n }\n\n .emptyDataTitle {\n color: #a3a4a4;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n margin-left: 17px;\n }\n`;\n\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button} from '@/components/common-components/v2/Button';\n\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faDownLeftAndUpRightToCenter, faFileDownload, faUpRightAndDownLeftFromCenter} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react';\nimport {faCheck, faSyncAlt} from '@fortawesome/pro-regular-svg-icons';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface Props {\n currentView?: 'links' | 'terms';\n store: CurrentPageStore;\n}\n\n\nexport const LinkSuggestionsDropdownController = observer(({currentView, store}: Props) => {\n const [isSynced, setIsSynced] = useState(false);\n const [isSyncing, setIsSyncing] = useState(false);\n const isNotPublic = !isScaPublicPage();\n\n const onLinksSync = async () => {\n try {\n setIsSyncing(true);\n // await store?.getInternalLinkSuggestions(store?.content?.uuid, true);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setIsSynced(true);\n setTimeout(() => {\n setIsSynced(false);\n }, 3000);\n } catch (e) {\n setIsSyncing(false);\n } finally {\n setIsSyncing(false);\n }\n };\n\n const getXlsExportLink = () => {\n const token = getTokenFromCookies();\n if (store?.content?.uuid) {\n const baseUrl = getApiUrl(BaseApi.CA_ENDPOINT, `/api/pages/${store?.content?.uuid}/export-data-to-xls/`);\n const savedKeywordsUrl=`${baseUrl}?&jwt=${token}`;\n return savedKeywordsUrl;\n }\n };\n\n\n return \n \n store.setFocusTermsExpanded(!store.focusTermsExpanded)}>\n {store?.focusTermsExpanded ? 'Default Mode' : 'Focus Mode'} \n \n \n\n {/* \n {currentView === 'links' ? 'Internal' : 'External links'} \n \n\n {currentView === 'links' ? \n Keywords \n : null} */}\n\n {isNotPublic && (currentView === 'links' ? \n : null)}\n\n\n onLinksSync()}>\n \n \n\n ;\n});\n\nconst Container = styled.div<{current: string}>`\n display: flex;\n align-items: center;\n padding: 10px 15px;\n justify-content: ${p => p.current === 'links' ? 'space-between' : 'flex-start'};\n`;\n\n\nconst FocusModeBtn = styled(Button)`\n background: transparent;\n padding: 4px 0px;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: 0px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst FocusModeLabel = styled.span`\n color: #E8E8E8;\n font-size: 12px;\n margin-bottom: -2px;\n`;\n\nconst ExportIcon = styled.a`\n display: flex;\n align-items: center;\n cursor: pointer;\n background: transparent;\n font-size: 12px !important; \n margin-left: auto;\n margin-right: 0px;\n color: #fff;\n padding: 7px 20px;\n height: 28px !important;\n\n &:focus,\n &:hover {\n background: transparent;\n color: #fff;\n }\n`;\n\n\nconst RefetrchBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n margin-right: 0px;\n`;\n","import {InternalLinkType} from '@/store/content-optimizer/CurrentPageModel';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip} from 'antd';\nimport styled from 'styled-components';\nimport {\n faCheck,\n faStar,\n} from '@fortawesome/pro-regular-svg-icons';\nimport {faStar as faStarSolid} from '@fortawesome/pro-solid-svg-icons';\nimport {useEffect, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n link: InternalLinkType;\n customCallback?: () => void;\n}\nexport const SingleSuggestion = observer(({link, customCallback}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemovingTerm, setIsRemovingTerm] = useState(false);\n const [isBookmarked, setIsBookmarked] = useState(link?.isBookmarked);\n const {contentOptimizer: {currentPage: {removeInternalLinkSuggestion, bookmarkInternalLinkSuggestion, content: {uuid}}}} = useStore('');\n\n const antdIcon = \n \n \n \n \n \n \n {link?.title ? link.title : ''}\n \n {isBookmarked ? : null}\n \n\n \n {link?.path}\n \n \n \n \n \n {\n setIsBookmarked(!isBookmarked);\n await bookmarkInternalLinkSuggestion(uuid, link?.url);\n if (typeof customCallback == 'function') customCallback();\n }}>\n \n \n \n \n \n \n \n {\n setIsRemovingTerm(true);\n await removeInternalLinkSuggestion(uuid, link?.url, link?.keywords);\n if (typeof customCallback == 'function') customCallback();\n setIsRemovingTerm(false);\n }}>\n {isRemovingTerm ? : \n \n \n\n ;\n});\n\nconst SingleLinkContainer = styled.div`\n margin-bottom: 12px;\n display: flex;\n justify-content: space-between;\n position: relative;\n\n .actionsMenu {\n display: none;\n font-size: 12px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n cursor: pointer !important;\n position: absolute;\n background: linear-gradient(90deg, #2d2f342b -10.83%, #2d2f34 39.77%);\n padding-left: 30px;\n right: 0;\n }\n\n &:hover {\n .actionsMenu {\n display: flex;\n }\n }\n\n .copyTooltip {\n :global(.ant-tooltip-content) {\n background-color: $color-gray-dark;\n border-radius: 10px !important;\n }\n \n :global(.ant-tooltip-arrow) {\n display: none !important;\n }\n \n :global(.ant-tooltip-inner) {\n border-radius: 10px !important;\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n }\n`;\nconst Right = styled.div`\n width: 90%;\n margin-right: auto;\n`;\nconst Left = styled.div`\n display: flex;\n width: 10%;\n`;\nconst TitleAndStar = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n`;\nconst Title = styled.div`\n cursor: pointer;\n color: #e8e8e8 !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 90%;\n`;\nconst Link = styled.a`\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n color: #34AEF3;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\n\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {SingleSuggestion} from './SingleISugesstion';\nimport styles from '../CommonCitations/style.module.scss';\n\ninterface Props {\n data: any[];\n store?: CurrentPageStore;\n isQueried?: boolean;\n customCallback?: () => void;\n}\n\n\nexport const InternalLinksSuggestions = observer(({data, store, isQueried, customCallback}: Props) => {\n return <>\n \n {data?.length ?\n data?.map((suggestion, id) => (\n \n )) : isQueried ?\n \n No Internal Link Suggestions found that match your search.\n :\n store?.content?.targetKeywords?.length === 0 ?\n \n Please add Target Keywords to get Internal Link Suggestions.\n : \n No Internal Link Suggestions found for these Target Keywords.\n }\n \n\n ;\n});\n\n\nconst DropdownsContainer = styled.div`\n background-color: #2D2F34;\n max-height: 340px;\n overflow-y: auto;\n padding-right: 15px;\n padding-left: 15px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n","\nimport {CommonCitationsType} from '@/store/content-optimizer/CurrentPageModel';\nimport {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n citation: CommonCitationsType;\n}\n\nexport const SingleCitation = observer(({citation}: Props) => {\n const addDefaultSrc = e => {\n e.target.src = '/img/world-wide-web.svg';\n };\n\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)} src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc.length > 90 ?\n \n {citation?.metaDesc.substring(0, 90) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by: \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp.metaDesc.length > 70 ? serp.metaDesc.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 7 && (\n {`+${citation?.serps?.length - 7}`}\n )}\n \n : null}\n\n \n ;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SingleCitation} from './SingleCitation/SingleCitation';\nimport styles from './style.module.scss';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n store: CurrentPageStore;\n}\nexport const CommonCitations = observer(({store}: Props) => {\n return <>\n {store?.analytics?.commonCitations?.length ? \n \n {store?.analytics?.commonCitations.map(citation => {\n return (citation.url || citation.metaDesc) && ;\n })}\n \n :\n !store?.content?.targetKeywords?.length ? \n Please add Target Keywords to get Common Citations.\n : \n No Common Citations found for these Target Keywords.\n }\n ;\n});\n","import {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\n\nexport const SidebarTooltip = observer(props => {\n return \n {props.children}\n ;\n});\n","import {observer} from 'mobx-react';\nimport {ChangeEvent, Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled, {css, keyframes} from 'styled-components';\nimport {Tooltip, Form, Dropdown, Radio} from 'antd';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport Text from 'antd/lib/typography/Text';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {Button as CommonBtn, CommonInput} from '@/components/common-components/components';\nimport {Loader} from '../../../Utils/loader';\nimport {addProtocolToDomain, sanitizeUrl} from '@/utils/url';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPen, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {Button} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {Input} from '@/components/common-components/v2';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\n// import {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\n// import { toJS } from 'mobx';\n// import { LoadingOutlined } from '@ant-design/icons';\n\ninterface Props {\n store: CurrentPageStore;\n currentView?: 'links' | 'terms';\n onViewChange?: Dispatch>;\n visibleKeywords?: any[];\n updateKeywords?: (kwArray) => void;\n onFilter: (query: string[]) => void;\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const SuggestionsDataController = observer(({\n store,\n currentView,\n onViewChange,\n visibleKeywords,\n updateKeywords,\n onFilter,\n viewSuggestionsOption,\n linksDropDownFromSuggestion,\n}: Props) => {\n const [showEditor, setShowEditor] = useState(false);\n const [isCloseClicked, setIsCloseClicked] = useState(false);\n const [form] = Form.useForm();\n const [inputValue, setInputValue] = useState(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n const [submitDisabled, setSubmitDisabled] = useState(true);\n const isNotPublic = !isScaPublicPage();\n\n // const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n const {Group} = Radio;\n useEffect(() => {\n onViewChange(linksDropDownFromSuggestion);\n }, [linksDropDownFromSuggestion]);\n\n\n // const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n const hostnameEditor = \n {\n if (!isCloseClicked) {\n try {\n await store?.updateHostname(inputValue);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setShowEditor(false);\n } catch (e) {\n return Promise.reject(e);\n }\n }\n }}\n initialValues={{\n urlInput: inputValue,\n }}>\n {'Page URL'} \n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n {\n setInputValue(e.target.value);\n if (!e.target.value) {\n setSubmitDisabled(true);\n } else {\n setSubmitDisabled(false);\n }\n }\n }\n placeholder={t('enter-url')} />\n\n \n \n {\n e.preventDefault();\n setInputValue(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n setShowEditor(false);\n }}\n disabled={store?.isUpdatingHostname}\n >\n {store?.isUpdatingHostname ? : t('cancel')}\n \n setIsCloseClicked(false)}\n >\n {store?.isUpdatingHostname ? : 'Update'}\n \n \n\n \n ;\n\n const topMessage = \n {hostnameEditor}\n {isNotPublic && (store?.content?.importedFromUrl || store?.content?.hostname ? <>\n \n Suggestions shown for \n \n {sanitizeUrl(store?.content?.hostname ?? store?.content?.importedFromUrl)}\n \n \n \n setShowEditor(!showEditor)} style={{marginLeft: 'auto'}}>\n \n : <>\n To get Link Suggestions setShowEditor(!showEditor)}>specify a Page URL \n )}\n ;\n\n const viewChangeDropdown = \n e.stopPropagation()}>\n onViewChange(e.target.value)}>\n Internal Link Suggestions \n External Link Suggestions \n \n \n ;\n\n const keywordsDropdown = \n Show Internal Link Suggestions for following target keywords: \n e.stopPropagation()}>\n {visibleKeywords?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const viewControlls = \n \n \n {currentView === 'links' ? 'Internal Links' : 'External links'} \n \n \n\n {currentView === 'links' ? \n Keywords {visibleKeywords?.filter(kw => kw.active)?.length} / {visibleKeywords?.length} \n : null}\n\n ;\n\n const SearchAndSort = \n \n termSearchHandler(e)}/>\n \n {/* \n {store?.isAnalyzing ? : \n {toJS(store.content?.internalLinkSuggestions)?.map((cluster, id) => {\n return \n \n Link Suggestions in cluster: \n {cluster.results?.length} \n \n }>\n item.trim() === cluster.keyword).length > 0}\n onClick={() => handleOnClusterClick(cluster.keyword)}>{`#${cluster.keyword} - ${cluster.results?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n */}\n ;\n\n return \n {topMessage}\n {viewControlls}\n {SearchAndSort}\n ;\n});\n\nconst Wrapper = styled.div`\n margin-bottom: 10px;\n`;\n\nconst EditorContainer = styled.div<{show: boolean}>`\n display: ${p => p.show ? 'block' : 'none'};\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n border-radius: 5px;\n position: absolute;\n top: 20px;\n right: 0;\n padding: 15px 10px;\n width: 300px;\n z-index: 1;\n `;\nconst FormStyled = styled(Form)`\n .ant-form-item {\n margin-bottom: 10px;\n }\n\n .ant-form-item-explain.ant-form-item-explain-error {\n div {\n color: #ff4d4f;\n }\n }\n `;\n\nconst HostnameContainer = styled.div`\n position: relative;\n display: flex;\n font-size: 12px;\n margin-bottom: 10px;\n`;\nconst HostnameLink = styled.a`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 150px);\n margin-left: 5px;\n color: #34AEF3;\n`;\nconst HostnameLinkBtnContainer = styled.div`\n width: 14px;\n height: 14px;\n margin-left: 10px;\n cursor: pointer;\n`;\n\nconst ViewControllsContainer = styled.div`\n display: flex;\n`;\nconst AddNewUrlBtn = styled.div`\n font-size: 12px;\n margin-left: 5px;\n color: #40a9ff !important;\n text-decoration: underline;\n cursor: pointer;\n`;\nconst InputStyeld = styled(CommonInput)`\n `;\nconst ButtonContainer = styled(Form.Item)`\n .ant-form-item-control-input-content {\n display: flex;\n justify-content:flex-end;\n }\n `;\n\nconst CancelButton = styled(CommonBtn)`\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n padding: 5px 15px;\n\n span {\n color: #4E5156 !important;\n }\n\n &:hover, &.active, &.focus {\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n }\n `;\nconst UpdateButton = styled(CommonBtn)`\n padding: 5px 15px;\n margin-left: 10px;\n `;\nconst ViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 255px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\nconst RadioStyled = styled(Radio)`\n .ant-radio-checked .ant-radio-inner {\n background-color: #7f4ead !important;\n border-color: #7f4ead !important;\n\n &::after {\n background-color: #fff !important;\n }\n }\n`;\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst ButtonStyled = styled(Button)<{viewSuggestionsOption?: boolean}>`\n background-color: #323539;\n border: 1px solid transparent;;\n font-size: 13px;\n padding: 8px 14px;\n margin: 0 9px 0 0 !important;\n\n &:hover, &:focus {\n background-color: transparent !important;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 230px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\n\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\n// const ClusterTooltipSingleRow = styled.div`\n// display: flex;\n// justify-content: space-between\n// `;\n// const ClusterTooltipLabel = styled.div`\n// font-size: 12px;\n// font-weight: 400;\n// color: #E8E8E8;\n// `;\n\n// const ClusterTooltipValue = styled.div`\n// font-size: 12px;\n// font-weight: 500;\n// color: #FFFFFF;\n// `;\n\nconst SearchAndSortWraper= styled.div `\n margin-top: 10px;\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\n\n// const ClustersWrapper = styled.div`\n// display: flex;\n// `;\n// const ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n// display: flex;\n// flex-wrap: wrap;\n\n// height: ${p => p.expandedClusters ? 'auto' : '25px'};\n// overflow: hidden;\n// `;\n\n// const SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n// background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n// border-radius: 60px;\n// padding: 3px 8px;\n// width: auto;\n// height: 20px;\n// font-size: 11px;\n// margin-right: 6px;\n// margin-bottom: 6px;\n// cursor: pointer;\n\n// &:hover {\n// background-color: #4B4D51 !important;\n// }\n// `;\n\nconst InputStyled = styled(Input)`\n height: 32px;\n`;\n","import {observer} from 'mobx-react';\nimport React, {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {LinkSuggestionsDropdownController} from '../DropdownController/LinkSuggestionsDropdownController';\nimport {InternalLinksSuggestions} from './InternalLinkSuggestions/InternalLinkSuggestions';\nimport {CommonCitations} from './CommonCitations/CommonCitations';\nimport {useStore} from '@/store/root-store';\nimport {SuggestionsDataController} from '../DropdownController/SuggestionsDataController';\nimport {toJS} from 'mobx';\nimport {Button, Input, Popover, Radio, Spin, Tooltip, Form} from 'antd';\nimport {exportLinkIcon} from '@/utils/icons';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import { SmallBadge } from '@/components/common-components/components/badge';\nimport {Pill} from '@/components/layoutV2/user-menu/styles';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\nimport {notification} from '@/utils/notification-v2';\nimport {apiError} from '@/utils/api';\n\ninterface LinkSuggestionTabPRops {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const LinkSuggestionsTab = observer(({viewSuggestionsOption, linksDropDownFromSuggestion}: LinkSuggestionTabPRops) => {\n const [currentView, setCurrentView] = useState<'links' | 'terms'>('links');\n const [activeKeywordsList, setActiveKeywordsList] = useState([]);\n const [searchQuery, setSearchQuery] = useState([]);\n const [dataArr, setDataArr] = useState([]);\n const [initialDataArr, setInitialDataArr] = useState([]);\n const [isQueried, setIsQueried] = useState(false);\n const [anyButtonClicked, setAnyButtonClicked] = useState(false);\n const antIcon = ) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n if (e.target.value.length) setUrlsError('');\n setInputValue(e?.target?.value);\n }\n };\n\n const addDomainPopoverContent = () => {\n return \n To continue, provide a source of Internal links \n \n \n \n \n \n \n \n Add a domain \n We’ll scan the domain and provide inlinks recommendations \n {selectedOption === 'domain' &&\n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n setDomain(e.target.value)}\n />\n \n }\n \n \n \n \n \n \n \n \n Provide URLs \n Write or paste a list of URLs and we’ll find the best fit for them \n {selectedOption === 'urls' &&\n <>\n \n {urlsError&& {urlsError} }\n \n }\n \n \n \n \n ;\n };\n\n const popoverInnerStyle = {\n width: '500px',\n borderRadius: '10px',\n border: '1px solid #D9D9D9',\n background: 'var(--White, #FFF)',\n boxShadow: '0px 1px 20px 0px rgba(0, 0, 0, 0.19)',\n };\n\n\n return <>\n {\n onDataFilter(kwArr);\n }}\n visibleKeywords={activeKeywordsList}\n onFilter={setLinks}\n viewSuggestionsOption={viewSuggestionsOption}\n />\n \n \n \n \n \n Internal links help search engines understand how your content interrelates.\n \n \n {`Links in of the page: ${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.filter(link => link.isUsed).length ?? 0}/${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.length ?? 0}`}\n \n }>\n \n\n {getMsg(calculateUsagePercentage(toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks))}\n \n \n Add links to content easily with AI
\n {dataArr?.length && (currentView == 'links' || currentView == 'terms') ? {\n (dataArr?.length && (currentView == 'links' || currentView == 'terms')) && postLInkSuggestion(currentView);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
:\n \n \n Launching AI Links Assistant.\n Do not modify your article before this tool is fully loaded\n : ''}>\n {\n setIsVisiblePopover(true);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
\n \n }\n \n {currentView === 'links' ? a.isBookmarked > b.isBookmarked ? -1 : 1)} store={currentPage}/> : }\n \n ;\n});\n\nconst Wrapper = styled.div`\n background-color: #2d2f34;\n border-radius: 5px;\n padding: 0 0 13px 0;\n`;\nconst SuggestionsBannerContainer = styled.div<{percent?: number}>`\n background-color: ${p => p.percent < 75 ? '#F1AA3E1C' : '#1FAC471C'};\n border-radius: 5px;\n padding: 9px 10px;\n font-size: 12px;\n margin: 10px 6px;\n\n .infoBannerIcon {\n width: 15px;\n color: ${p => p.percent < 75 ? '#F1AA3E' : '#1FAC47'};\n margin-right: 5px;\n }\n`;\n\nconst TooltipTitle = styled.div`\n`;\nconst TooltipDescription = styled.div`\n font-size: 12px;\n color: #a3a4a4;\n`;\n\nconst LinksWrapper = styled.div<{anyButtonClicked?: boolean}>`\n\nbackground-image: linear-gradient(to left, rgb(52 174 243 / 9%), rgba(52, 174, 243, 0.42));\ndisplay: flex;\n// justify-content: space-between;\nheight: 35px;\nalign-items: center;\nmargin: 0 7px 20px 7px;\npadding: 0 15px;\nborder-radius: 5px;\np{ \n margin-bottom: 0;\n font-size: 12px;\n &:last-child{\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 30%;\n margin-left: 10px;\n color: #34AEF3;\n cursor: ${props => props.anyButtonClicked ? 'not-allowed' : 'pointer'};\n text-decoration: underline;\n }\n}\n`;\n\nconst StyledPopover = styled(Popover)`\n .ant-popover-inner-content {\n padding: 0px !important;\n }\n`;\n\nconst PopoverContentWrapper = styled.div`\n margin: 6px 4px;\n`;\n\nconst PopoverTitle = styled.p`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin-bottom: 15px !important;\n`;\n\nconst AddDomainSection = styled.div`\n display: flex; \n width: 460px;\n min-height: 50px;\n flex-shrink: 0;\n border-radius: 12px 12px 0px 0px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n padding: 12px 16px;\n`;\n\nconst ProvideUrlsSection = styled.div`\n display: flex;\n width: 460px;\n min-height: 58px;\n flex-shrink: 0;\n border-radius: 0px 0px 12px 12px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n margin-bottom: 15px;\n padding: 12px 16px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n`;\n\nconst AddDomainTitle = styled.div`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 2px;\n`;\n\nconst AddDomainDesc = styled.div`\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 10px;\n`;\n\nconst AddDomainInput = styled(Input)`\n width: 400px;\n height: 32px;\n flex-shrink: 0;\n border-radius: 6px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--White, #FFF);\n`;\n\nconst DomainDetails = styled.div`\n .ant-form-item {\n margin-bottom: 0px !important;\n } \n\n`;\n\nconst ProvideUrlsDetails = styled.div`\n \n`;\n\nconst Dismiss = styled.button`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Body-background, #F2F2F5);\n border: none;\n cursor: pointer;\n`;\n\nconst Update = styled(Button)`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Blue, #2D6CCA);\n color: white;\n min-width: 120px;\n &:hover {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n &:focus {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n`;\n\nconst ErrorMessageForURL = styled.span`\n color: #ff4d4f;\n font-size: 14px;\n line-height: 1.5715;\n`;\n","import {useCallback, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {\n Divider,\n Row,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faFilePlus, faMessageCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useTranslation} from 'next-i18next';\nimport {QuestionModel} from '@/store/content-optimizer/CurrentPageModel';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {debounce, isNil} from 'lodash';\nimport {insertText} from '@/utils/editor-scripts';\nimport {EditorState} from 'draft-js';\n\ninterface Props {\n question: QuestionModel;\n i: number | string;\n}\n\n\nexport const SingleQuestion = observer(({question, i}: Props) => {\n const {contentOptimizer: {\n contentFragment,\n },\n } = useStore('');\n const {contentOptimizer: {currentPage, aiOutline}} = useStore('');\n const [copySuccess, setCopySuccess] = useState(false);\n const [aiCopied, setAiCopied] = useState(false);\n const [creatingPage, setCreatingPage] = useState(false);\n const [isAiGenerating, setIsAiGenerating] = useState(false);\n const {t} = useTranslation('common');\n\n const antIcon = \n {t('question')}
\n {question.keyword ? question.keyword : null}
\n \n {question?.sv !== undefined && question?.sv !== null && {`SV: ${searchVolumeFormatter(question.sv)}`}}\n {question?.cpc !== undefined && question?.cpc !== null && {`CPC: ${costPerClickFormatter(question.cpc)}`}}\n \n {t('number-of-uses')}
\n \n {question?.usedCount ?? ''}\n
\n \n }\n >\n \n \n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n }}>\n \n {question?.keyword ?? ''}\n
\n ;\n});\n","\nimport {Typography, Spin, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleQuestion} from './SingleQuestion';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport {copyToClipboardWithHtmlAndText} from '@/utils/clipboard';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const QuestionsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {t} = useTranslation('common');\n\n const {Title} = Typography;\n const antIcon = \n Questions {currentPage?.isAnalyzing ? <Spin indicator={antIcon} style={{marginRight: '20px'}}/> :\n currentPage?.analytics?.questions?.length ? <span className={styles.totalQuestions}>{`${currentPage?.analytics?.questions?.filter(question => question?.usedCount > 0)?.length}/${currentPage?.analytics?.questions?.length}`}</span> : null}\n <Tooltip\n title={copySuccess ? <span><FontAwesomeIcon icon={faCheck} style={{color: '#2AC155'}}/>{` Copied to clipboard`}</span> : t('copy-to-clipboard')}\n placement='top'\n overlayClassName={styles.copyTooltip}\n onVisibleChange={visible => {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n <div style={{cursor: 'pointer', color: '#34AEF3', marginLeft: 'auto'}}\n onClick={() => {\n let htmlString = '<p></p>';\n let string = '';\n currentPage?.analytics?.questions?.map(question => {\n htmlString += (`<p>${question.keyword}?</p>`);\n string += (`${question.keyword}?`);\n });\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlString, 'text/html');\n const copiedText = doc.body.textContent;\n navigator.clipboard.writeText(copiedText);\n\n // Example usage:\n const htmlContent = htmlString;\n const plainTextContent = string;\n\n copyToClipboardWithHtmlAndText(htmlContent, plainTextContent);\n setCopySuccess(true);\n }}>\n <FontAwesomeIcon icon={faCopy} style={{marginRight: 5}}/> Copy all\n </div>\n </Tooltip>\n \n {currentPage?.analytics?.questions?.length ? \n \n {currentPage?.analytics?.questions?.map((question, i) => {\n return ;\n })}\n \n :\n \n {/* ('');\n const {contentOptimizer: {currentPage: {addFocusTerms, isFocusTermsLoading}}} = useStore('');\n\n const onClose = () => {\n setShowAddFocusTermModal(false);\n setTerms('');\n };\n\n const handleTerms = (e: React.ChangeEvent) =>{\n const value = e.target.value;\n setTerms(value.replaceAll(',', '\\n'));\n };\n\n const handleAddFocusTerms = async () => {\n try {\n await addFocusTerms({terms: stringToArray(terms, keywordNewLineReg, ',' )});\n onClose();\n notification.success('', 'Focus terms added successfully');\n } catch (error) {\n const errorMessage = apiError(error) as string;\n notification.error('', errorMessage || 'Something went wrong please try again');\n }\n };\n\n return (\n \n Add focus terms \n Provide your own terms and get usage recommendations to elevate your writing. \n \n \n \n );\n});\n\nexport default AddFocusTermModal;\n\nconst StyledModal = styled(Modal)`\n .ant-modal-content{\n border-radius: 12px;\n background: var(--White, #FFF);\n }\n`;\n\nconst Title = styled.div`\n color: var(--Text-black, var(--Black, #121212));\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`;\n\nconst Desc = styled.div`\n width: 370px;\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 4px;\n`;\n\nconst TextArea = styled.div`\n margin-top: 22px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 24px;\n\n .cancel-btn {\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n background-color: transparent;\n border: none;\n cursor: pointer;\n }\n\n .add-btn {\n display: flex;\n width: 115px;\n height: 44px;\n /* padding: 13px 60px 14px 30px; */\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 6px;\n background: var(--Green, #2AC155);\n color: white;\n color: var(--White, var(--White, #FFF));\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n }\n .ant-btn[disabled] {\n background: #f5f5f5 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n }\n`;\n","import {useEffect, useState} from 'react';\nimport {\n Tabs as CommonTabs,\n TabPane as CommonTabPane,\n} from '@/components/common-components/components';\nimport {\n Spin,\n} from 'antd';\nimport {\n LoadingOutlined,\n} from '@ant-design/icons';\nimport styles from './style.module.scss';\nimport {useTranslation} from 'next-i18next';\n// import {VideoPopOver} from '@/components/common-components/components/popover';\nimport {FocusTermsTab} from './FocusTermsTab/FocusTermsTab';\nimport {observer} from 'mobx-react';\nimport {LinkSuggestionsTab} from './LinkSuggestionsTab/LinkSuggestionsTab';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {QuestionsTab} from './QuestionsTab/QuestionsTab';\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_FOCUS_TERMS_TAB_OPEN, SCA_PAGE_QUESTIONS_TAB_OPEN, SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN} from '@/constants/events';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\nimport AddFocusTermModal from './DropdownController/AddFocusTermModal';\n\ninterface FocusTermsTabsProps {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\nconst secondAntIcon = onChangeTab(key)}\n >\n \n \n \n {t('topical-terms')}\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedTerms}\n /{currentPage?.analytics?.focusTerms?.length}\n )\n }\n \n \n \n }\n key='1'\n style={{'outline': 'none'}}>\n \n \n \n Questions\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedQuestions}\n /{currentPage?.analytics?.questions?.length}\n )\n }\n \n \n \n }\n key='2'\n style={{'outline': 'none'}}>\n {isNotPublic && \n \n \n Link Suggestions\n \n \n {currentPage?.isFetchingIntLinksSug ?\n () :\n (\n {currentPage?.content?.totalUsedSuggestions}\n /{currentPage?.content?.internalLinkSuggestionsV2?.allLinks?.length}\n )\n }\n \n \n \n }\n key='3'\n style={{'outline': 'none'}}>\n \n \n \n \n );\n});\n\nconst CommonTabsStyled = styled(CommonTabs)`\n .rc-tabs-extra-content {\n background-color: transparent !important;\n border: 1px solid $color-gray-dark-medium;\n border-radius: 5px;\n cursor: pointer;\n font-size: $font-size-12;\n height: 25px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n padding: 0 5px;\n transition: all 0.2s ease-in;\n }\n\n .focusTermsTabTitleValue {\n color: $color-gray-light;\n display: block;\n font-size: $font-size-12;\n font-weight: 400;\n margin-left: 5px;\n\n .ant-spin-spinning {\n height: 10px;\n }\n\n .customSpinner {\n font-size: 12px !important;\n }\n }\n\n .rc-tabs-content-holder {\n background-color: transparent !important;\n padding-top: 15px;\n }\n\n .rc-tabs-nav {\n border-bottom: 1px solid #4E5156;\n }\n .rc-tabs-nav-list {\n justify-content: space-between;\n }\n .rc-tabs-nav-operations {\n display: none !important;\n }\n\n .rc-tabs-tab {\n margin-left: 20px !important;\n\n &:first-child {\n margin-left: 0px !important;\n }\n }\n\n @media screen and (max-width: 1400px) {\n .rc-tabs-tab {\n margin-left: 0px !important;\n margin-right: 15px !important;\n }\n \n }\n\n .rc-tabs-tab-btn {\n padding: 5px 0 !important;\n }\n\n .rc-tabs-ink-bar {\n background-color: #F1AA3E !important;\n border-radius: 2px;\n }\n`;\n\nconst TabsStyled = styled(CommonTabPane)<{expanded: boolean; editorScrolled: boolean}>`\n \n .ant-collapse {\n overflow-y: ${p => p.expanded ? 'auto' : 'inherit'};\n height: ${p => p.expanded ? `calc(100vh - ${p.editorScrolled ? 292 : 300}px)` : 'auto'};\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n }\n`;\n\nconst TabTitleContainer = styled.div<{active: boolean}>`\n\n .tabTitle {\n font-weight: 400;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n\n .tabExtraInfo {\n padding-bottom: 8px;\n\n .tabUsageContainer {\n display: flex;\n\n .usageValue {\n font-size: 18px;\n font-weight: 600;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n .totalValue {\n span {\n font-size: 12px;\n color: #A3A4A4;\n }\n }\n }\n }\n\n`;\n","/* eslint-disable max-len */\n\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {ReactNode} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport styles from './style.module.scss';\n\n\ninterface Props {\n label: string;\n value?: number;\n tooltipLabel?: string | ReactNode;\n showTooltip?: boolean;\n loading?: boolean;\n min?: number;\n max?: number;\n headingData?:{\n h1: number;\n h2: number;\n h3: number;\n h1Min: number;\n h1Max: number;\n h2Min: number;\n h2Max: number;\n h3Min: number;\n h3Max: number;\n };\n linksData?:{\n internalLinks: number;\n externalLinks: number;\n internalLinksMin: number;\n internalLinksMax: number;\n externalLinksMin: number;\n externalLinksMax: number;\n };\n}\n\nexport const SingleMetrics = observer(({label, value, tooltipLabel, showTooltip, loading, min, max, headingData, linksData}:Props) => {\n const secondAntIcon = \n {label === 'Headings:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n \n :\n <>\n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n :\n }\n :\n label === 'Links:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n linksData.internalLinksMax) ? faArrowDown : faCheck} color={(linksData.internalLinks < linksData.internalLinksMin) || (linksData.internalLinks > linksData.internalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '} Internal: {linksData.internalLinks}\n \n {`${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `/` : '/'} ${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `${linksData.internalLinksMin}-${linksData.internalLinksMax}` : ''}`}\n \n \n \n linksData.externalLinksMax) ? faArrowDown : faCheck} color={(linksData.externalLinks < linksData.externalLinksMin) || (linksData.externalLinks > linksData.externalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '}External: {linksData.externalLinks}\n \n {`${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `/` : ''} ${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `${linksData.externalLinksMin}-${linksData.externalLinksMax}` : ''}`}\n \n \n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n :\n <>\n {label} \n {!loading ?\n showTooltip ?\n \n \n max) ? faArrowDown : faCheck} color={(value < min) || (value > max) ? '#FF8536' : '#1FAC47'}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n \n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n cursor: default;\n height: 18px;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1FAC47' : '#F44343'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 2px;\n margin-right: 3px;\n`;\nconst RangeValues = styled.div`\n color: #A3A4A4 !important;\n font-size: 10px;\n display: inline-flex;\n margin-left: 2px;\n\n @media screen and (max-width: 1400px) {\n font-size: 8px;\n }\n`;\nconst StyledLable = styled.p`\n margin-bottom: 0px;\n width: 72px;\n text-align: end;\n margin-right: 5px;\n color: #E8E8E8;\n`;\nconst StyledIcon = styled(FontAwesomeIcon)`\n width: 12px;\n`;\n","/* eslint-disable no-console */\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {isNil} from 'lodash';\nimport {SingleMetrics} from '../SingleMetrics';\nimport {SkeletonHorizontalLoaderGray} from '@/components/common-components';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck, faArrowUpRightFromSquare} from '@fortawesome/pro-regular-svg-icons';\nimport {useState, Dispatch, SetStateAction} from 'react';\nimport {Tabs, Tooltip} from 'antd';\nimport {TabPane} from 'rc-tabs';\nimport {toJS} from 'mobx';\n\ninterface ContentScoreProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const ContentScore = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: ContentScoreProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n isWordCountLoading,\n feTargetKeywords,\n currentEditorState,\n isScoreLoading,\n isFetchingIntLinksSug,\n analytics,\n content: {\n score,\n scoreExtended,\n wordCount,\n suggestedWordCountLimits,\n scoreCounts,\n internalLinkSuggestionsV2,\n },\n },\n }} = useStore('');\n\n const [activeKey, setActiveKey] = useState('internal');\n\n const chartOption={\n grid: {\n top: '0px',\n bottom: '0px',\n },\n series: [{\n min: 0,\n max: 100,\n type: 'gauge',\n axisLine: {\n roundCap: false,\n lineStyle: {\n width: 10,\n color: [\n [0.33, '#f44343'],\n [0.66, '#f1aa3e'],\n [1, '#1ea745'],\n ],\n },\n },\n progress: {\n show: false,\n },\n startAngle: 180,\n radius: '90%',\n endAngle: 0,\n pointer: {\n width: 4,\n icon: 'roundRect',\n length: '25%',\n offsetCenter: [0, '-80%'],\n itemStyle: {\n color: '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n splitLine: {\n distance: -13,\n length: 15,\n lineStyle: {\n color: '#24262a',\n width: 6,\n },\n },\n splitNumber: 3,\n axisLabel: {\n show: false,\n color: 'auto',\n distance: 40,\n fontSize: 20,\n },\n detail: {\n show: false,\n },\n data: [{\n value: score ?? 0,\n }],\n }],\n };\n\n const viewSuggestionHandler = (key: 'links' | 'terms') => {\n setViewSuggestionsOption(true);\n setLinksDropDownFromSuggestion(key);\n setTimeout(() => {\n setViewSuggestionsOption(false);\n }, 1000);\n };\n const scoreLeftPosition = (score?: number) => {\n if (!score || score === 0) return '31%';\n if (score < 100 ) return '27%';\n if (score === 100 ) return '21%';\n };\n const avgTopLeftPosition = (avg?: number, top?: number) => {\n if (!avg && !top) return '25%';\n return '17%';\n };\n\n const shouldShowTooltip = (min?: number, max?: number) => {\n if (isNil(min) || isNil(max)) {\n return false;\n }\n\n return true;\n };\n\n const tooltipMsg = (key: string, min?: number, max?: number, cur?: number) => {\n let msg = '';\n if (cur <= min) msg = `Try to use more ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= max) msg = `Try to use less ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= min && cur <= max) msg = `Good job. You're in the optimal range.`;\n return msg;\n };\n\n const setHeadingsTooltip = (h1value: number, h1Min: number, h1Max: number, h2value: number, h2Min: number, h2Max: number, h3value: number, h3Min: number, h3Max: number) => {\n return \n \n H1 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h1value}/{h1Min}-{h1Max}\n \n
\n \n H2 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h2value}/{h2Min}-{h2Max}\n \n
\n \n H3 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h3value}/{h3Min}-{h3Max}\n \n
\n ;\n };\n const onChangeTab = key => {\n setActiveKey(key);\n };\n\n const openText = scrollToText => {\n const anchorTag = document.querySelector('a[href=\"' + scrollToText + '\"]') as HTMLElement;\n if (anchorTag) {\n anchorTag?.classList.add('animateAnchor');\n anchorTag?.scrollIntoView({behavior: 'smooth', block: 'start'});\n setTimeout(() => {\n anchorTag?.classList.remove('animateAnchor');\n }, 3000);\n }\n };\n\n\n const setLinksTooltip = (internalLinksData, externalLinksData) => {\n return \n onChangeTab(key)}\n >\n \n Recommended:\n {internalLinksData.internalLinksMin} - {internalLinksData.internalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? ()=> viewSuggestionHandler('links') : ()=> {}}>\n {!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {internalLinksData.internalLinksLength}\n internalLinksData.internalLinksMax) ?\n faArrowDown : faCheck}\n color={(internalLinksData.internalLinksLength < internalLinksData.internalLinksMin) ?\n 'red' : (internalLinksData.internalLinksLength > internalLinksData.internalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {internalLinksData?.internalLinks?.map((item, index) => openText(item)}>{item} \n window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n Recommended:\n {externalLinksData.externalLinksMin} - {externalLinksData.externalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? ()=> viewSuggestionHandler('terms') : ()=> {}}>\n {!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {externalLinksData.externalLinksLength}\n externalLinksData.externalLinksMax) ?\n faArrowDown : faCheck}\n color={(externalLinksData.externalLinksLength < externalLinksData.externalLinksMin) ?\n 'red' : (externalLinksData.externalLinksLength > externalLinksData.externalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {externalLinksData?.externalLinks?.map((item, index) => openText(item)}>{item} window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n ;\n };\n\n const countsSetup = [{\n label: 'Word Count:',\n value: wordCount,\n min: suggestedWordCountLimits?.lower,\n max: suggestedWordCountLimits?.upper,\n tooltipLabel: tooltipMsg('words', suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper, wordCount),\n showTooltip: shouldShowTooltip(suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper),\n loading: isWordCountLoading,\n },\n {\n label: 'Paragraphs:',\n value: scoreCounts?.paragraphs,\n min: scoreCounts?.paragraphsMin,\n max: scoreCounts?.paragraphsMax,\n tooltipLabel: tooltipMsg('paragraphs', scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax, scoreCounts?.paragraphs),\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n },\n {\n label: 'Headings:',\n value: scoreCounts?.headings,\n min: scoreCounts?.headingsMin,\n max: scoreCounts?.headingsMax,\n // tooltipLabel: tooltipMsg('headings', scoreCounts?.headingsMin, scoreCounts?.headingsMax, scoreCounts?.headings),\n tooltipLabel: setHeadingsTooltip(scoreCounts?.h1, scoreCounts?.h1Min, scoreCounts?.h1Max, scoreCounts?.h2, scoreCounts?.h2Min, scoreCounts?.h2Max, scoreCounts?.h3, scoreCounts?.h3Min, scoreCounts?.h3Max),\n showTooltip: false,\n loading: isWordCountLoading,\n headingData: {\n h1: scoreCounts?.h1,\n h2: scoreCounts?.h2,\n h3: scoreCounts?.h3,\n h1Min: scoreCounts?.h1Min,\n h1Max: scoreCounts?.h1Max,\n h2Min: scoreCounts?.h2Min,\n h2Max: scoreCounts?.h2Max,\n h3Min: scoreCounts?.h3Min,\n h3Max: scoreCounts?.h3Max,\n },\n },\n {\n label: 'Links:',\n value: 30,\n min: 2,\n max: 12,\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n tooltipLabel: setLinksTooltip(\n {\n internalLinks: toJS(scoreCounts?.internalLinks),\n internalLinksLength: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n },\n {\n externalLinks: toJS(scoreCounts?.externalLinks),\n externalLinksLength: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n externalLinksMin: scoreCounts?.externalLinksMin,\n externalLinksMax: scoreCounts?.externalLinksMax,\n },\n ),\n linksData: {\n internalLinks: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n externalLinks: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n externalLinksMax: scoreCounts?.externalLinksMax,\n externalLinksMin: scoreCounts?.externalLinksMin,\n },\n },\n // {\n // label: 'Images:',\n // value: scoreCounts?.images,\n // min: scoreCounts?.imagesMin,\n // max: scoreCounts?.imagesMax,\n // tooltipLabel: tooltipMsg('images', scoreCounts?.imagesMin, scoreCounts?.imagesMax, scoreCounts?.images),\n // showTooltip: shouldShowTooltip(scoreCounts?.imagesMin, scoreCounts?.imagesMax),\n // loading: isWordCountLoading,\n // },\n ];\n\n const contentProgressMessage = value => {\n if ((feTargetKeywords?.length == 0 || !currentEditorState?.getCurrentContent().hasText()) && value == 0) {\n return <>\n {!isScoreLoading ? \n Add Target Keywords and Start Writing to see how your content ranks\n :\n \n \n \n \n {score ?? 0}/100\n \n \n \n {`Avg: ${scoreExtended?.avg ?? '-'}`}\n \n \n {`Top: ${scoreExtended?.top ?? '-'}`}\n \n \n\n \n \n {countsSetup.map((item, idx) => {\n return ;\n })}\n \n\n \n\n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst RightSection = styled.div`\n\n`;\nconst StyleHeadingsTooltipTitle = styled.div``;\nconst StyledLinksTabs = styled(Tabs)`\ncolor: #4E5156;\nfont-size: 12px;\nfont-weight: 400;\n.ant-tabs-nav {\n margin: 0 0 12px 0;\n \n .ant-tabs-nav-wrap {\n .ant-tabs-nav-list{\n .ant-tabs-tab{\n padding: 4px 0px;\n &:hover{\n color: #121212;\n }\n }\n .ant-tabs-tab-active{\n .ant-tabs-tab-btn {\n color: #121212;\n\n }\n }\n .ant-tabs-ink-bar{\n background: #F1AA3E !important;\n height: 5px;\n border-radius: 2px 2px 0px 0px;\n }\n }\n }\n}\n`;\n\nconst TabsStyled = styled(TabPane)``;\nconst StyledLinksDiv = styled.ul`\nmax-height: 200px;\noverflow-y: auto;\nmargin-left: -15px;\n.linkopen{\n margin-left: 5px !important;\n cursor: pointer;\n &:hover{\n color: #2D6CCA !important;\n }\n}\n::-webkit-scrollbar {\n width: 4px;\n}\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb {\n background: #3E4144;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n`;\n\nconst StyledRecommender = styled.div`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\n`;\nconst StyledRecomentedValue = styled.span`\ncolor: #121212;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 600;\n`;\nconst StyledSuggestionLink = styled.a<{showAsLink}>`\ncolor: ${p=> p.showAsLink ? '#2D6CCA' : '#A3A4A4'};\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\ntext-decoration-line: none;\nmargin-left: 10px;\ncursor: ${p=> p.showAsLink ? 'pointer' : 'default'};\n&:hover{\n color: ${p=> p.showAsLink ? '#5487d4' : '#A3A4A4'};\n text-decoration-line: ${p=> p.showAsLink ? 'underline' : 'none'};\n}\n`;\nconst StyledCurrentValue= styled.p`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\nmargin-bottom: 2px;\nspan{\n color:#121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 600;\n margin-left: 4px;\n}\n`;\nconst StyledLinkItem = styled.span`\ncolor: #000;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 18px;\nmargin-bottom: 2px;\ncursor: pointer !important;\n&:hover{\n text-decoration: underline;\n}\n`;\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\nmargin-left: 6px;\nheight: 10px;\npadding-bottom:1px;\n`;\n\n// const StyledAnchor = styled.a`\n// text-decoration: none;\n// transition: text-decoration 0.2s;\n\n// &:hover {\n// text-decoration: underline;\n// }\n// `;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\n\nexport const WordCount = observer(() => {\n const secondAntIcon = \n Word count:\n {!currentPage?.isWordCountLoading ? <>\n \n = currentPage?.content?.suggestedWordCountLimits?.lower && currentPage?.content?.wordCount <= currentPage?.content?.suggestedWordCountLimits?.upper}/> \n {currentPage?.content?.wordCount} :\n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n height: 18px;\n cursor: default;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1aceb3' : '#ff8436'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 5px;\n margin-right: 5px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {ContentScore} from './ContentScore';\nimport {useTranslation} from 'next-i18next';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {Progress} from 'antd';\nimport {getProgressColor} from '@/utils/colors';\nimport {WordCount} from './WordCount/WordCount';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {Dispatch, SetStateAction} from 'react';\ninterface HeaderSectionProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const HeaderSection = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: HeaderSectionProps) => {\n const {t} = useTranslation('common');\n const {\n contentOptimizer: {\n currentPage: {\n isScoreLoading,\n focusTermsExpanded,\n isTaActive,\n isLinkActive,\n content: {\n score,\n },\n },\n }} = useStore('');\n\n\n return <>\n { (!focusTermsExpanded && (!isTaActive && !isLinkActive)) ? \n \n \n {t('content-score')} \n \n \n \n\n \n \n\n : \n \n {!isScoreLoading ? (score ?? '-') : '-'}} />\n \n \n {t('content-score')} \n \n \n \n \n \n }\n ;\n});\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst MiniTitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n\nconst MiniContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n height: 50px;\n`;\n\nconst ScoreAndWordCount = styled.div`\n display: flex;\n`;\nconst RightSection = styled.div`\n margin-left: 10px;\n`;\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < termsForInsertion?.length; i++) {\n if (!termsAssistantSuggestions?.find(item => item.termIncluded?.includes(termsForInsertion[i].name))) {\n prepArr.push(termsForInsertion[i].name);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(termsForInsertion ?? []), ...(termsAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} terms` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\ninterface SingleTermProps {\n term: any;\n}\n\nexport const SingleTerm = observer(({term}: SingleTermProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n stagingTaSuggestions,\n setTaActiveTerm,\n taActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n const [dots, setDots] = useState({\n total: 0,\n saved: 0,\n dismissed: 0,\n });\n\n useEffect(() => {\n const savedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'accepted');\n const dismissedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'dismissed');\n\n setDots(() => {\n return {\n total: term.placements,\n saved: savedPlacements?.length ?? 0,\n dismissed: dismissedPlacements?.length ?? 0,\n };\n });\n }, [...stagingTaSuggestions]);\n\n\n const generatePlacmenetsInfo = dots => {\n if (dots.saved == 0 && dots.dismissed == 0) return `${dots.total} available placements`;\n\n let response = '';\n if ((dots.total - dots.dismissed - dots.saved) > 0) response = ` ‧ ${dots.total} available`;\n if (dots.dismissed) response = `${dots.dismissed} dismissed ${response}`;\n if (dots.saved) response = `${dots.saved} accepted ${dots.dismissed > 0 ? ` ‧ ` : ``} ${response}`;\n return response;\n };\n\n const onTermClickHandler = curTerm => {\n if (!taActiveTerm?.term || taActiveTerm.term !== curTerm.name) {\n setTaActiveTerm({\n class: curTerm.name.replaceAll(' ', '-'),\n term: curTerm.name,\n order: 0,\n });\n } else {\n const totalOccurances = document.getElementsByClassName(taActiveTerm.class)?.length;\n\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: taActiveTerm.order < totalOccurances - 1 ? taActiveTerm.order + 1 : 0,\n };\n\n setTaActiveTerm(updatedValues);\n }\n };\n\n return onTermClickHandler(term)} className={taActiveTerm?.term == term.name ? 'isActive' : ''}>\n \n {term.name}
\n \n \n {generatePlacmenetsInfo(dots)}\n \n \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name))?.sort(item => item.status == 'accepted' ? -1 : item.status == 'default' ? 0 : 1)?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return ;\n if (suggestion.status == 'dismissed') return ;\n if (suggestion.status == 'accepted') return ;\n })}\n \n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: ${opaqueColor('#4E5156', 30)};\n border-radius: 10px;\n cursor: pointer;\n transition: background .3s ease-in;\n display: flex;\n\n .termName { \n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n`;\n\nconst Data = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst PlacementsInfo = styled.div`\n font-size: 12px;\n color: #A3A4A4 !important;\n`;\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 28%;\n margin-left: 2%;\n margin-top: auto;\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\n\nexport const TermsList = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n\n useEffect(() => {\n setFinalTermsList([]);\n if (termsAssistantSuggestions?.length) {\n for (let i = 0; i < termsForInsertion.length; i++) {\n const termOccurances = termsAssistantSuggestions.filter(suggestion => suggestion.termIncluded?.includes(termsForInsertion[i].name));\n if (termOccurances?.length) {\n setFinalTermsList(cur => [...cur, {...termsForInsertion[i], placements: termOccurances?.length}]);\n }\n }\n }\n }, [...(termsAssistantSuggestions ?? []), ...(termsForInsertion ?? 0)]);\n\n return \n {finalTermsList?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {CommonInput} from '@/components/common-components';\nimport {Button, Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCaretDown, faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover, Spin, Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const TermsSelectionDropdown = observer(() => {\n const [selectedTerms, setSelectedTerms] = useState([]);\n const [popoverVisible, setPopoverVisible] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n const [showLimitError, setShowLimitEror] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n fetchTaSuggestions,\n termsForInsertion,\n analytics,\n taSuggestionsLoading,\n },\n }, settings: {\n customer: {getCustomerQuota},\n }} = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}}}} = useStore('');\n\n const antIcon = \n \n \n onTermsSearchHandler(e.target.value)}/>\n \n \n \n {`AI Quota: ${quotaUtilization?.ca?.allowedAiContentGeneration?.consumed}/${quotaUtilization?.ca?.allowedAiContentGeneration?.total}`}\n \n \n \n\n \n onBulkSelectTop20Handler()}>Select top 20 terms \n onUncheckAllClickHandler()}>Uncheck all \n \n {showLimitError ?\n Please select less than 50 topical terms. :\n null}\n \n {[\n ...(analytics?.includeMoreTerms ?? []),\n ...(analytics?.includedTerms ?? []),\n ...(analytics?.includeLessTerms ?? []),\n ].filter(term => term.name.includes(searchQuery))?.map((term, idx) => {\n return \n item.name).includes(term.name)}\n onChange={e => handleCheckboxClick(e, term)}\n disabled={term.status == 'include-less'}>\n {term.name} \n \n \n \n Current usage:\n {term.usedCount}\n \n \n Recommended usage:\n {term.requiredCountMin}\n \n \n Maximum usage:\n {term.requiredCountMax}\n \n }>\n {`${term.usedCount}/${term.requiredCountMin}`} \n \n ;\n })}\n \n \n setPopoverVisible(false)}>Cancel \n \n \n \n );\n\n\n return \n onTriggerClickHandler()}>\n {`Select terms ${selectedTerms?.length}`}\n \n ;\n});\nconst Trigger = styled.div`\n color: #34aef3 !important;\n font-size: 12px;\n cursor: pointer;\n`;\nconst Wrapper = styled.div`\n\n`;\nconst HeadingSection = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\nconst SearchBox = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst QuotaInfo = styled.div`\n color: #4E5156;\n margin-bottom: 12px;\n`;\nconst CommonInputStyled = styled(CommonInput)`\n border: 0px solid transparent;\n height: 30px;\n\n &:active {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n &:hover {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n\n &::placeholder {\n color: #A3A4A4;\n font-weight: 400;\n font-size: 15px;\n }\n`;\nconst ControllsBar = styled.div`\n display: flex;\n justify-content: space-between;\n color: #2D6CCA;\n font-size: 12px;\n background: #F9F9FB;\n box-shadow: 0px 1px 0px #E8E8E8, 0px -1px 0px #E8E8E8;\n margin-left: -15px;\n margin-right: -15px;\n padding: 10px 15px\n`;\nconst BulkControllBtn = styled.div`\n cursor: pointer;\n`;\n\nconst TermsList = styled.div`\n max-height: 300px;\n overflow-y: scroll;\n margin-right: -15px;\n padding-right: 15px;\n margin-top: 10px;\n\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.12) ;\n scrollbar-track-color: rgba(138,138,138,0.32);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.4);\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n }\n`;\nconst SingleTermRow = styled.div<{opaque: boolean}>`\n display: flex;\n\n opacity: ${p => p.opaque ? '.4' : 1};\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n display: flex;\n width: 100%;\n\n .ant-checkbox-wrapper {\n width: 100%;\n }\n\n .ant-checkbox-inner {\n border-radius: 4px !important;\n }\n .ant-checkbox-checked .ant-checkbox-inner {\n background-color: #2D6CCA !important;\n border-color: #2D6CCA !important;\n border-radius: 4px !important;\n }\n`;\n\nconst TermName = styled.div`\n cursor: default;\n margin-left: 10px;\n color: #4E5156;\n`;\nconst TermUsage = styled.div`\n cursor: default;\n margin-left: auto;\n color: #4E5156;\n`;\nconst BtnsContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding-top: 10px;\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Divider, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {TermsList} from './TermsList';\nimport {TermsSelectionDropdown} from './TermsSelectionDropdown';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const TermsAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n editContent,\n stagingTaSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n },\n }} = useStore('');\n\n const antIcon =
'));\n }\n\n if (stagingTaSuggestions[i].isSuggestion) {\n if (stagingTaSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n \n \n Terms Assistant \n \n \n Go through the suggestions for inserting terms to see how they look like in your article. Accept or dismiss individual ones.\n
\n
\n * Save changes to update your article.\n \n \n \n item.status !== 'default')}\n color='green'\n style={{marginBottom: 10, width: '-webkit-fill-available', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n {updatingTa ? 'Updating Article...' : 'Save & Update Article'}\n {updatingTa ? onCancelClickHandler()}>\n Cancel\n \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 50px);\n padding-bottom: 20px;\n`;\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #e8e8e8;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {getProgressColor} from '@/utils/colors';\nimport {numberWithCommas} from '@/utils/number';\nimport {Progress, Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n competitor: SingleCompetitorType;\n loading: boolean;\n}\n\nexport const SingleCompetitor = observer(({competitor, loading}: Props) => {\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n {competitor.url && addDefaultSrc(e)}\n height={20}\n width={20}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor.url}`} />} \n \n {competitor?.url}}>\n {competitor?.title}\n \n\n \n\n \n {`#${competitor?.position}`}\n \n\n {`-`}\n\n \n \n {competitor?.contentScore}\n }\n className={styles.progress}\n />\n \n \n\n {`-`}\n\n \n \n {`${numberWithCommas(competitor?.wordCount) || 0} words`}\n \n \n \n {/* {competitor?.url && urlValidationRegex.test(competitor?.url) ?\n {competitor?.url} : null} */}\n\n {/* {competitor?.metaDesc && competitor?.metaDesc.length > 90 ? competitor?.metaDesc.substring(0, 90) + '...' : competitor?.metaDesc} */}\n \n ;\n});\n","import {useEffect} from 'react';\nimport {SingleCompetitor} from './SingleCompetitor/SingleCompetitor';\nimport styles from './style.module.scss';\nimport css from '../../index.module.scss';\nimport {Typography, Spin, Select, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const TopRankingCompetitors = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {Option} = Select;\n const {Title} = Typography;\n const antIcon = \n Top Ranking Competitors {currentPage?.isAnalyzing && <Spin indicator={antIcon} style={{marginRight: '20px'}}/>}\n \n currentPage.openCompetingFocusTermsDrawer()}>\n Analyse Content\n \n \n\n {currentPage?.analytics?.competitorsData?.length ? \n \n handleOnSortChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n {currentPage?.analytics?.competitorsData?.filter(item => item.keyword === currentPage?.topRankingCompetitorActiveKw)[0]?.competitors?.map(competitor => {\n return competitor?.title && ;\n })}\n \n :\n !currentPage?.content?.targetKeywords?.length ? \n {/* \n {\n updatedButtonConf().map((item, idx) => {\n return \n {\n if (anyButtonClicked || item.disabled) return;\n item.callback();\n }} disabled={item.disabled}>\n {item.loading ? : \n ;\n })\n }\n ;\n});\n\nconst Wrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n`;\nconst SingleItem = styled.div<{hoverColor: string; anyButtonClicked?: boolean; disabled?: boolean}>`\n width: calc(50% - 5px);\n margin-bottom: 10px;\n transition: background-color .3s ease;\n background-color: #323539;\n cursor: ${p => p.anyButtonClicked || p.disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n padding: 5px;\n border-radius: 6px;\n font-size: 13px;\n opacity: ${p => p.disabled ? .4 : 1};\n\n &:hover {\n background-color: ${p => !p.anyButtonClicked && p.hoverColor};\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {FocusTermsTabs} from './FocusTermsAndQuestions/FocusTermsTabs';\nimport {HeaderSection} from './HeaderSection';\nimport {TermsAssistantRightSidebar} from './TermsAssistant/RightSidebar';\nimport {TopRankingCompetitors} from './TopRankingCompetitors/TopRankingCompetitors';\nimport {DrawersTriggers} from './DrawersTriggers';\nimport {useState} from 'react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Analytics = observer(({changeView}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const [viewSuggestionsOption, setViewSuggestionsOption] = useState(false);\n const [linksDropDownFromSuggestion, setLinksDropDownFromSuggestion] = useState<'links' | 'terms'>('links');\n\n return \n {!currentPage?.isLinkActive && }\n {currentPage?.isTaActive ? \n \n \n {!currentPage.focusTermsExpanded ? }\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst ContentContainer = styled.div`\n overflow-y: auto;\n height: 100%;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n\n","import React from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n isSubscriber: boolean;\n isCompetitorsTable: boolean;\n setFilteredCompetitorsData: React.Dispatch>;\n setCompetitors: React.Dispatch>;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n}\n\nexport const KeywordSelector = observer(({isSubscriber, isCompetitorsTable, setFilteredCompetitorsData, setActiveKw, setCompetitors, activeKw}: Props) => {\n const {Option} = Select;\n const {contentOptimizer: {currentPage}} = useStore('');\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n if (isCompetitorsTable) {\n setFilteredCompetitorsData(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n }\n };\n\n return \n \n Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ ;\n});\n\nconst KeywordDropdownWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {Progress, Tooltip, Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {Table} from '@/components/common-components/components/index';\nimport styles from './style.module.scss';\nimport {numberWithCommas} from '@/utils/number';\nimport {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {KeywordSelector} from './KeywordSelector';\nimport {useStore} from '@/store/root-store';\nimport {NextImg} from '@/utils/nextImg';\n\n\ninterface Props {\n store: CurrentPageStore;\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsTable = observer(({\n store,\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n allSchemasCount,\n nullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n }}} = useStore('');\n const [isSmallScreen, setIsSmallScreen] = useState(true);\n const [allowScroll, setAllowScroll] = useState(false);\n\n const onWindowResize = () => {\n setIsSmallScreen(window.innerWidth < 1441);\n setAllowScroll(window.innerWidth < 768);\n };\n\n useEffect(() => {\n onWindowResize();\n window.addEventListener('resize', onWindowResize);\n return () => {\n window.removeEventListener('resize', onWindowResize);\n };\n }, []);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const getProgressColor = (value: number, min: number, average: number, max?: number) => {\n if (value <= min) {\n return '#F44343';\n }\n if (value <= average && value > min) {\n return '#FF8536';\n }\n if (value > average) {\n if (max && value < max) {\n return '#BFE15E';\n }\n return '#52D477';\n }\n return '#52D477';\n };\n\n const reFormatSchemaType = value => {\n const outputString = value.replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');\n return outputString;\n };\n\n const handleTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...competitors];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n setCompetitors(data);\n } else {\n setCompetitors(store?.analytics?.competitorsData?.filter(item => item.keyword === activeKw)[0]?.competitors);\n }\n };\n\n useEffect(() => {\n if (selectedSchema?.value == 'all-schemas') {\n setFilteredCompetitorsData(competitors);\n } else if (selectedSchema?.value == 'no-schemas') {\n setFilteredCompetitorsData(competitors?.filter(item => item?.schema?.length == 0 || item?.schema == null));\n } else {\n const selectedSchemaValue = selectedSchema?.value;\n\n const filteredItems = [];\n\n competitors?.forEach(item => {\n if (item?.schema) {\n if (Array.isArray(item?.schema)) {\n item?.schema?.forEach(ele => {\n if (ele?.graph) {\n if (Array.isArray(ele?.graph)) {\n ele?.graph?.forEach(graphItem => {\n if (Array.isArray(graphItem?.type)) {\n if (graphItem?.type?.includes(selectedSchemaValue)) {\n filteredItems.push(item);\n }\n } else if (graphItem?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n } else if (ele?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n }\n });\n\n setFilteredCompetitorsData(filteredItems);\n }\n }, [selectedSchema]);\n\n const columns = [\n {\n title: () => #,\n dataIndex: 'position',\n key: 'position',\n sortField: 'position',\n width: 45,\n fixed: allowScroll ? false : 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return {record?.position};\n },\n },\n {\n title: () => {'PAGE / URL'.toUpperCase()},\n dataIndex: 'title',\n key: 'title',\n sortField: 'title',\n fixed: allowScroll ? false : 'left' as 'left',\n width: isSmallScreen ? 300 : 'auto',\n ellipsis: true,\n align: 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${record?.url}`} /> \n {record?.title}
\n {record?.url}}>\n \n {record?.title}\n {record?.url}\n \n ;\n },\n },\n {\n title: () => {'DR'.toUpperCase()},\n dataIndex: 'dr',\n key: 'dr',\n sortField: 'dr',\n sorter: (a: any, b: any) => a.dr - b.dr,\n align: 'center' as 'center',\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.dr ? record?.dr % 1 === 0 ? record?.dr : parseFloat(record?.dr.toFixed(2)) : 0;\n return \n \n {percent}\n ;\n },\n },\n {\n title: () => {'CS'.toUpperCase()},\n dataIndex: 'contentScore',\n key: 'contentScore',\n sortField: 'contentScore',\n align: 'right' as 'right',\n sorter: (a: any, b: any) => a.contentScore - b.contentScore,\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.contentScore ? record?.contentScore % 1 === 0 ? record?.contentScore : parseFloat(record?.contentScore.toFixed(2)) : 0;\n return \n {percent }}\n />\n ;\n },\n },\n {\n title: () => {'Schema'.toUpperCase()},\n dataIndex: 'schema',\n key: 'schema',\n sortField: 'schema',\n align: 'center' as 'center',\n width: 150,\n render: (_, record: SingleCompetitorType) => {\n let schemaLength = 0;\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaLength += 1 : Array.isArray(item?.graph) && item?.graph?.map(graphItem => graphItem?.type ? schemaLength += 1 : '');\n });\n\n const schemaItemsList = [];\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaItemsList.push(item) : Array.isArray(item?.graph) && item?.graph?.map(graphItem => schemaItemsList.push(graphItem));\n });\n return \n {record?.schema != null && record?.schema != undefined && Array.isArray(record?.schema) && record?.schema?.length != 0 ?\n <>\n \n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, 0, record?.schema[0])}>{reFormatSchemaType(String(record?.schema ? (record?.schema[0]?.graph ? record?.schema[0]?.graph[0]?.type : record?.schema[0]?.type) : '-'))} \n {schemaLength > 1 &&\n <>\n , \n {schemaItemsList?.map((item, idx) =>\n <>\n {idx == 0 ? '' :\n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, idx, item)}\n style={{width: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2D6CCA', cursor: 'pointer', paddingLeft: '20px'}}>\n {reFormatSchemaType(String(item?.type))} \n }\n ,\n )}}>\n +{schemaLength - 1} \n \n }\n \n : '-'\n }\n ;\n },\n },\n {\n title: () => <>{'int'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'internalLinks',\n key: 'internalLinks',\n sortField: 'internalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.internalLinks?.length - b?.internalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.internalLinks?.length == 0 ?\n {numberWithCommas(record?.internalLinks?.length) || '-' } :\n \n {record?.internalLinks?.length > 0 ? record?.internalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.internalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => <>{'ext'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'externalLinks',\n key: 'externalLinks',\n sortField: 'externalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.externalLinks?.length - b?.externalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.externalLinks?.length == 0 ?\n {numberWithCommas(record?.externalLinks?.length) || '-' } :\n \n {record?.externalLinks?.length > 0 ? record?.externalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.externalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => {'h1'.toUpperCase()},\n dataIndex: 'h1Count',\n key: 'h1Count',\n sortField: 'h1Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h1Count - b?.h1Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h1Count) || '-' };\n },\n },\n {\n title: () => {'h2'.toUpperCase()},\n dataIndex: 'h2Count',\n key: 'h2Count',\n sortField: 'h2Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h2Count - b?.h2Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h2Count) || '-' };\n },\n },\n {\n title: () => {'h3'.toUpperCase()},\n dataIndex: 'h3Count',\n key: 'h3Count',\n sortField: 'h3Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h3Count - b?.h3Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h3Count) || '-' };\n },\n },\n {\n title: () => {'Word Count'.toUpperCase()},\n dataIndex: 'wordCount',\n key: 'wordCount',\n sortField: 'wordCount',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.wordCount - b?.wordCount,\n width: 115,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.wordCount) || '-' };\n },\n },\n ];\n\n return \n \n \n \n \n Types of Schema Found: \n \n setSelectedSchema({idx: 'all-schemas', value: 'all-schemas'})}>All schemas | {allSchemasCount} \n setSelectedSchema({idx: 'no-schemas', value: 'no-schemas'})}>No schemas | {nullCount} \n {schemaTypesList?.map((item, idx) => {\n return setSelectedSchema({idx: `${idx}`, value: item?.value})} key={idx}>{reFormatSchemaType(String(item?.value))} | {item?.count} ;\n })}\n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst DRWrapper = styled.div`\n background-color: rgba(45, 108, 202, 0.07);\n display: flex;\n border-radius: 6px;\n align-items: center;\n justify-content: center;\n width: 55px;\n height: 32px;\n padding: 7px 12px 8px 12px;\n`;\n\nconst PageUrlWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst TypesSchemaFilterWrapper = styled.div`\n\n`;\n\nconst SchemaFilterTitle = styled.div`\n color: #4E5156;\n font-size: 14px;\n margin-left: 10px;\n margin-bottom: 10px;\n`;\n\nconst SchemaFilterWrapper = styled.div`\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n margin-left: 10px;\n width: 97%;\n overflow-x: auto;\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n`;\n\nconst SchemaFilter = styled.div<{selectedSchema?: boolean}>`\n min-width: fit-content;\n min-height: 28px;\n border-radius: 14px;\n background: ${p => p?.selectedSchema ? 'linear-gradient(0deg, rgba(127, 78, 173, 0.20) 0%, rgba(127, 78, 173, 0.20) 100%), #FFF' : '#FFFF'};\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n border: ${p => p?.selectedSchema ? '1px solid #7F4EAD' : '1px solid #E8E8E8'};\n display: flex;\n padding: 5px 10px 6px 10px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n\nconst LinksContainer = styled.div`\n max-height: 300px;\n overflow-y: auto;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n\nconst LinkWrapper = styled.div`\n width: auto;\n font-size: 12px;\n line-height: 14px;\n color: rgb(45, 108, 202);\n white-space: pre-line;\n overflow-wrap: anywhere;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 8px;\n`;\n\nconst StyledAnchor = styled.a`\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst BlueTextWithUnderline = styled.div`\n color: #2D6CCA;\n cursor: pointer;\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst ULStyled = styled.ul`\n padding-left: 0px;\n max-height: 160px;\n overflow-y: auto;\n padding: 5px;\n margin-bottom: 0;\n width: 200px;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n","import styled from 'styled-components';\nimport {faArrowLeft} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {urlValidationRegex2} from '@/constants/regex';\nimport moment from 'moment';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const CompetitorsDetail = observer(() => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n competitorSchemaObject,\n competitorTitle,\n competitorUrl,\n competitorSchemaGraphIdx,\n }}} = useStore('');\n\n const formats = [\n moment.ISO_8601,\n 'MM/DD/YYYY :) HH*mm*ss',\n ];\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const renderSchemaData = dataObj => {\n return <>\n \n {mainLebel && mainLebel != '0' ? mainLebel == 'type' ? `@${mainLebel}` : mainLebel : ''} \n {typeof mainValue !== 'object' ? {typeof mainValue == 'boolean' ? `${mainValue ? 'Yes' : 'No'}` : (\n urlValidationRegex2?.test(String(mainValue)) ? {String(mainValue)} : (\n moment(mainValue, formats, true)?.isValid() || mainLebel?.includes('date') ? moment(mainValue)?.utc()?.format('DD MMM YYYY') : `${mainValue}`\n )\n )} :\n renderSchemaData(mainValue)}\n ;\n })}\n \n \n ;\n };\n\n return <>\n setShowCompetitorTermsTableDetail(false)\n }>\n \n \n \n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitorUrl}`} />\n \n \n {competitorTitle}\n {competitorUrl}\n \n \n \n @context \n {competitorSchemaObject?.context ?? '-'} \n @graph \n {renderSchemaData(competitorSchemaObject?.graph ? competitorSchemaObject?.graph[competitorSchemaGraphIdx] : competitorSchemaObject)}\n \n \n ;\n});\n\nconst BackArrowContainer = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-left: 33px;\n margin-top: 37px;\n width: max-content;\n`;\n\nconst SchemaContainer = styled.div`\n width: 95%;\n margin-left: 30px;\n margin-top: 27px;\n min-height: 630px;\n background-color: white;\n border-radius: 14px;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n`;\n\nconst SchemaLabel = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 8px;\n`;\n\nconst SchemaValue = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n`;\n\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\n\nconst URL = styled.a`\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst SchemaHeader = styled.div`\n display: flex;\n align-items: center;\n margin-left: 30px;\n margin-top: 20px;\n`;\n\nconst SchemaPageTitle = styled.div`\n\n`;\n","import {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction} from 'react';\nimport {CompetitorsTable} from './CompetitorsTable';\nimport {useStore} from '@/store/root-store';\nimport {CompetitorsDetail} from './CompetitorsDetail';\n\ninterface Props {\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsDrawerTab = observer(({\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n setSchemaTypesList,\n allSchemasCount,\n setAllSchemasCount,\n nullCount,\n setNullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer: {\n currentPage: {\n showCompetitorTermsTableDetail,\n }}} = useStore('');\n\n return showCompetitorTermsTableDetail ? ranking : not ranking }\n {`for `}\n {keyword}\n \n {/* used {keyword} {score} times */}\n \n \n);\nconst focusTermsTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n);\nexport const CompetingFocusTermsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n const {contentOptimizer: {currentPage: {analytics, isCompetingFocusTermsDrawerOpen, closeCompetingFocusTermsDrawer, isOpeningKwSuggestionsFromContentResearch, setIsOpeningKwSuggestionFromContentResearch}}} = useStore('');\n const [selectedKeyword, setSelectedKeyword] = useState('');\n const [selectedCompTabKw, setSelectedCompTabKw] = useState('');\n const [isHovered, setIsHovered] = useState(false);\n const [maxElemHeight, setMaxElemHeight] = useState(0);\n const allRef = useRef(null);\n const keywordSuggestionsRef = useRef(null);\n const [activeTab, setActiveTab] = useState('1');\n\n const antIcon = {\n setActiveTab('1');\n setIsOpeningKwSuggestionFromContentResearch(false);\n closeCompetingFocusTermsDrawer();\n }}\n closeIcon={Competitor Content Analysis \n onTabChange(key)}>\n Top competitors {currentPage?.isAnalyzing && \n \n Relevant terms grid {currentPage?.isAnalyzing && \n \n \n Competing Focus Terms \n Check what focus terms your competitors are using \n \n \n exportSingleNode(allRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => (\n {i === 0 ? 'YOU' : i} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n \n Created From Scratch\n \n \n );\n }\n return (\n \n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n CONTENT SCORE\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.contentScores?.map((score, i) => (\n {percent}}\n />\n ))}\n \n
\n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item?.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}\n \n \n Keyword suggestions {currentPage?.isAnalyzing && \n \n \n {/* Keywords Suggestions */}\n Check out what keywords your competitors are using \n \n \n exportSingleNode(keywordSuggestionsRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => {\n return (\n \n \n \n {x.url}\n \n \n Content Score: \n {x.contentScore}\n \n \n Word Count: \n {x.wordCount}\n \n \n }\n key={x?.url}\n >\n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n
\n \n \n TARGET KEYWORD\n USAGE\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.keywordSuggestionsUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: score ? '#2AC155' : '#F44343'}}> \n \n ))}\n \n ))}\n \n \n \n \n );\n});\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: 20px;\n color: #121212;\n line-height: 28px;\n`;\n\nconst TitleStyled = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n line-height: normal;\n margin: 0 0 15px 30px;\n`;\n\nconst Subtitle = styled.div`\n font-size: 16px;\n line-height: 24px;\n color: #4E5156;\n`;\n\nconst SectionHeader = styled.div`\n background: #e2e2e5;\n border-radius: 3px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Square = styled.div<{isHovered: boolean}>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\nconst SelectStyled = styled(Select)`\n width: 100%;\n\n .ant-select-arrow {\n color: #121212;\n }\n`;\n\nconst Site = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n width: auto;\n display: block;\n align-items: left;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst IsNotRanking= styled.span`\n padding: 2px 7px;\n background-color: #F44343;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import {useEffect} from 'react';\nimport {Form, Select, Spin} from 'antd';\nimport {\n Button,\n CommonInput,\n} from '@/components/common-components/components';\nimport styles from './style.module.scss';\n\nimport {useState} from 'react';\nimport {languages} from '@/components/dashboard/pages/content-ideas/drawer/languages';\nimport Flag from '@/components/common-components/components/flag';\nimport {formatCountryCode} from '@/components/dashboard/pages/content-ideas/drawer/languageUtil';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport {observer} from 'mobx-react';\nimport {LoadingOutlined} from '@ant-design/icons';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_CONTENT_IDEAS_GENERATE} from '@/constants/events';\nimport {useStore} from '@/store/root-store';\n\ninterface Props {\n store: ContentIdeasStore;\n pageId: any;\n drawerVisible: boolean;\n}\n\nexport const NewContentIdeaForm = observer(({store, pageId, drawerVisible}: Props) => {\n const {\n settings: {\n customer: {\n getCustomerQuota,\n },\n },\n } = useStore('');\n\n\n const usaCode = languages.find(lang => lang.code == 'en');\n\n\n const antIcon = Need some inspiration? Here you can generate unlimited article ideas on any topic you can think of.
\n\n \n \n );\n});\n","import {useState, useEffect} from 'react';\nimport styles from './style.module.scss';\nimport {faDownload} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n Button,\n} from '@/components/common-components/components';\nimport {CopyOutlined} from '@ant-design/icons';\n\nimport {Divider, Tooltip} from 'antd';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {SCA_PAGE_CONTENT_IDEA_COPY, SCA_PAGE_CONTENT_IDEA_DOWNLOAD} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {useTranslation} from 'next-i18next';\nimport parse from 'html-react-parser';\n\ninterface Props {\n idea: string;\n}\n\nexport const SingleContentIdea = ({idea}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [convertedText, setConvertedText] = useState(idea);\n\n const {t} = useTranslation('landing-page-optimizer');\n\n useEffect(() => {\n // Removing the leading space from string\n const newLineIndex = idea?.search('\\n');\n const textWithoutLeadingSpace = idea?.slice(0, newLineIndex + 1) + idea?.slice(newLineIndex + 2);\n const firstTitle = idea?.slice(0, newLineIndex + 1);\n const result = textWithoutLeadingSpace.replace(firstTitle, '' + firstTitle + '');\n\n setConvertedText(result);\n }, [idea]);\n\n\n const downloadFileToTxt = () => {\n const element = document.createElement('a');\n const file = new Blob([idea], {type: 'text/plain'});\n element.href = URL.createObjectURL(file);\n const breakFileName = idea.split(' ').length;\n const fileName = breakFileName > 4 ? idea.split(' ').slice(0, 4).join('-') : idea.split(' ').slice(0, breakFileName).join('-');\n element.download = `${fileName}`;\n document.body.appendChild(element);\n element.click();\n };\n\n return (\n \n \n {convertedText && parse(convertedText.trim())}\n
\n {\n downloadFileToTxt();\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_DOWNLOAD, {\n 'description': 'Content idea downloaded',\n });\n }}/>\n {\n navigator.clipboard.writeText(idea);\n setCopySuccess(true);\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_COPY, {\n 'description': 'Content idea copied',\n });\n }}>\n \n \n \n \n );\n};\n","// import {useState} from 'react';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport CsvDownloader from 'react-csv-downloader';\nimport {Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleContentIdea} from './SingleContentIdea';\nimport {ExportOutlined} from '@ant-design/icons';\nimport {Button} from '@/components/common-components/components';\n\ninterface Props {\n store: ContentIdeasStore;\n}\n\nexport const ContentIdeas = observer(({store}: Props) => {\n const csvModel = store?.wordsArray.map(item => ({\n title: item.split('\\n')[0],\n text: item.split('\\n')[1],\n }));\n\n const csvColumns = [\n {\n id: 'title',\n displayName: 'Title',\n },\n {\n id: 'text',\n displayName: 'Text',\n },\n ];\n return <>\n {store?.wordsArray.length ? \n {`${store?.wordsArray?.length} ideas generated for \"${store?.keyword}\" `}\n \n \n \n
: null}\n {store?.wordsArray && store?.wordsArray.map((idea, idx) => {\n return {\n contentIdeas.clearContentIdeas();\n setDrawerVisible(false);\n currentPage.setIsOpenContentGeneratorDrawer(false);\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={styles.contentIdeasDrawer}\n afterVisibleChange={visible => {\n if (visible) setDrawerVisible(true);\n }}\n >\n \n \n Content Helper\n \n \n \n \n \n \n );\n});\n","import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip, Spin} from 'antd';\nimport styles from './style.module.scss';\nimport {faCheck, faPlus, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport classNames from 'classnames';\n\ninterface Props {\n keyword: string;\n isIncluded?: boolean;\n}\n\nexport const SimilarKeyword = observer(({keyword, isIncluded}: Props) => {\n const {\n OverviewPage: {\n addToLoadingArray,\n loadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}, getCustomerQuota}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n const antIcon = \n {keyword ? keyword : '-'}\n \n \n\n {loadingArray && loadingArray.includes(keyword) ?\n \n \n Remove\n :\n // adding a check to disable button if total target kw limit is reached\n currentPage?.feTargetKeywords?.length < 15 ?\n onAddKeywordFinish()}>\n \n \n \n\n }\n\n \n ;\n});\n","import {useEffect, useState, useCallback} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {\n Drawer,\n Progress,\n Tooltip, Select} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport styled from 'styled-components';\nimport {formatNumber, numberWithCommas} from '@/utils/number';\nimport {Table, BarChartColumn, SkeletonRingLoader, Pagination, SkeletonHorizontalLoaderGray, Button} from '@/components/common-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {EChartOption} from 'echarts';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {getProgressColor} from '@/utils/colors';\nimport {faArrowUp} from '@fortawesome/pro-regular-svg-icons';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport numeral from 'numeral';\nimport Flag from '@/components/common-components/components/flag';\nimport {SimilarKeyword} from './SimilarKeyword';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const ContentResearchDrawer = observer(() => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const {\n countries: {getSpecificCountryByCode},\n OverviewPage: {\n isContentResearchDrawerOpen,\n loading,\n keywordDetail,\n closeContentResearchDrawer,\n getKeywordDetail,\n removeFromLoadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const countryName = getSpecificCountryByCode(keywordDetail?.countryCode);\n\n const [activeKw, setActiveKw] = useState('');\n const [similarKeywordsPageNumber, setSimilarKeywordsPageNumber] = useState(1);\n const [similarKeywordsPageSize] = useState(8);\n const [similarKeywordsData, setSimilarKeywordsData] = useState([]);\n const [similarKeywordsList, setSimilarKeywordsList] = useState([]);\n\n const [topCompetitorsData, setTopCompetitorsData] = useState([]);\n const [rankingPotentialData, setRankingPotentialData] = useState([]);\n\n const {Option} = Select;\n\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n getKeywordDetail(currentPage?.content?.targetKeywords?.filter(item => item.keyword === value)[0]?.id);\n };\n\n\n /* SIMILAR KEYWORDS TABLE UPDATE START */\n const handleFilterRenderData = useCallback((dataArray: any, pageNumber: number, pageSize: number) => {\n const targetKwArray = currentPage?.content?.targetKeywords && currentPage?.content?.targetKeywords.length ? toJS(currentPage.content.targetKeywords).map(item => {\n return JSON.stringify({\n keyword: item.keyword,\n countryCode: item.countryCode,\n locationId: item.locationId,\n location: item.location,\n });\n }) : [];\n\n let similarKeywordsFormattedData = [];\n if (dataArray.length && targetKwArray?.length ) {\n const updatedData = toJS(dataArray).map(item => {\n return {\n ...item,\n isKwIncluded: targetKwArray.includes(JSON.stringify({\n keyword: item.keyword,\n countryCode: currentPage.content.countryCode,\n locationId: currentPage.content.locationId,\n location: currentPage.content.location,\n })),\n };\n });\n\n\n similarKeywordsFormattedData = updatedData;\n } else {\n similarKeywordsFormattedData = dataArray;\n }\n setSimilarKeywordsData(similarKeywordsFormattedData.slice((pageNumber - 1) * pageSize, ((pageNumber - 1) * pageSize) + pageSize));\n }, []);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n const kwArray = [...(currentPage?.content?.targetKeywords ?? [])].map(kw => kw.keyword);\n removeFromLoadingArray(kwArray);\n handleFilterRenderData([...keywordDetail.similarKeywords], similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n }, [[...(currentPage?.content?.targetKeywords ?? [])].length, activeKw, toJS(keywordDetail?.similarKeywords)?.length, handleFilterRenderData, keywordDetail?.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize]);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n setSimilarKeywordsList(keywordDetail.similarKeywords);\n }\n }, [toJS(keywordDetail?.similarKeywords)?.length, toJS(keywordDetail?.similarKeywords), activeKw]);\n\n\n const onPaginationChange = async (pageNumber: number, pageSize: number) => {\n setSimilarKeywordsPageNumber(pageNumber);\n handleFilterRenderData(keywordDetail.similarKeywords, pageNumber, pageSize);\n };\n\n const handleIssueTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...similarKeywordsList];\n\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n handleFilterRenderData(data, similarKeywordsPageNumber, similarKeywordsPageSize);\n } else {\n handleFilterRenderData(keywordDetail.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n };\n /* SIMILAR KEYWORDS TABLE UPDATE END */\n\n /* TOP COMPETITORS TABLE UPDATE START */\n useEffect(() => {\n if (keywordDetail?.competitors?.length > 0) {\n setTopCompetitorsData(keywordDetail.competitors);\n }\n }, [toJS(keywordDetail?.competitors)?.length, activeKw]);\n\n\n const handleTopCompetitorsTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...topCompetitorsData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setTopCompetitorsData(data);\n } else {\n setTopCompetitorsData(keywordDetail?.competitors);\n }\n };\n /* TOP COMPETITORS TABLE UPDATE END */\n\n /* RANKING POTENTIAL TABLE UPDATE START */\n useEffect(() => {\n const relevanceData = [];\n relevanceData?.push({\n competition: keywordDetail?.typicalTop10 && Object.keys(keywordDetail?.typicalTop10)[0],\n contentScore: keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n dr: keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n wordCount: keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n readAbility: keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n });\n\n if (relevanceData.length > 0) {\n setRankingPotentialData(relevanceData);\n }\n }, [\n activeKw, keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n ]);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n\n const handleRankingPotentialTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...rankingPotentialData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setRankingPotentialData(data);\n } else {\n setRankingPotentialData(keywordDetail?.competitors);\n }\n };\n /* RANKING POTENTIAL TABLE UPDATE END */\n\n const columns = [\n {\n title: 'AVERAGE PER COMPETION',\n dataIndex: 'competition',\n key: 'competition',\n width: 180,\n align: 'left' as 'left',\n render: (_, data) => {data?.competition || '-'},\n },\n {\n title: 'CONTENT SCORE',\n dataIndex: 'contentScore',\n sorter: true,\n sortField: 'contentScore',\n width: 100,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sorter: true,\n sortField: 'dr',\n width: 80,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n width: 110,\n align: 'center' as 'center',\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readAbility',\n dataIndex: 'readAbility',\n align: 'center' as 'center',\n width: 110,\n render: (_, data) => {\n return {data?.readAbility ? data?.readAbility : '-'};\n },\n\n },\n ];\n\n const topCompetitorColumns = [\n {\n title: 'SITE / URL',\n dataIndex: 'hostname',\n key: 'hostname',\n width: 300,\n align: 'left' as 'left',\n fixed: 'left' as 'left',\n render: (_, data) => {\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sortField: 'dr',\n sorter: true,\n width: 60,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n align: 'center' as 'center',\n width: 100,\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readability',\n dataIndex: 'readability',\n align: 'center' as 'center',\n width: 170,\n render: (_, data) => {\n return {data?.readability ? data?.readability : '-'};\n },\n\n },\n ];\n\n const squareTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n );\n\n const SimilarKeywordConfig = [\n {\n title: 'KEYWORD',\n dataIndex: 'keyword',\n key: 'keyword',\n align: 'left' as 'left',\n width: 240,\n render: (_, record) => {\n return ();\n },\n },\n {\n title: 'TREND',\n dataIndex: 'histSv',\n align: 'center' as 'center',\n key: 'histSv',\n width: 70,\n render: (series: EChartOption.Series[]) => {\n const formatSeries = {\n data: series,\n itemStyle: {color: '#7f4ead'},\n type: 'bar',\n };\n return {\n closeContentResearchDrawer();\n }}\n closeIcon={\n Content Research\n \n \n \n Based on Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n \n\n {loading ? :\n {keywordDetail?.countryCode ? :\n \n KD: 75 ? '#F44343' : keywordDetail?.kd < 76 && keywordDetail?.kd > 50 ? '#e4a469' : keywordDetail?.kd < 51 && keywordDetail?.kd > 25 ? '#bfe15e' : '#1d754e' : '#696777'}}>•{keywordDetail?.kd || '-'}\n }\n {loading ? : SV: {numeral(keywordDetail?.sv).format('0.[0][a]')}}\n\n {loading ? :\n Total Search Results: {keywordDetail?.totalSearchResults ? numeral(keywordDetail?.totalSearchResults).format('0.[0][a]') : '0'}}\n \n \n \n \n Ranking Potential\n {keywordDetail?.rankingPotential ?\n \n \n {keywordDetail?.rankingPotential}\n : null }\n data.date) : [],\n type: 'category',\n show: true,\n axisLabel: {\n interval: 10,\n formatter: label => {\n const date = moment(label);\n return `{month|${date.format('MMM')}}-{year|${date.format('YY')}}`;\n },\n rich: {\n month: {\n color: '#77757D',\n lineHeight: 15.54,\n },\n year: {\n color: '#77757D',\n fontSize: 12,\n lineHeight: 12.95,\n },\n },\n },\n splitLine: {\n show: false,\n },\n },\n yAxis: {\n type: 'value',\n show: true,\n axisLabel: {\n formatter: label => {\n return `${formatNumber(label)}`;\n },\n },\n splitLine: {\n lineStyle: {\n color: '#E8E8E8',\n type: 'dashed',\n width: 1},\n show: true,\n },\n },\n grid: {\n height: '70%',\n left: '10%',\n top: '9%',\n },\n series: [\n {\n data: keywordDetail?.svTrend?.map(data => data.volume) || [],\n type: 'line',\n areaStyle: {},\n symbolSize: 2,\n symbol: '',\n },\n ],\n }} />\n }\n\n \n \n\n\n \n \n Common Citations\n {loading ? :\n \n {keywordDetail?.commonCitations?.length ? keywordDetail?.commonCitations?.map((citation, index) => {\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc?.length > 70 ?\n \n {citation?.metaDesc.substring(0, 70) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by:\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp?.metaDesc?.length > 70 ? serp?.metaDesc?.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 9 && (\n {`+${citation?.serps?.length - 9}`}\n )}\n \n : null}\n\n \n ;\n }) : No data available}\n {/* return \n \n \n \n \n Top competitor content \n\n \n \n Similar keywords \n\n \n {\n closeContentResearchDrawer();\n currentPage.setIsOpeningKwSuggestionFromContentResearch(true);\n currentPage.openCompetingFocusTermsDrawer();\n }}>View all keywords\n \n\n \n \n\n \n \n Relevant terms used by Competitors \n\n \n {loading ? : <>\n \n COMPETITOR RANK\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n Created From Scratch\n \n );\n }\n return (\n \n \n {/* {x?.hostname} */}\n \n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {keywordDetail && keywordDetail?.termsGrid?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n \n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}}\n \n \n ;\n});\n\nconst PageTitle = styled.div`\n font-weight: 600;\n margin-bottom: 10px;\n margin-left: 40px;\n font-size: 20px;\n`;\nconst Header = styled.div`\n display: flex;\n margin-bottom: 10px;\n padding-left: 40px;\n`;\n\nconst TitleContainer = styled.div`\nheight: 60px;\nbackground: #2D2F34;\npadding: 18px;\nborder-radius: 8px 8px 0px 0px;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n line-height: 22px;\n`;\n\nconst SectionHeader = styled.div`\n background: #F7F7F8;\n border-radius: 3px;\n margin-right: 4px;\n margin-left: 4px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst MiddleContainer = styled.div`\n display: flex;\n padding: 0 40px 30px 40px;\n`;\n\nconst Square = styled.div<{ isHovered: boolean }>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\n\nconst Site = styled.div`\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n font-size: 12px;\n color: #2D6CCA;\n width: 40px;\n display: flex;\n align-items: center;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import KeywordDetailContent from '@/components/dashboard/pages/keyword-researcher-v2/keyword-detail-drawer-content';\nimport {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react-lite';\n\nexport const KeywordsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n\n return {\n // scroll to related keywords table automaticaly\n if (visible) {\n if (currentPage?.isDrawerFromCa) {\n document.getElementById('SuggestedKeywordTableId')?.scrollIntoView({block: 'center'});\n }\n }\n }}\n onClose={() => {\n currentPage.setIsDrawerFromCa(false);\n currentPage.setIsOpenKeywordDrawer(false);\n currentPage.setActiveTargetKw('');\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={'drawerCloseIcon'}\n closeIcon={ changeView()}>\n ;\n};\n\nconst TechnicalsSwitcherContainer = styled.div`\n display: flex;\n margin-bottom: 20px;\n font-size: 12px;\n align-items: center;\n cursor: pointer;\n`;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faRotateRight} from '@fortawesome/pro-regular-svg-icons';\n\nexport const PageSpeedIndex = observer(() => {\n const secondAntIcon = \n \n Page Speed Index:\n {!currentPage?.isWordCountLoading ? <>\n {generateDotWithColor(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.status) }\n {!isNil(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score) ? <>{Math.round(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score * 100)}/100 : null}\n :\n }\n \n\n\n \n Last Fetch: \n {!currentPage?.content?.updatedAt ? : moment(currentPage?.content?.updatedAt).format('DD MMM YYYY')} \n refetchArticle(currentPage?.content?.uuid) }/>\n\n \n ;\n});\n\n\nconst Container = styled.div`\n cursor: default;\n`;\nconst SpeedIndexContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n margin-top: 5px;\n`;\nconst LastFetchContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n`;\nconst SpeedIndexDot = styled.div`\n border-radius: 2px;\n height: 4px;\n margin-left: 8px;\n margin-right: 3px;\n width: 4px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {Progress, Spin, Tooltip} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styled from 'styled-components';\nimport {getProgressColor} from '@/utils/colors';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {PageSpeedIndex} from '../PageSpeedIndex';\nimport {LoadingOutlined} from '@ant-design/icons';\n\n\nexport const TechnicalScore = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {t} = useTranslation('common');\n\n const antIcon = \n {!currentPage.isScoreLoading ? (currentPage?.analysis?.technicalScore ?? '-') : \n \n {t('technical-score')} \n \n \n \n\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n height: 30px;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst TitleAndWordCount = styled.div`\n margin-left: 10px;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {routes} from '@/utils/const';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faFileChartColumn} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Checkbox as AntdCheckbox, Form, Popover, Spin, Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {TechnicalsViewSwitcher} from '../../Common/ViewSwitcher';\nimport {TechnicalScore} from './TechnicalScore';\nimport {Checkbox} from '@/components/common-components/v2';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const HeaderSection = observer(({changeView}: Props) => {\n const [auditLoader, setAuditLoader] = useState(false);\n const [onPageAuditPopoverVisible, setOnPageAuditPopoverVisible] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {contentAuditStore: {loadContentAudit, setNewRecordId}} = useStore('');\n\n const antIconSecond = \n \n \n Select 1 to 3 Target Keywords \n \n ({\n validator(_, value) {\n const existingValues = form.getFieldsValue(true);\n if (!value || !existingValues['target-keywords']?.length) return Promise.reject(new Error('Please select at least 1 Target Keyword.'));\n if (existingValues['target-keywords']?.length && existingValues['target-keywords']?.length > 3) return Promise.reject(new Error('You can use maximum of 3 Target Keywords.'));\n\n return Promise.resolve();\n },\n })]}>\n \n \n {currentPage?.getUniqueKeywords?.map((kw, idx) => {\n return \n {kw}\n ;\n })}\n \n \n \n \n setOnPageAuditPopoverVisible(false)}>Cancel \n \n \n \n \n \n }>\n setOnPageAuditPopoverVisible(!onPageAuditPopoverVisible)} color='neonBlue' variant='ghost' mode='dark'>\n {auditLoader ? Run Complete Onpage Audit \n \n : \n \n {auditLoader ? Run Complete Onpage Audit \n \n }\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TopSeactionContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst RunPageAuditBtn = styled(Button)`\n color: #4881f0 !important;\n cursor: pointer;\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst BtnText = styled.div`\n margin-left: 5px;\n display: inline-block;\n color: #34AEF3 !important;\n font-size: 12px;\n\n // &:hover {\n // text-decoration: underline;\n // }\n`;\n\nconst PopoverWrapper = styled.div`\n\n`;\n\nconst PopoverTitle = styled.div`\n font-weight: 600;\n margin-bottom: 20px;\n`;\nconst PopoverKwContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst FormStyled = styled(Form)`\n .ant-checkbox-wrapper + .ant-checkbox-wrapper {\n margin-left: 0px;\n }\n\n .ant-checkbox-wrapper {\n line-height: 22px !important;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n`;\n\nconst PopoverBtnContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\n","import {CaretUpFilled} from '@ant-design/icons';\nimport {Col, Collapse, Row} from 'antd';\nimport {Pagination, Checkbox, Tooltip} from 'antd';\nimport classNames from 'classnames';\nimport {ReactNode, useEffect, useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport styles from './style.module.scss';\nimport {ChevronDown, ChevronUp} from 'react-feather';\nimport classnames from 'classnames';\nimport {faFilter, faCaretDown, faCaretUp} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {NextImg} from '@/utils/nextImg';\n\nimport {toJS} from 'mobx';\ninterface filters {\n label: string;\n checked: boolean;\n disabled?: boolean;\n disabledTooltip?: string;\n onChange: () => void;\n}\n\ninterface columnTitle {\n title?: string;\n sorter?: boolean;\n sortKey?: string | number;\n}\n\ninterface Props {\n className?: string;\n icon?: ReactNode;\n title?: string;\n description?: string | ReactNode;\n descriptionColor?: string;\n colTitle1?: string;\n colTitle2?: columnTitle;\n colTitle3?: string;\n colTitle4?: string;\n data?: any;\n dataRenderer?: any;\n pageSize?: any;\n footer?: ReactNode;\n isCollapse?: boolean;\n defaultActive?: boolean;\n filters?: filters[];\n plan?: any;\n warningBar?: ReactNode;\n}\n\nexport const AnalyticsCollapseCard = ({\n className,\n icon,\n title,\n description,\n descriptionColor,\n colTitle1,\n colTitle2 = {\n title: null,\n sorter: false,\n sortKey: null,\n },\n colTitle3,\n colTitle4,\n data,\n dataRenderer,\n pageSize,\n footer,\n isCollapse = true,\n defaultActive = false,\n filters,\n plan = true,\n warningBar,\n}: Props) => {\n const [pageNumber, setPageNumber] = useState(1);\n const [checkData, setCheckData] = useState(false);\n const [isFilterOpened, setIsFilterOpened] = useState(false);\n const [sortOrder, setSortOrder] = useState('');\n const [formatData, setFormatData] = useState(null);\n const [activeKey, setActiveKey] = useState(['']);\n const {t} = useTranslation('common');\n\n const getData = () => {\n if (pageSize) {\n return formatData?.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\n }\n return formatData;\n };\n useEffect(() => {\n if (getData()?.length > 0 || formatData === undefined || footer) {\n setCheckData(isCollapse);\n }\n }, [getData]);\n\n useEffect(() => {\n let newData = [];\n if (data) {\n newData = data.map(item => {\n return toJS(item);\n });\n }\n setFormatData(newData);\n }, [JSON.stringify(data)]);\n\n useEffect(() => {\n if (defaultActive) {\n setActiveKey([title]);\n }\n }, [defaultActive]);\n\n const sortData = (sortBy: string | number) => {\n const formatArray = [...data];\n if (sortOrder === '') {\n setSortOrder('desc');\n setFormatData(formatArray.sort((a, b) => {\n if (b[sortBy] < a[sortBy]) return -1;\n }));\n } else if (sortOrder === 'desc') {\n setSortOrder('asc');\n setFormatData(formatArray.sort((a, b) => {\n if (a[sortBy] < b[sortBy]) return -1;\n }));\n } else if (sortOrder === 'asc') {\n setSortOrder('');\n setFormatData(data);\n }\n };\n\n const changeActiveKey = key => {\n setActiveKey(key);\n };\n\n\n return (\n isCollapse ? (\n \n \n {icon}\n {title}\n \n \n {description}\n \n \n }\n >\n \n {warningBar && warningBar}\n {/* if we have 4 columns */}\n {colTitle3 && colTitle4 ?\n \n
:\n \n
\n }\n\n {getData()?.map((x, i) => dataRenderer(x, i))}\n \n {pageSize && (pageSize < data?.length) && (\n <>\n\n setPageNumber(pageNumber)}\n disabled={!plan}\n />\n \n )}\n {filters && filters.length >= 1 ?\n ( setIsFilterOpened(!isFilterOpened)}\n className={styles.filters}>\n {/* }\n \n \n {\n isFilterOpened && (\n e.stopPropagation()}>\n \n {filters.map((filter, idx) => (\n filter.disabled ?\n \n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n :\n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n ))\n }\n \n \n )\n }\n ) : null }\n \n {footer}\n \n \n );\n};\n","import React, {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react-lite';\nimport {Modal} from '@/components/common-components';\nimport {Divider} from 'antd';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n visible: boolean;\n schema: any;\n setShowModal: Dispatch>;\n}\n\nexport const SchemaModal = observer(({visible, schema, setShowModal}: Props) => {\n const dataList = schema ? JSON.parse(schema) : [];\n const data = (typeof (dataList) === 'object' && Object.keys(dataList).length === 0) ? [] : dataList?.find(item => item.graph) || [];\n const [expanded, setExpanded] = useState(false);\n const dataForDisplay = expanded ? data?.graph : data?.graph?.slice(0, 1);\n return (\n setShowModal(false)}\n footer={ setShowModal(false)}>Close }>\n \n\n \n Schema.org \n {<>\n @context \n {data?.context ?? '-'} \n @graph \n {dataForDisplay?.map((item, index) => {\n return <>#{index + 1} \n \n {`${x[0]}`} \n {`${x[0]}` == 'potentialAction' ? '' : (`${x[0]}` == 'url' ? {`${x[1]}`} :\n {`${typeof(x[1])!=='object' ? x[1] : '-'}`} )}\n {`${x[0]}` == 'potentialAction' ? item.potentialAction?.length > 0 && item?.potentialAction?.map((z, id) => {\n return \n {z?.type} \n {z?.queryInput} \n \n ;\n }) : ''}\n ;\n })}\n \n ;\n })}\n {data?.graph?.length > 1 ? \n setExpanded(!expanded)}>\n {expanded ? 'Hide schema' : 'Show full schema'}\n : ''}\n }\n \n \n \n\n );\n});\n\nconst MainContainer = styled.div`\n width: 100%;\n padding: 25px;\n background: #FFFFFF;\n`;\n\nconst Title = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\nconst Subtitle = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 10px;\n word-break: break-word;\n`;\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\nconst URL = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst ModalContentWrapper = styled.div`\n max-height: 70vh;\n overflow-y: auto;\n margin-top: 10px;\n // border: 1px solid #E8E8E8;\n // border-radius: 8px;\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n`;\n","import css from '../../index.module.scss';\nimport {\n Typography,\n Row,\n Col,\n Popover,\n Tooltip,\n} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport {AnalyticsCollapseCard} from '../../Common/AnalyticsCollapseCard';\nimport styles from '../style.module.scss';\nimport {useTranslation} from 'next-i18next';\nimport {getStatusColor} from '@/utils/colors';\nimport {NextImg} from '@/utils/nextImg';\n\nimport classNames from 'classnames';\nimport {Code, ExternalLink, Image,\n List,\n Video} from 'react-feather';\nimport {WarningMiniBar} from '@/components/common-components/components';\nimport {\n ButtonLink,\n} from '@/components/common-components/components';\nimport {Button} from '@/components/common-components/v2';\nimport {useState} from 'react';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {observer} from 'mobx-react-lite';\nimport {SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, SCA_PAGE_IMAGES_SHOW_MISSING_ALT, SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN} from '@/constants/events';\nimport {SchemaModal} from '../SchemaModal';\nimport {toJS} from 'mobx';\nimport {linkgraphDomain} from '@/utils/const';\n\n\nexport const TechnicalsData = observer(() => {\n const [showMissingAltText, setShowMissingAltText] = useState(false);\n const [isActiveInternalBrokenLinks, setIsActiveInternalBrokenLinks] = useState(false);\n const [isActiveExternalBrokenLinks, setIsActiveExternalBrokenLinks] = useState(false);\n const [showSchemaModal, setShowSchemaModal] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const {Title} = Typography;\n const {t} = useTranslation('common');\n\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/icon/broken-image.svg';\n // };\n\n const translateWord = (status: string) => {\n switch (status) {\n case 'Good':\n return t('good');\n case 'Average':\n return t('average');\n case 'Bad':\n return t('bad');\n case 'Missing':\n return t('missing');\n case 'Not Included':\n return 'Not Included';\n default:\n return '';\n }\n };\n\n const internalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveInternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.internal?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveInternalBrokenLinks(!isActiveInternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveInternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken internal links',\n });\n }\n },\n }];\n\n const uiFormatImageSize = (size: string) => {\n if (size) {\n let returnSize = null;\n const sizeArray = size.split('x');\n returnSize = {`x ${sizeArray[0]}`}
{sizeArray[1]};\n return returnSize;\n } else {\n return '-';\n }\n };\n\n const brokenHeaders = {currentPage?.analysis?.brokenHeaders?.map((item, i) => {\n return {item.type}{(i + 1) < currentPage?.analysis?.brokenHeaders?.length && `, `};\n })}{translateWord(currentPage?.analysis?.status?.headers)};\n\n const getMissingAltText = () => {\n if (showMissingAltText && currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '');\n } else if (currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img;\n }\n };\n\n const getMissingAltTotal = () => {\n if (!currentPage?.analysis?.images?.img?.length) return null;\n if (currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length;\n } else {\n return null;\n }\n };\n\n const generateInternalLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getInternalBrokenLinksCount || currentPage?.analysis?.getInternalBrokenLinksCount === 0) {\n const msg = currentPage?.analysis?.getInternalBrokenLinksCount > 1 || currentPage?.analysis?.getInternalBrokenLinksCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getInternalBrokenLinksCount} ${msg}`);\n if (currentPage?.analysis?.getInternalBrokenLinksCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getInternalRedirectsCount || currentPage?.analysis?.getInternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getInternalRedirectsCount > 1 || currentPage?.analysis?.getInternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getInternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.internal?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const imagesFilter = [{\n label: 'Show only missing alt text',\n checked: showMissingAltText,\n disabled: currentPage?.analysis?.images?.img?.filter(image => !image.alt || image.alt === '')?.length == 0,\n onChange: () => {\n setShowMissingAltText(!showMissingAltText);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_IMAGES_SHOW_MISSING_ALT, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for images with missing alt text',\n });\n }\n },\n }];\n\n const externalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveExternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.external?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveExternalBrokenLinks(!isActiveExternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken external links',\n });\n }\n },\n }];\n\n const generateExternallLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getExternalBrokenCount || currentPage?.analysis?.getExternalBrokenCount === 0) {\n const msg = currentPage?.analysis?.getExternalBrokenCount > 1 || currentPage?.analysis?.getExternalBrokenCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getExternalBrokenCount} ${msg}`);\n if (currentPage?.analysis?.getExternalBrokenCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getExternalRedirectsCount || currentPage?.analysis?.getExternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getExternalRedirectsCount > 1 || currentPage?.analysis?.getExternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getExternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.external?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const getExternalLinks = () => {\n if (isActiveExternalBrokenLinks && currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const getInternalLinks = () => {\n if (isActiveInternalBrokenLinks && currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const displayStatusCode = (statusCode: number) => {\n if (statusCode) {\n if (statusCode >= 200 && statusCode < 300) {\n return {statusCode};\n } else if (statusCode >= 300 && statusCode < 400) {\n return {statusCode};\n } else if (statusCode >= 400) {\n if (statusCode === 429) {\n return {statusCode};\n } else {\n return {statusCode};\n }\n }\n } else {\n return 'N/A';\n }\n };\n\n const displayFollowCode = (followCode: string) => {\n if (followCode) {\n if (followCode === 'nofollow') {\n return 'NF';\n } else {\n return DF;\n }\n } else {\n return '-';\n }\n };\n\n return <>\n \n \n \n {t('head')}\n \n {currentPage?.analysis?.metaSummary?.map(meta => {\n return (\n \n {meta.value}\n {meta.suggestion}\n \n )}\n />\n );\n })}\n \n \n {t('rich-media-tags')}\n \n \n {header.values.length && header.values.map((heading, i) => {\n return {`<${header.type}> `}\n {heading}\n {` `};\n })}\n \n }\n >\n \n
\n : \n
: \n
;\n }}\n />\n \n addDefaultSrc(e)}\n />\n \n \n {\n navigator.clipboard.writeText(image.src);\n }}>{image.src}\n \n ) : '-'}\n {image.alt || '-'}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n setShowSchemaModal(true)}>\n {t('view-schema-markups')}\n \n \n ) : (\n \n {t('view-schema-markups')}\n \n )\n }\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n \n {\n navigator.clipboard.writeText(js.src);\n }}>{js.src}\n \n )}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n ;\n});\n","import {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {HeaderSection} from './HeaderSection';\nimport {TechnicalsData} from './TechnicalsData';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Technicals = observer(({changeView}: Props) => {\n return \n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nconst DataContainer = styled.div`\n height: auto;\n overflow-y: auto;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n","import React from 'react';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport classNames from 'classnames';\n\ninterface Props {\n isSubscriber: boolean;\n store: CurrentPageStore;\n setCompetitors: (competitors: any[]) => void;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n compListCollapsed: boolean;\n}\n\nexport const KeywordSelector = ({store, isSubscriber, setActiveKw, setCompetitors, activeKw, compListCollapsed}: Props) => {\n const {Option} = Select;\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(store?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n };\n\n return \n \n {compListCollapsed ? 'Kw' : 'Keyword'}\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '250px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={classNames(styles.selectInput, compListCollapsed && styles.minified)}\n suffixIcon={ ;\n};\n","import {Checkbox} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {faCheck, faPlus} from '@fortawesome/pro-solid-svg-icons';\nimport {faSquareCheck} from '@fortawesome/pro-light-svg-icons';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {EditorState, Modifier, SelectionState, ContentState} from 'draft-js';\nimport {debounce} from 'lodash';\nimport {observer} from 'mobx-react';\nimport {useCallback, useState} from 'react';\nimport styled from 'styled-components';\n// import {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n\ninterface Props {\n activeCompetitor: any;\n htmlToDraft: any;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const HeadingsTree = observer(({\n activeCompetitor,\n htmlToDraft,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedIndexData,\n checkedIndexData}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer:\n {currentPage: {\n setCopiedHeadings,\n }}} = useStore('');\n\n\n const [addedHeadings, setAddedHeadings] = useState([]);\n const [copiedHeading, setCopiedHeading] = useState({\n tag: '',\n text: '',\n });\n\n const [filters, setFilters] = useState([\n {\n tag: 'h1',\n active: true,\n },\n {\n tag: 'h2',\n active: true,\n },\n {\n tag: 'h3',\n active: true,\n },\n {\n tag: 'h4',\n active: true,\n },\n {\n tag: 'h5',\n active: true,\n },\n {\n tag: 'h6',\n active: true,\n },\n ]);\n\n const onCheckboxChecked = (checked: boolean, tag: string) => {\n const curFilters = [...filters];\n\n const updatedFilters = curFilters.map(filter => {\n if (filter.tag == tag) {\n return {\n ...filter,\n active: checked,\n };\n } else {\n return {...filter};\n }\n });\n\n setFilters(updatedFilters);\n };\n\n const checkboxClickHandler = (e, headingContent, headingTag, idx) => {\n if (e?.target?.checked) {\n setCheckedCount(checkedCount + 1);\n const newItem = {'id': idx, 'headingContent': headingContent, 'headingTag': headingTag};\n setCheckedIndexData([...checkedIndexData, newItem]);\n } else {\n setCheckedCount(checkedCount - 1);\n\n const updatedCheckedIndexData = checkedIndexData.filter(item => item?.id !== idx);\n setCheckedIndexData(updatedCheckedIndexData);\n }\n };\n\n const handleCopyClick = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n navigator.clipboard.writeText(updatedCopiedHeadings);\n };\n\n // const [blockskMap, setBlocksMap] = useState([]);\n\n // const mapHeadingsToDraftBlockTypes = {\n // 'h1': 'header-one',\n // 'h2': 'header-twp',\n // 'h3': 'header-three',\n // 'h4': 'header-four',\n // 'h5': 'header-five',\n // 'h6': 'header-six',\n // }\n\n // useEffect(() => {\n // if (!currentPage?.getCurrentEditorState) return;\n\n // const contentState = currentPage.getCurrentEditorState.getCurrentContent();\n\n // const map = convertToRaw(contentState).blocks\n // setBlocksMap(map);\n\n // }, [currentPage?.getCurrentEditorState]);\n\n\n // const checkIfEditorContainsHeading = (text: string, type: string) => {\n // if (!blockskMap || !blockskMap.length) return false;\n\n // const included = blockskMap.find(block => block.type == mapHeadingsToDraftBlockTypes[type] && block.text == text);\n\n // return included;\n // }\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n currentPage.editContent(state, isNewDecorations);\n }, 2000);\n\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const insertText = async (textToAdd: any, headingType?: string, cleanText?: string) => {\n // NEW FLOW start\n const {contentBlocks, entityMap} = htmlToDraft(textToAdd);\n // const contentState = convertHtmlToEditorState(textToAdd);\n\n const selection = currentPage.currentEditorState.getSelection();\n\n const newSelection = new SelectionState({\n anchorKey: selection.getAnchorKey(),\n anchorOffset: selection.getEndOffset(),\n focusKey: selection.getAnchorKey(),\n focusOffset: selection.getEndOffset(),\n });\n\n\n const fragment = ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap();\n // const fragment = contentState.getCurrentContent().getBlockMap();\n\n const nonStyledState = Modifier.replaceWithFragment(\n currentPage.currentEditorState.getCurrentContent(),\n newSelection,\n fragment,\n );\n\n // WE are calculating nodes to toggle blue background on new Ai generated nodes\n let firstNewBlockId: number;\n const currentBlock = selection.getAnchorKey();\n const nextBlock = currentPage.currentEditorState.getCurrentContent().getBlockAfter(selection.getAnchorKey())?.getKey();\n\n const existingNodes = document.querySelectorAll('[data-block=\"true\"]');\n existingNodes?.forEach((elem, id) => {\n if (elem.getAttribute('data-offset-key') && elem.getAttribute('data-offset-key') == `${currentBlock}-0-0`) {\n firstNewBlockId = id + 1;\n }\n });\n\n\n const updatedState = EditorState.push(currentPage.currentEditorState, nonStyledState, 'insert-fragment');\n currentPage.setCurrentEditorState(updatedState);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('[data-block=\"true\"]');\n if (newTextElems.length) {\n for (let i = firstNewBlockId; i <= newTextElems.length; i++) {\n if (newTextElems[i]?.getAttribute('data-offset-key') && newTextElems[i]?.getAttribute('data-offset-key') != `${nextBlock}-0-0` && newTextElems[i]?.getAttribute('data-offset-key') != `${currentBlock}-0-0`) {\n newTextElems[i].classList.add('newTextBlock');\n } else {\n return;\n }\n }\n }\n }, 500);\n\n debouncedUpdate(updatedState, currentPage.analytics?.focusTerms, currentPage.focusTermsClassNames, false);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('.newTextBlock');\n if (newTextElems.length) {\n newTextElems.forEach(elem => {\n elem.classList.remove('newTextBlock');\n });\n }\n }, 3500);\n\n const curAddedHeadings = [...addedHeadings];\n const updatedAddedHeading = [];\n checkedIndexData?.map(item => {\n updatedAddedHeading?.push({type: item?.headingTag, text: item?.headingContent});\n });\n if (headingType && cleanText) {\n setAddedHeadings([\n ...curAddedHeadings,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n } else {\n setAddedHeadings([\n ...curAddedHeadings,\n ...updatedAddedHeading,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n }\n // NEW FLOW END\n };\n\n const addHeadingsHandler = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n insertText(`${updatedCopiedHeadings}`);\n setShowBulkAddContentBtn(true);\n setCheckedCount(0);\n setCheckedIndexData([]);\n };\n\n return \n Page structure\n \n \n {filters.map((filter, idx) => {\n if (activeCompetitor?.headingsHierarchy?.find(heading => heading.tag == filter.tag)) {\n return onCheckboxChecked(e.target.checked, filter.tag)}\n key={idx}>\n {filter.tag}\n ;\n }\n })}\n \n {showBulkAddContentBtn && setShowBulkAddContentBtn(false)}> Bulk Add to Content }\n \n {!showBulkAddContentBtn &&\n \n {\n addHeadingsHandler();\n }}> \n \n Copy to clipboard\n }> {\n handleCopyClick();\n }}> Copy \n {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}> Cancel \n \n }\n \n {activeCompetitor?.headingsHierarchy?.filter(heading => filters.filter(filter => filter.active)?.map(filter => filter.tag)?.includes(heading.tag))?.map((heading, idx) => {\n const isIncluded = [...addedHeadings].filter(item => item.text == heading.content && item.type == heading.tag)?.length > 0;\n return \n {!showBulkAddContentBtn && checkboxClickHandler(e, heading.content, heading.tag, idx)} />\n }\n \n {isIncluded ? \n {heading.content} \n \n \n {copiedHeading.tag == heading.tag && copiedHeading.text == heading.content ? <>\n }>\n {\n navigator.clipboard.writeText(`<${heading.tag}>${heading.content}`);\n setCopiedHeading({tag: heading.tag, text: heading.content});\n }}>\n \n \n insertText(`<${heading.tag}>${heading.content}`, heading.tag, heading.content)}>\n \n \n\n ;\n })}\n \n ;\n});\nconst calculateIndent = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '15px';\n case 'h2':\n return '25px';\n case 'h3':\n return '45px';\n case 'h4':\n return '55px';\n case 'h5':\n return '65px';\n case 'h6':\n return '75px';\n }\n};\nconst getTopMargin = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '20px';\n default:\n return '0px';\n }\n};\nconst calculateFontSize = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '21px';\n case 'h2':\n return '18px';\n case 'h3':\n return '16px';\n case 'h4':\n return '14px';\n case 'h5':\n return '14px';\n case 'h6':\n return '14px';\n }\n};\nconst generateColor = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '#233A61';\n case 'h2':\n return opaqueColor('#233A61', 85);\n case 'h3':\n return opaqueColor('#233A61', 70);\n case 'h4':\n return opaqueColor('#233A61', 55);\n case 'h5':\n return opaqueColor('#233A61', 47);\n case 'h6':\n return opaqueColor('#233A61', 40);\n }\n};\n\nconst Wrapper = styled.div`\n\n`;\n\nconst ActionsWrapper = styled.div`\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 10px;\n`;\n\nconst AddHeadings = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst CopyAction = styled.div`\n font-size: 12px;\n cursor: pointer;\n`;\n\nconst CancelAction = styled.div`\n cursor: pointer;\n color: #F44343;\n`;\n\nconst FiltersWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst BulkAddAction = styled.div`\n margin-top: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst FiltersContainer = styled.div`\n display: flex;\n background: #F9F9FB;\n border: 1px solid #E8E8E8;\n border-radius: 8px;\n padding: 12px 14px;\n margin-bottom: 20px;\n width: fit-content;\n`;\n\nconst FiltersTree = styled.div`\n display: flex;\n flex-direction: column;\n`;\nconst SingleHeading = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; itemId: number; isIncluded?: boolean}>`\n display: flex;\n margin-top: ${p => p.itemId == 0 ? '0px' : getTopMargin(p.type)};\n margin-bottom: 0px;\n border-radius: 8px;\n padding: 6px 10px;\n cursor: pointer;\n align-items: center;\n width: 100%;\n opacity: ${p => p.isIncluded ? .5 : 1};\n\n .copyClass {\n display: none;\n margin-left: auto;\n }\n .copyClass.disabled {\n pointer-events: none;\n color: gray;\n }\n\n &:hover {\n background-color: ${opaqueColor('#2D6CCA', 15)};\n\n .copyClass {\n display: block;\n }\n }\n`;\nconst HeadingTag = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n border-radius: 5px;\n margin-left: ${p => calculateIndent(p.type)};\n background-color: ${p => generateColor(p.type)};\n padding: 2px 7px; \n margin-right: 10px;\n color: #fff;\n height: fit-content;\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n position: relative;\n`;\nconst HeadingText = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n color: #121212;\n font-size: ${p => calculateFontSize(p.type)};\n ${p => (p.type == 'h1' || p.type == 'h2') && 'line-height: 24px'};\n`;\n\nconst Copy = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-right: 20px;\n margin-bottom: auto;\n min-width: 50px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\nconst InsertText = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-left: 20px;\n margin-bottom: auto;\n min-width: 105px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\n\nconst CheckboxStyled = styled(Checkbox)<{tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\ntext-transform: uppercase;\n .ant-checkbox-checked {\n .ant-checkbox-inner {\n background-color: ${p => generateColor(p.tag)} !important;\n border-color: ${p => generateColor(p.tag)} !important;\n }\n }\n`;\n","import {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {KeywordSelector} from './KeywordSelector';\nimport {HeadingsTree} from './HeadingsTree';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faBars, faBarsSort} from '@fortawesome/pro-solid-svg-icons';\nimport {Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {faArrowUpRightFromSquare, faListTree} from '@fortawesome/pro-regular-svg-icons';\nimport {generateHeadingOutline} from '@/utils/blockRenderComponents';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n setCompListCollapsed: (value: boolean) => void;\n compListCollapsed: boolean;\n htmlToDraft: any;\n activeKw: string;\n setActiveKw: (value) => void;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const CompetitorHeadingsDrawerContent = observer(({\n htmlToDraft,\n setCompListCollapsed,\n compListCollapsed,\n activeKw,\n setActiveKw,\n setCheckedIndexData,\n checkedIndexData,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedHeadingsWithTags,\n checkedHeadingsWithTags}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n\n const [competitors, setCompetitors] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors ?? []);\n const [activeCompetitor, setActiveCompetitor] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n\n\n useEffect(() => {\n if (currentPage?.topRankingCompetitorActiveKw && currentPage?.analytics?.competitorsData?.length && currentPage?.analytics?.competitorsData.find(item => item.keyword == currentPage?.topRankingCompetitorActiveKw)) {\n !activeKw && setActiveKw(currentPage?.topRankingCompetitorActiveKw);\n } else if (currentPage?.analytics?.competitorsData && currentPage?.analytics?.competitorsData[0]) {\n !activeKw && setActiveKw(currentPage?.analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n }, [...(currentPage?.analytics?.competitorsData ?? ''), currentPage?.analytics?.competitorsData?.length]);\n\n useEffect(() => {\n if (toJS(currentPage).analytics?.competitorsData) {\n const contentState = currentPage.currentEditorState.getCurrentContent();\n const outline = generateHeadingOutline(contentState);\n const currentArticleOutline = [{\n title: 'Current Article Outline',\n headingsHierarchy: outline,\n isCurrentArticleOutline: true,\n }];\n\n const updatedCompetitors = toJS(currentPage).analytics.competitorsData?.map(value => {\n return {\n ...value,\n competitors: [...currentArticleOutline, ...value.competitors],\n };\n });\n setCompetitors(updatedCompetitors?.find(item => item.keyword == activeKw)?.competitors ?? []);\n if (!activeCompetitor) {\n setActiveCompetitor(toJS(currentPage.analytics?.competitorsData)?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n }\n }\n }, [currentPage.analytics?.competitorsData, activeKw, currentPage.currentEditorState]);\n\n const competitorsChangeHandler = (competitorsList: any[]) => {\n setCompetitors(competitorsList);\n\n setActiveCompetitor(competitorsList[0]);\n };\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n \n \n setCompListCollapsed(!compListCollapsed)} fontSize={20} style={{marginTop: 20, marginRight: 10, cursor: 'pointer'}}/>\n \n \n \n {competitors?.length? competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)?.map((competitor, idx) => {\n return <>\n {competitor?.isCurrentArticleOutline ?\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n :\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n {competitors?.filter(value => value?.headingsHierarchy && value?.headingsHierarchy?.length && value?.isCurrentArticleOutline)?.length ? idx : idx + 1} \n \n \n {competitor.title} \n \n {competitor.url}\n \n : null}>\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor?.url}`} style={{width: 20, height: 20}}/>\n \n \n {!compListCollapsed && \n {competitor.title} \n \n {competitor.url}\n window.open(competitor?.url, '_blank')}/>\n \n }\n \n \n };\n }) : Add atleast one target keyword to view the Heading outlines \n }\n\n \n \n \n \n\n\n ;\n});\n\nconst Wrapper = styled.div`\n padding: 10px 30px 30px;\n display: flex;\n cursor: default;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n align-items: center;\n`;\n\nconst Left = styled.div<{isCollapsed: boolean}>`\n width: ${p => p.isCollapsed ? '105px' : 'auto'};\n background: transparent;\n padding-right: 30px;\n`;\nconst Right = styled.div`\n background-color: #fff;\n width: 100%;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px rgba(0, 0, 0, 0.06);\n border-radius: 14px;\n padding: 20px 30px;\n`;\nconst CompetitorsList = styled.div`\n\n`;\nconst SingleCompetitor = styled.div<{isActive?: boolean}>`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 7px;\n padding: 9px;\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n border-radius: 8px;\n transition: background .3s ease;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n ${p => p.isActive && 'color: #fff;'}\n }\n\n :hover {\n background-color: #233A61;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n color: #fff;\n }\n }\n`;\nconst Order = styled.div`\n color: #121212;\n width: 25px;\n`;\nconst NameLogoUrl = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Logo = styled.div`\n margin-right: 10px;\n`;\nconst NameAndUrl = styled.div`\n text-align: left;\n max-width: 200px;\n`;\nconst Name = styled.div`\n color: #121212;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\nconst Url = styled.a`\n color: #2D6CCA;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n display: flex;\n font-size: 12px;\n align-items: center;\n`;\n\nconst Headingoutlines = styled.p`\n color: red;\n margin-left: 30px;\n margin-top: -9px;\n`;\n\nconst CurrentArticleOutline = styled.div<{isActive?: boolean}>`\n display: flex;\n align-items: center;\n gap: 12px;\n padding-left: 32px;\n margin-bottom: 10px;\n cursor: pointer;\n border-radius: 8px;\n ${p => p.isActive && 'color: #fff;'}\n svg {\n width: 16px;\n height: 13px;\n }\n .text {\n font-family: Inter;\n font-size: 14px;\n font-weight: 400;\n line-height: 16.94px;\n text-align: left;\n color: rgba(18, 18, 18, 1);\n ${p => p.isActive && 'color: #fff;'}\n text-decoration: underline;\n padding: 7px;\n }\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n :hover {\n background-color: #233A61;\n color: #fff;\n\n .text {\n color: #fff;\n }\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {CompetitorHeadingsDrawerContent} from './DrawerContent';\nimport {useState} from 'react';\n\ninterface Props {\n htmlToDraft: any;\n}\n\nexport const CompetitorsHeadingsDrawer = observer(({htmlToDraft}: Props) => {\n const {contentOptimizer: {currentPage: {analytics, topRankingCompetitorActiveKw, isCompetitorsHeadingsDrawerOpen, closeCompetitorsHeadingsDrawer, setCopiedHeadings}}} = useStore('');\n\n const [compListCollapsed, setCompListCollapsed] = useState(false);\n const [activeKw, setActiveKw] = useState('');\n const [showBulkAddContentBtn, setShowBulkAddContentBtn] = useState(true);\n const [checkedCount, setCheckedCount] = useState(0);\n const [checkedHeadingsWithTags, setCheckedHeadingsWithTags] = useState('');\n const [checkedIndexData, setCheckedIndexData] = useState([]);\n\n return (\n {\n closeCompetitorsHeadingsDrawer();\n if (topRankingCompetitorActiveKw && analytics?.competitorsData?.length && analytics?.competitorsData.find(item => item.keyword == topRankingCompetitorActiveKw)) {\n setActiveKw(topRankingCompetitorActiveKw);\n } else if (analytics?.competitorsData && analytics?.competitorsData[0]) {\n setActiveKw(analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}\n closeIcon={ {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }} style={{display: isCompetitorsHeadingsDrawerOpen ? 'block' : 'none'}}/>}\n className={styles.competitorsHeadingsDrawerStyle}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n >\n Headings Outline\n \n \n );\n});\n","import {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Spin} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {Analytics} from './Analytics';\nimport {CompetingFocusTermsDrawer} from './SideDrawers/CompetingFocusTermsDrawer';\nimport {ContentIdeasDrawer} from './SideDrawers/ContentIdeasDrawer';\nimport {ContentResearchDrawer} from './SideDrawers/ContentResearchDrawer/ContentResearchDrawer';\nimport {KeywordsDrawer} from './SideDrawers/KeywordsDrawer';\nimport {Technicals} from './Technicals';\nimport {CompetitorsHeadingsDrawer} from './SideDrawers/CompetitorsHeadingsDrawer';\n\nexport const SidebarContent = observer(() => {\n const [showTechnicals, setShowTechincals] = useState(false);\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const antIconSecond = setShowTechincals(!showTechnicals)}/> : setShowTechincals(!showTechnicals)}/>;\n const currentView = <>\n \n setShowTechincals(!showTechnicals)}/>\n \n \n setShowTechincals(!showTechnicals)}/>\n \n ;\n\n return \n \n \n {currentPage.isInitialPageLoad && \n }\n \n {currentView}\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n position: relative;\n`;\n\nconst TechnicalsContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute; \n width: 100%;\n left: ${p => p.showTechnicals ? 0 : '400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => p.showTechnicals ? 0 : '350px !important'};\n }\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst ContentContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute;\n width: 100%;\n left: ${p => !p.showTechnicals ? 0 : '-400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => !p.showTechnicals ? 0 : '-350px !important'};\n }\n\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst LoadingBannerContainer = styled.div`\n background-color: transparent;\n height: 25px;\n width: 100%;\n`;\nconst LongLoadingBanner = styled.div`\nbackground: rgba(84, 41, 125, 0.5);\nborder-radius: 5px;\nfont-size: 12;\nheight: 25px;\npadding-top: 2px;\nwidth: 100%;\n`;\n","import React, {useEffect, useState, useRef} from 'react';\nimport styles from './index.module.scss';\nimport {Loader} from './Utils/loader';\nimport {Error as ErrorView} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/RightSidebar/v2-sidebar/Utils/error';\nimport {Resizable} from 're-resizable';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\nimport {SidebarContent} from './SidebarContent';\n\ninterface Props {\n style?: string;\n onResizeCallback?: (width: number) => void;\n isHidden?: boolean;\n store?: CurrentPageStore;\n}\n\nexport const RightSidebarV2: React.FC = observer(({onResizeCallback, isHidden = false, store}) => {\n const {contentOptimizer: {currentPage: {isPublic, isEditorScrolled}}} = useStore('');\n const [topPosition, setTopPosition] = useState((window?.innerHeight && window?.innerHeight) > 800 ? 78 : 50);\n\n const sideBarRef = useRef(null);\n\n // This changes the width of the editor according to the with of the right sidebar\n useEffect(() => {\n const sidebarUpdate = () => {\n if (sideBarRef?.current?.clientWidth > 350 && window.innerWidth <= 1400) {\n onResizeCallback(350);\n } else if (sideBarRef?.current?.clientWidth <= 350 && window.innerWidth > 1400) {\n onResizeCallback(400);\n }\n };\n window.addEventListener('resize', sidebarUpdate);\n\n return () => {\n window.removeEventListener('resize', sidebarUpdate);\n };\n }, []);\n\n useEffect(() => {\n if (sideBarRef?.current?.clientWidth) {\n onResizeCallback(sideBarRef?.current?.clientWidth);\n }\n }, [sideBarRef?.current]);\n\n const handleScroll = () => {\n const position = window.pageYOffset;\n if (position > 0) {\n if (position <= 70) {\n setTopPosition(topPosition - position);\n } else {\n setTopPosition(0);\n }\n } else {\n setTopPosition(topPosition);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, {passive: true});\n }, []);\n\n\n return (\n \n {\n onResizeCallback(elRef.offsetWidth);\n }}\n enable={{\n top: false,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n className={styles.resize}>\n {store?.content?.isAnalyzing && !store?.content?.analyzingError && ( \n );\n});\n","import {useEffect} from 'react';\nimport {WarningOutlined} from '@ant-design/icons';\nimport {useRouter} from 'next/router';\nimport {RootStoreType, useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styles from './styles.module.scss';\n// import {Drawer} from 'antd';\nimport {EditorState, SelectionState} from 'draft-js';\nimport {mapFocusTerms, multiWordCountRegex, prepareFinalTerms} from './LeftSide/EditorSection/content-editor/utils';\nimport {decoratedState} from './LeftSide/EditorSection/content-editor/decorators';\nimport firebase from 'firebase/app';\nimport 'firebase/database';\n// import {ContentGenerator} from './ContentGenerator/ContentGenerator';\nimport {LeftSide} from './LeftSide/LeftSide';\n// import {AiOutlineDrawer} from './AiOutlineDrawer';\n// import {CaAiQuotaInfo} from '@/components/common-components/v2/CaAiQuotaInfo';\n// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {RightSidebarV2} from './RightSidebar/v2-sidebar';\nimport {MainLoader} from '@/components/common-components/v2/MainLoader';\nimport {FREDDY_EVENT_SCA_ARTICLE_CREATED, triggerFreddySurvey} from '@/utils/scripts';\nimport {headerStore} from '@/store/storeCompTest';\nexport const PageEditor = observer(\n ({rootStore, isPublic}: { rootStore: RootStoreType; isPublic: boolean }) => {\n const {contentOptimizer, settings} = rootStore;\n const {currentPage, pages, aiOutline: {\n loadAiWriterHistory,\n refetchOneClickDraftResultForArticleCreation,\n }} = contentOptimizer;\n const {\n isUploading,\n isExportingPage,\n isExportingPageLoader,\n setIsPublic,\n // isOpenContentGeneratorDrawer,\n focusTermsClassNames,\n setFocusTermsClassNames,\n // setIsOpenContentGeneratorDrawer,\n setSideBarWidth,\n setViewers,\n viewers,\n isSideBarHidden,\n isInitialEditorStateFetched,\n content,\n editTitle,\n highlights,\n } = currentPage;\n const {aiInProgress} = content;\n const {\n customer: {\n profile: {\n id,\n emailAddress,\n },\n getCustomerQuota,\n },\n } = settings;\n const resultId = contentOptimizer.aiOutline.id;\n\n const {contentOptimizer: {\n currentPage: {\n feTargetKeywords,\n isLinkActive,\n },\n aiMetaData: {\n loadAiMetaData,\n metaData,\n },\n }} = useStore('');\n\n useEffect(() => {\n if (pages?.count === 2) {\n triggerFreddySurvey(id, emailAddress, FREDDY_EVENT_SCA_ARTICLE_CREATED);\n }\n }, [pages?.count]);\n\n // const {setShowOutlinesInDrawer, v2AiOutline, showOutlinesInDrawer} = aiOutline;\n // const [allRef, setAllRef] = useState();\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n query: {uuid, newPage},\n } = useRouter();\n const {t} = useTranslation('common');\n\n\n // const setAllRefToState = element => {\n // setAllRef(element);\n // };\n\n /*\n * CONTENT EDITOR METHODS START\n */\n\n\n // We are settings initial focus terms map so we can use it for initial decoration and highlighting\n\n function moveSelectionToStart(editorState) {\n const content = editorState.getCurrentContent();\n const firstBlock = content.getFirstBlock();\n const firstKey = firstBlock.getKey();\n\n return EditorState.acceptSelection(\n editorState,\n new SelectionState({\n anchorKey: firstKey,\n anchorOffset: 0,\n focusKey: firstKey,\n focusOffset: 0,\n hasFocus: true,\n isBackward: false,\n }),\n );\n }\n\n // This method will put cursor to start of the content\n function moveFocusToStart(editorState) {\n const afterSelectionMove = moveSelectionToStart(editorState);\n return EditorState.forceSelection(\n afterSelectionMove,\n afterSelectionMove.getSelection(),\n );\n }\n\n\n // This method will do the focus terms re-mapping after we update the page content\n const updateFocusTermsState = () => {\n const sortedFocusTerms = currentPage.analytics?.focusTerms?.slice()\n .slice()\n .sort((a, b) => b.name.length - a.name.length);\n\n const internalLinksClusters = currentPage.content?.internalLinkSuggestions?.slice()?.map(item => {\n return {\n name: item.keyword,\n status: 'internal-link-suggestion',\n variations: [],\n };\n });\n\n const finalData = [];\n if (sortedFocusTerms?.length) finalData.push(...sortedFocusTerms);\n if (internalLinksClusters?.length) finalData.push(...internalLinksClusters);\n\n if (sortedFocusTerms) {\n const parts = prepareFinalTerms(sortedFocusTerms);\n const regex = multiWordCountRegex(parts, false);\n\n if (regex == null) {\n return;\n }\n\n setFocusTermsClassNames(mapFocusTerms(finalData));\n }\n };\n\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data + 1)\n .then(() => {\n dbRef.on('value', snapshot => {\n if (snapshot.exists()) {\n const data = snapshot.val();\n setViewers(data);\n }\n });\n });\n }).catch(error => {\n console.error(error);\n });\n }\n\n return () => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().cancel();\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data - 1);\n });\n }\n };\n }, []);\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().set(viewers - 1);\n }\n }, [viewers]);\n\n // useEffect(() => {\n // const newState = currentPage?.content?.formattedEditorState();\n // currentPage.setCurrentEditorState(newState);\n // setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n // }, []);\n\n\n // This useEffect is ment to fire only once initially, after we have contentLoadedAt and uuid set\n // It will do initial content populating + highlighting\n useEffect(() => {\n // this prop is used to allow/dissallow all repolls related to editing a page to happen\n currentPage.setRepollsAllowed(true);\n // we are checking current page uuid from url\n // if the response came in and populated the store they will match and only then we update the state\n // we repeat this both here and in content editor compoenent\n\n if (uuid === currentPage.content.uuid && isInitialEditorStateFetched) {\n const newState = currentPage.content?.formattedEditorState();\n const focusedState = moveFocusToStart(newState);\n currentPage.setCurrentEditorState(focusedState);\n\n // This prop is set to false only after initial editor state has been set because\n // we want to prevent the DraftJs from triggering the onChange event on page mount\n currentPage.setIsInitialEditorStateFetched(true);\n\n // This will re-map focus terms and update the state and will trigger the next useEffect\n // which will use that map to re-decorate the content\n updateFocusTermsState();\n } else {\n const newState = currentPage?.content?.formattedEditorState();\n currentPage.setCurrentEditorState(newState);\n setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentPage.contentLoadedAt, currentPage?.content?.uuid, isInitialEditorStateFetched]);\n\n useEffect(() => {\n currentPage.setRepollsAllowed(true);\n currentPage.setCurrentEditorState(decoratedState(currentPage.currentEditorState, focusTermsClassNames));\n }, [focusTermsClassNames, highlights]);\n\n\n // This is to set initial mapping of the focus terms, which is used for decorating\n useEffect(() => {\n updateFocusTermsState();\n }, [JSON.stringify(currentPage.analytics?.focusTerms?.slice()), JSON.stringify(currentPage.content?.internalLinkSuggestions?.slice())]);\n\n const loadProject = async () => {\n await pages.getAllProjects();\n };\n\n useEffect(() => {\n if (!isPublic) loadProject();\n if (isPublic) {\n setIsPublic(true);\n } else {\n setIsPublic(false);\n }\n }, []);\n\n useEffect(() => {\n if (uuid && !isPublic) {\n loadAiWriterHistory(uuid as string);\n }\n }, []);\n\n useEffect(() => {\n if (resultId) {\n setRefechForBulkArticleCreation();\n }\n }, [resultId, aiInProgress]);\n\n const setRefechForBulkArticleCreation = async () => {\n if (content.aiInProgress && resultId) {\n try {\n const now = new Date().getTime();\n await refetchOneClickDraftResultForArticleCreation(uuid, now);\n } catch (e) {\n Promise.reject(e);\n } finally {\n getCustomerQuota();\n }\n }\n };\n\n useEffect(() => {\n async function load() {\n if (uuid) {\n if (!isPublic) {\n pages.loadPages(false, pages.activeProjectId);\n }\n // this is to check if we are on initial page create screen or are we editing page\n if (!newPage) {\n await currentPage.loadPage(uuid as string);\n const targetKwArr = feTargetKeywords.map(kw => kw.keyword);\n if (content.title?.startsWith('New Document') && targetKwArr?.length) {\n const data = await loadAiMetaData(content.title, targetKwArr);\n if (data) {\n editTitle(data[0]?.metaTitle);\n }\n }\n } else {\n currentPage.initialLoadPage(uuid as string);\n }\n }\n }\n load();\n }, [uuid, currentPage.currentStep, metaData]);\n\n useEffect(() => {\n if (newPage) {\n currentPage.setNewPage(true);\n currentPage.setCurrentStep(1);\n } else {\n currentPage.setNewPage(false);\n }\n }, [newPage]);\n\n useEffect(()=> {\n headerStore.setComponent(null, false, [\n {name: '', spend: 0, total: 0, color: 'green', quotaProps: null},\n ]);\n }, []);\n\n const callBack = (width: number) => {\n if (width <= 400 && width > 0) {\n setSideBarWidth(`${width}px`);\n }\n };\n\n\n return currentPage.loading ? (\n \n {!currentPage.isLinkActive && ((currentPage.newPage && currentPage.currentStep === 1) || <>\n \n {t('error-has-ocurred')}
\n \n )}\n \n \n );\n },\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"notification\":\"styles_notification__OR6ac\",\"contactLink\":\"styles_contactLink__dGgfv\",\"success\":\"styles_success__g7z1D\",\"info\":\"styles_info__efwL4\",\"warning\":\"styles_warning__TRTcI\",\"error\":\"styles_error__PUH5a\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"customInput\":\"style_customInput__xWOlg\",\"customSelect\":\"style_customSelect__5SwsV\",\"individualCustomSelect\":\"style_individualCustomSelect__WX92V\",\"customGeneralSelect\":\"style_customGeneralSelect__OeVke\",\"user\":\"style_user__wmBrz\",\"avatar\":\"style_avatar__mO1Yn\",\"info\":\"style_info__bJG8w\",\"email\":\"style_email__7HMCL\",\"permission\":\"style_permission__eKrIo\",\"shareModal\":\"style_shareModal__tgI8u\",\"icon\":\"style_icon__7Sv9l\",\"back\":\"style_back__XA9rM\",\"header\":\"style_header__P07YH\",\"users\":\"style_users__Xet9k\",\"input\":\"style_input__CbDPX\",\"permissions\":\"style_permissions__1_Cd5\",\"notification\":\"style_notification__69SZ_\",\"checkbox\":\"style_checkbox__HLruZ\",\"inputContainer\":\"style_inputContainer__5l1dT\",\"textarea\":\"style_textarea__lBED_\",\"dropdown\":\"style_dropdown__BLJU4\",\"hideDropdown\":\"style_hideDropdown__EAZwo\",\"cancelModalButton\":\"style_cancelModalButton__0Jn_a\",\"shareModalFooter\":\"style_shareModalFooter__c_I4D\",\"suggestion\":\"style_suggestion__sQOqS\",\"name\":\"style_name__YXf18\",\"subTitle\":\"style_subTitle__hpMvF\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__bvdyc\",\"popoverDivider\":\"style_popoverDivider__7kxDv\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__f7Uga\",\"contentIdeasTitle\":\"style_contentIdeasTitle__NFfEv\",\"descriptionText\":\"style_descriptionText__lFbSB\",\"input\":\"style_input__NVKIY\",\"inputLabel\":\"style_inputLabel__di3As\",\"countrySelector\":\"style_countrySelector__RsNJa\",\"selectInput\":\"style_selectInput__bfqDn\",\"generateIdeasButton\":\"style_generateIdeasButton__wefT5\",\"generatedItemsNumb\":\"style_generatedItemsNumb__oULgy\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__Um6PF\",\"ContentIdea\":\"style_ContentIdea___8T06\",\"controlButtons\":\"style_controlButtons__3DdPK\",\"downloadButton\":\"style_downloadButton__b7Dxj\",\"copyButton\":\"style_copyButton__DS99q\",\"refreshAiOutlineBtn\":\"style_refreshAiOutlineBtn__NfuS_\",\"unsplashContainer\":\"style_unsplashContainer__tKyCE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toolbar\":\"style_toolbar__Vwy8G\",\"leftSection\":\"style_leftSection__N1651\",\"rightSection\":\"style_rightSection__E_CRH\",\"share\":\"style_share__NTvX5\",\"robotIcon\":\"style_robotIcon__d_APK\",\"contentIdeasBtnLabel\":\"style_contentIdeasBtnLabel__4qIOI\",\"shareBtnLabel\":\"style_shareBtnLabel__o5HXJ\",\"undoBtn\":\"style_undoBtn__gR9Ad\",\"redoBtn\":\"style_redoBtn__oFeoL\",\"editor\":\"style_editor__Zg73v\",\"zoom05\":\"style_zoom05__1Dz2Y\",\"zoom075\":\"style_zoom075__JA_q0\",\"zoom09\":\"style_zoom09__pWjeK\",\"zoom1\":\"style_zoom1__2IWB9\",\"zoom12\":\"style_zoom12__O5tgJ\",\"zoom15\":\"style_zoom15__3U5We\",\"zoom2\":\"style_zoom2__RtpNm\",\"expandedEditor\":\"style_expandedEditor__6u5oc\",\"divider\":\"style_divider__Y6Ylq\",\"button\":\"style_button__UOe75\",\"expandBtn\":\"style_expandBtn__eggx8\",\"copyTooltip\":\"style_copyTooltip__S3tye\",\"writeForMeContainer\":\"style_writeForMeContainer__5aagG\",\"writeForMeFeatherIcon\":\"style_writeForMeFeatherIcon__yxu8G\",\"editorTopInfo\":\"style_editorTopInfo__xoncP\",\"leftEditorTopInfo\":\"style_leftEditorTopInfo__L9LlC\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__VSP5g\",\"button\":\"style_button__QUeN9\",\"active\":\"style_active__Fv0RE\",\"urlPopup\":\"style_urlPopup__D9ZJn\",\"inputContainer\":\"style_inputContainer__bm_d7\",\"textLabel\":\"style_textLabel__IaVSL\",\"urlInput\":\"style_urlInput__hn8MM\",\"inputControlls\":\"style_inputControlls__aQiLB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__62ic4\",\"button\":\"style_button__jl08j\",\"active\":\"style_active__7OpW7\",\"urlPopup\":\"style_urlPopup__QdWSN\",\"inputContainer\":\"style_inputContainer__cNQp7\",\"textLabel\":\"style_textLabel__XLCPG\",\"urlInput\":\"style_urlInput__g2XBm\",\"inputControlls\":\"style_inputControlls___Lrie\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__q5NYO\",\"button\":\"style_button__rOfd5\",\"active\":\"style_active__8ok_g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__JEFtz\",\"button\":\"style_button__tWAPP\",\"active\":\"style_active__1Ub_o\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__vN_zL\",\"header-modal\":\"style_header-modal__zaVfr\",\"header-modal__option\":\"style_header-modal__option__uBrLT\",\"header-modal__selected\":\"style_header-modal__selected__HRX68\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__Y7Msi\",\"button\":\"style_button__qE27E\",\"active\":\"style_active__vcuPU\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7_9Fm\",\"button\":\"style_button__I4eBO\",\"active\":\"style_active__vWrUg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__F4Eq3\",\"button\":\"style_button__zXaNR\",\"active\":\"style_active__QB8X9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7hrU8\",\"button\":\"style_button__lBpTe\",\"active\":\"style_active__Vy5N_\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__ngc_6\",\"button\":\"style_button__bwqJh\",\"active\":\"style_active__pcv99\",\"urlPopup\":\"style_urlPopup__MeYFu\",\"inputContainer\":\"style_inputContainer__Yr1Ib\",\"textLabel\":\"style_textLabel__paAwp\",\"urlInput\":\"style_urlInput__u0l_s\",\"inputControlls\":\"style_inputControlls__GUFA1\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"step-one_button__LmGnF\",\"purple\":\"step-one_purple__Dr_VM\",\"teal\":\"step-one_teal__pq6oT\",\"welcome\":\"step-one_welcome__uDuo3\",\"welcomeHeader\":\"step-one_welcomeHeader__qKSL7\",\"welcomeSubHeader\":\"step-one_welcomeSubHeader__yAtvD\",\"welcomeCards\":\"step-one_welcomeCards__lU5iT\",\"welcomeCard\":\"step-one_welcomeCard__K1Ils\",\"welcomeCardHeader\":\"step-one_welcomeCardHeader__YmBsP\",\"welcomeCardSubHeader\":\"step-one_welcomeCardSubHeader__v1GbY\",\"divider\":\"step-one_divider___K9R9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"uploadForm\":\"styles_uploadForm__RQvO_\",\"urlinput\":\"styles_urlinput__NNaUR\",\"uploadBtn\":\"styles_uploadBtn__zNHxo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"keywordContainer\":\"style_keywordContainer__vPXS3\",\"keywordEditIcons\":\"style_keywordEditIcons__3jaVk\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__S1Uen\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__zFqeU\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__5qWYw\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Fg9Sz\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__UBnRt\",\"keywordLocationIcon\":\"style_keywordLocationIcon__uVBJh\",\"showIcons\":\"style_showIcons__gIQdT\",\"keywordDetailsButtonContainer\":\"style_keywordDetailsButtonContainer__nKs7u\",\"keywordDetailsIcon\":\"style_keywordDetailsIcon__6AAJ0\",\"editKwButtonContainer\":\"style_editKwButtonContainer__437ne\",\"editKwButtonIcon\":\"style_editKwButtonIcon__7aEsS\",\"keywordName\":\"style_keywordName__KZoSi\",\"targetKwContainer\":\"style_targetKwContainer__W_edh\",\"keywordMetric\":\"style_keywordMetric__BgvpY\",\"keywordMetricContainer\":\"style_keywordMetricContainer__1Xtmz\",\"expandingContainer\":\"style_expandingContainer__Ty15F\",\"expandBtn\":\"style_expandBtn__bfM2c\",\"keywordsAndSuggestionsContainer\":\"style_keywordsAndSuggestionsContainer__WHZZr\",\"collapsed\":\"style_collapsed___mhNq\",\"targetKeywordsSectionContainer\":\"style_targetKeywordsSectionContainer__MA1nu\",\"expanded\":\"style_expanded__jeR4g\",\"targetKeywordsContainer\":\"style_targetKeywordsContainer__RASzp\",\"locationToggler\":\"style_locationToggler__pes3z\",\"targetKeywordsTitle\":\"style_targetKeywordsTitle__Xiu43\",\"selectRelatedKeywords\":\"style_selectRelatedKeywords__UsR3o\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__iu89Z\",\"suggestedKwSectionTitle\":\"style_suggestedKwSectionTitle__UtMLo\",\"targetKwLoadingMsg\":\"style_targetKwLoadingMsg__vEgdP\",\"kwSuggestionsContainer\":\"style_kwSuggestionsContainer__2wt_G\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__ACSfR\",\"singleSugestedKwInnerContainer\":\"style_singleSugestedKwInnerContainer__b0ror\",\"svAndCpc\":\"style_svAndCpc__c_8wW\",\"controllsBar\":\"style_controllsBar__ALl9x\",\"clickToAdd\":\"style_clickToAdd__xtgcn\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__80skR\",\"suggestedKwTitle\":\"style_suggestedKwTitle__9QaV3\",\"closeSuggestedKW\":\"style_closeSuggestedKW__330Se\",\"secondary-text\":\"style_secondary-text__emnsR\",\"keywords\":\"style_keywords__wjpPt\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__Lm1gP\",\"cpcMetricsProgressBar\":\"style_cpcMetricsProgressBar__LTmQK\",\"focusTermPopover\":\"style_focusTermPopover__pkvY4\",\"popoverTitle\":\"style_popoverTitle__pH9eH\",\"popoverCountrySv\":\"style_popoverCountrySv__3zElP\",\"sv\":\"style_sv__qOMD7\",\"emoji\":\"style_emoji__xv7Ls\",\"popOverTitle\":\"style_popOverTitle__v_wFU\",\"competitors\":\"style_competitors__YGYr0\",\"competitor\":\"style_competitor__GWmTF\",\"popoverDivider\":\"style_popoverDivider__XCRSU\",\"headingsPopover\":\"style_headingsPopover__jTD85\",\"headingTooltipValue\":\"style_headingTooltipValue__dRrjD\",\"countrySelectorPopover\":\"style_countrySelectorPopover__RhvA2\",\"divider\":\"style_divider__0ifEI\",\"columnTitlesRow\":\"style_columnTitlesRow__oKXV2\",\"columnTitle\":\"style_columnTitle__fLfkI\",\"defaultLocationName\":\"style_defaultLocationName__K60S8\",\"locationInfo\":\"style_locationInfo__DGWFc\",\"setAsDefaultText\":\"style_setAsDefaultText__q4qk_\",\"countryReach\":\"style_countryReach__5HPf_\",\"singleCountryRow\":\"style_singleCountryRow__6YTEm\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__lSqDc\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__OhW7Z\",\"newKwFormContainer\":\"style_newKwFormContainer__ysNll\",\"addNewKwBtn\":\"style_addNewKwBtn__aHUY2\",\"addKeywordStyle\":\"style_addKeywordStyle___NjDc\",\"plusIconStyle\":\"style_plusIconStyle__dmf5B\",\"disabledBtn\":\"style_disabledBtn__z9Cbs\",\"addNewKwForm\":\"style_addNewKwForm__5iXKx\",\"newKwInputControllsContainer\":\"style_newKwInputControllsContainer__Hc69J\",\"newKwInputContainer\":\"style_newKwInputContainer__bkNBM\",\"customInputField\":\"style_customInputField__g9Ppg\",\"addNewKwBtnLabel\":\"style_addNewKwBtnLabel__SWOIT\",\"quota\":\"style_quota__MfYRt\",\"quotaValues\":\"style_quotaValues__6t772\",\"plusIcon\":\"style_plusIcon__lL8Wh\",\"newEmphasizedFormStyle\":\"style_newEmphasizedFormStyle__xmFMZ\",\"pulse-purple\":\"style_pulse-purple__P7U1V\",\"newFormStyle\":\"style_newFormStyle__lqdiW\",\"editKwForm\":\"style_editKwForm__Q_jdR\",\"editKwInputContainer\":\"style_editKwInputContainer__WBOeM\",\"editKwControllsContainer\":\"style_editKwControllsContainer__D2l73\",\"populateButton\":\"style_populateButton__aGc27\",\"confirmButton\":\"style_confirmButton__DZXoJ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentOptimizerContainer\":\"bread-crumb_contentOptimizerContainer__rqiMo\",\"divider\":\"bread-crumb_divider__VKsLJ\",\"scrolledEditor\":\"bread-crumb_scrolledEditor__4iLHS\",\"contentOptimizerHeader\":\"bread-crumb_contentOptimizerHeader__mSsmj\",\"title\":\"bread-crumb_title__8VW90\",\"back\":\"bread-crumb_back__VYwHf\",\"share\":\"bread-crumb_share__7_i4v\",\"backWrapper\":\"bread-crumb_backWrapper__XPOW2\",\"headerExtra\":\"bread-crumb_headerExtra__lVFkV\",\"kebab\":\"bread-crumb_kebab__NIs_t\",\"kebabMenu\":\"bread-crumb_kebabMenu__oJYmb\",\"kebabMenuItem\":\"bread-crumb_kebabMenuItem__YYQHl\",\"redText\":\"bread-crumb_redText__WFg6A\",\"exportBtn\":\"bread-crumb_exportBtn__qzHGF\",\"modal\":\"bread-crumb_modal__QLBQN\",\"modalTitle\":\"bread-crumb_modalTitle__0lf8D\",\"websiteLabel\":\"bread-crumb_websiteLabel__uP_MN\",\"editContainer\":\"bread-crumb_editContainer__ok1vS\",\"btn\":\"bread-crumb_btn__lZxTx\",\"exportToPdfButton\":\"bread-crumb_exportToPdfButton__HCYl1\",\"exportToDocsButton\":\"bread-crumb_exportToDocsButton__dtrrC\",\"exportDropdown\":\"bread-crumb_exportDropdown__7llmi\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerKeywords\":\"styles_headerKeywords__xxGL0\",\"popoverDivider\":\"styles_popoverDivider__zaO9y\",\"draftToolkit\":\"styles_draftToolkit__n9jPZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"content-editor_container__QYw4p\",\"left-side\":\"content-editor_left-side__l1TXd\",\"pageEditorError\":\"content-editor_pageEditorError__H_8Vw\",\"headerKeywords\":\"content-editor_headerKeywords__Nu5m7\",\"popoverDivider\":\"content-editor_popoverDivider__m2Vuv\",\"draftToolkit\":\"content-editor_draftToolkit__jDD0p\",\"loaderSpinnerContainer\":\"content-editor_loaderSpinnerContainer__3w2sl\",\"loaderSpinner\":\"content-editor_loaderSpinner__IxzP_\",\"spin\":\"content-editor_spin__6tOJb\",\"selectionTooltip\":\"content-editor_selectionTooltip__Qo0Ri\",\"arrowBottom\":\"content-editor_arrowBottom__3KZVT\",\"textInputNotification\":\"content-editor_textInputNotification__lnemm\",\"contentGeneratorDrawer\":\"content-editor_contentGeneratorDrawer__XXSAo\",\"closeIcons\":\"content-editor_closeIcons__5_3Bw\",\"outlineDrawerBackArrow\":\"content-editor_outlineDrawerBackArrow__GwHmD\",\"contentGeneratorTitle\":\"content-editor_contentGeneratorTitle__Agz_h\",\"selectedTextInfoContainer\":\"content-editor_selectedTextInfoContainer__WRKBY\",\"dataAndIcon\":\"content-editor_dataAndIcon__6OcYR\",\"textAndUrl\":\"content-editor_textAndUrl__XUxuw\",\"text\":\"content-editor_text__21AKd\",\"url\":\"content-editor_url__v_O1a\",\"textUrlControlls\":\"content-editor_textUrlControlls__thYuv\",\"urlPopup\":\"content-editor_urlPopup__gHOHE\",\"inputContainer\":\"content-editor_inputContainer__Mb2tQ\",\"textLabel\":\"content-editor_textLabel__mnezc\",\"urlInput\":\"content-editor_urlInput__2P2Tu\",\"inputControlls\":\"content-editor_inputControlls__qFkMX\",\"linkSuggestionsPopover\":\"content-editor_linkSuggestionsPopover__FFCdv\",\"extensionButton\":\"content-editor_extensionButton__bBbw0\",\"iconButton\":\"content-editor_iconButton__Cfbam\",\"ctaTitle\":\"content-editor_ctaTitle__ssOd0\",\"extensionButtonStyle\":\"content-editor_extensionButtonStyle__PN0ie\",\"closeIcon\":\"content-editor_closeIcon__UKkJM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"modal\":\"style_modal__rZesC\",\"tableOuterClusters\":\"style_tableOuterClusters__qcXJL\",\"roundEdgesTable\":\"style_roundEdgesTable__iZjyo\",\"ant-table-content\":\"style_ant-table-content__S_Fgs\",\"purpleRow\":\"style_purpleRow__bot_O\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"citationsContainer\":\"style_citationsContainer__oVqah\",\"citationsInnerContainer\":\"style_citationsInnerContainer__ZHHEU\",\"singleCitation\":\"style_singleCitation__qbxUz\",\"citationIcon\":\"style_citationIcon___x2Qc\",\"citationInfo\":\"style_citationInfo__tZ76P\",\"citationName\":\"style_citationName__pdvkB\",\"citationUrl\":\"style_citationUrl__RdI_o\",\"citationText\":\"style_citationText__BdN5t\",\"serpUsedByContainer\":\"style_serpUsedByContainer__azyj8\",\"citationSerpsContainer\":\"style_citationSerpsContainer__iipYx\",\"serpIcon\":\"style_serpIcon__w_LvR\",\"metaDescTooltip\":\"style_metaDescTooltip__nuDt4\",\"serpTooltip\":\"style_serpTooltip__QLWro\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__6RNd6\",\"serpTitle\":\"style_serpTitle__RXoga\",\"serpUrl\":\"style_serpUrl__tu4XQ\",\"emptyDataBox\":\"style_emptyDataBox__Mo6mN\",\"emptyImg\":\"style_emptyImg__9U7Nu\",\"emptyDataTitle\":\"style_emptyDataTitle__R5BVL\",\"subTitle\":\"style_subTitle__rYSu7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"questionsContainer\":\"style_questionsContainer__yjLcX\",\"questionsInnerContainer\":\"style_questionsInnerContainer__2asTx\",\"questionsNameAndCopy\":\"style_questionsNameAndCopy__lm2Dj\",\"customQuestionsName\":\"style_customQuestionsName___Vs5R\",\"serpUsedByContainer\":\"style_serpUsedByContainer__AobiD\",\"citationSerpsContainer\":\"style_citationSerpsContainer__jAx_o\",\"serpIcon\":\"style_serpIcon__6QGH4\",\"emptyDataBox\":\"style_emptyDataBox__1nQ8c\",\"emptyImg\":\"style_emptyImg__3_6YA\",\"emptyDataTitle\":\"style_emptyDataTitle__ApBiU\",\"focusTermPopover\":\"style_focusTermPopover__eCy11\",\"popOverTitle\":\"style_popOverTitle__q_bNa\",\"popoverDivider\":\"style_popoverDivider__0eu5_\",\"copyTooltip\":\"style_copyTooltip__kgoSh\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__7gwcB\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__cm2nS\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__RT8Gn\",\"copyIcon\":\"style_copyIcon__j24nu\",\"totalQuestions\":\"style_totalQuestions__2A_bv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__zQsc0\",\"limitedAccess\":\"style_limitedAccess__B2vHw\",\"flexRow\":\"style_flexRow__R2pUv\",\"quota\":\"style_quota__iFHMf\",\"focusTermDropdown\":\"style_focusTermDropdown__L17PC\",\"scoreContainer\":\"style_scoreContainer__stcBp\",\"scoreDescription\":\"style_scoreDescription__QkW_1\",\"scoreDescTitle\":\"style_scoreDescTitle__qa_Kd\",\"scoreDescText\":\"style_scoreDescText__Hprrn\",\"speedIndexContainer\":\"style_speedIndexContainer__Dejs9\",\"speedIndexDot\":\"style_speedIndexDot__ykTus\",\"refecthButtonContainer\":\"style_refecthButtonContainer__NDBTa\",\"popoverInfoContainer\":\"style_popoverInfoContainer__jZwn6\",\"customSpinner\":\"style_customSpinner__I9jMh\",\"keywords\":\"style_keywords__VUAeg\",\"keywordMetric\":\"style_keywordMetric__jFkNF\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__nk_Rf\",\"viewers\":\"style_viewers__3GdID\",\"avatar\":\"style_avatar__nAZ3X\",\"progress\":\"style_progress__Emagh\",\"smallProgress\":\"style_smallProgress__b2LvX\",\"needHelp\":\"style_needHelp__pVjFU\",\"userIcon\":\"style_userIcon__X7Oyb\",\"readabilityLetter\":\"style_readabilityLetter__RlwFP\",\"readabilityAActive\":\"style_readabilityAActive__etxiG\",\"readabilityBActive\":\"style_readabilityBActive__1xJXN\",\"readabilityCActive\":\"style_readabilityCActive__u9Z0Q\",\"readabilityDActive\":\"style_readabilityDActive__xdRpu\",\"readabilityEActive\":\"style_readabilityEActive__VQ8_a\",\"readabilitySecondary\":\"style_readabilitySecondary__2EAQH\",\"focusTermsCollapse\":\"style_focusTermsCollapse__kVGtj\",\"header\":\"style_header__YUb4w\",\"number\":\"style_number__q8kh0\",\"expandedIcon\":\"style_expandedIcon__l8nCj\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin___4hbN\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__ePTwm\",\"focusTermContent\":\"style_focusTermContent__CK3KM\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__DQAwe\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__EA8m7\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__QpYDT\",\"copyIcon\":\"style_copyIcon__3wT4i\",\"focusTermAndTags\":\"style_focusTermAndTags__Kp9wt\",\"icon\":\"style_icon__moQAn\",\"focusTermName\":\"style_focusTermName__Ly6am\",\"foundInElement\":\"style_foundInElement__tEiL_\",\"customFocusTermName\":\"style_customFocusTermName__LzC2O\",\"brandedLabel\":\"style_brandedLabel__6T1gS\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__rwsPG\",\"focusTermUsageCount\":\"style_focusTermUsageCount__1j6I7\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__qBdnF\",\"removeFocusTerms\":\"style_removeFocusTerms__07IkA\",\"removeTermLabel\":\"style_removeTermLabel__VbKWK\",\"removeTermIcon\":\"style_removeTermIcon__cKkeI\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__u3c18\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__SLkEY\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__xzq3T\",\"writingStylePopover\":\"style_writingStylePopover__sHjLJ\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__iCD9H\",\"focusTermPopover\":\"style_focusTermPopover__FKP8t\",\"innerPopover\":\"style_innerPopover__UbNja\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__RFjzG\",\"withArrow\":\"style_withArrow__I_XFV\",\"popoverTitle\":\"style_popoverTitle__lUKZy\",\"popoverCountrySv\":\"style_popoverCountrySv__geNG6\",\"sv\":\"style_sv__kQDDv\",\"emoji\":\"style_emoji__YGsrS\",\"popOverTitle\":\"style_popOverTitle__ahuD1\",\"competitors\":\"style_competitors__hwtcD\",\"competitor\":\"style_competitor__IqYyC\",\"singleCompetitor\":\"style_singleCompetitor__FwGi3\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__4CKN9\",\"snippetsContainer\":\"style_snippetsContainer__ot3Ml\",\"singleSnippet\":\"style_singleSnippet__XCQdn\",\"popoverDivider\":\"style_popoverDivider__chO8P\",\"popOverTermsTitle\":\"style_popOverTermsTitle__NKa1t\",\"headingsPopover\":\"style_headingsPopover__hbinC\",\"headingTooltipValue\":\"style_headingTooltipValue__bTPOI\",\"collapseContainer\":\"style_collapseContainer__TNTaa\",\"collapsableContainer\":\"style_collapsableContainer__HGsnN\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__MGXVA\",\"collapseButton\":\"style_collapseButton__kR3ue\",\"commonPopover\":\"style_commonPopover__kfD05\",\"editKeywordsBtn\":\"style_editKeywordsBtn__IvUg6\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__b8_ix\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__lUYBT\",\"isKeywordRemoving\":\"style_isKeywordRemoving__0Y5Pv\",\"suggestedKwContainer\":\"style_suggestedKwContainer__IrJwP\",\"svAndCpc\":\"style_svAndCpc__eV3Ml\",\"clickToAdd\":\"style_clickToAdd__Rf3jy\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__e16rv\",\"closeSuggestedKW\":\"style_closeSuggestedKW__vmyEL\",\"cancelButton\":\"style_cancelButton__vFlju\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon__hp2tW\",\"keywordContainer\":\"style_keywordContainer__o4y1J\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__HyXGY\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__n0rhQ\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__0GIsE\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Nbr1J\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__C4CXq\",\"keywordLocationIcon\":\"style_keywordLocationIcon__YjZTQ\",\"showIcons\":\"style_showIcons__PKtA1\",\"editKwButtonContainer\":\"style_editKwButtonContainer__5310p\",\"editKwButtonIcon\":\"style_editKwButtonIcon__09bVC\",\"keywordName\":\"style_keywordName__85ap5\",\"keywordMetricContainer\":\"style_keywordMetricContainer__0AxnT\",\"link\":\"style_link__vZDiF\",\"orderContentBtn\":\"style_orderContentBtn__uNKgi\",\"footerText\":\"style_footerText__iKsz1\",\"divider\":\"style_divider__mevUB\",\"viewSchemaBtn\":\"style_viewSchemaBtn__pU_vK\",\"tabs\":\"style_tabs__m6jOQ\",\"truncateText\":\"style_truncateText__hYHYr\",\"darkenTechnical\":\"style_darkenTechnical__gwrKF\",\"importUrlButton\":\"style_importUrlButton__KuVWa\",\"scoreDescHeader\":\"style_scoreDescHeader__hWDqY\",\"popOver\":\"style_popOver__f04Uy\",\"subtitle\":\"style_subtitle__OIvMk\",\"scrollBarSidebar\":\"style_scrollBarSidebar__Br9J8\",\"focusTermsExpanded\":\"style_focusTermsExpanded__6qt2U\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__9vao9\",\"selectContainer\":\"style_selectContainer___uIb5\",\"customSelectInput\":\"style_customSelectInput__eHqgt\",\"globeContainer\":\"style_globeContainer__63VkK\",\"globeIcon\":\"style_globeIcon__jyZcv\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__QGb2A\",\"countryInfo\":\"style_countryInfo__x__GX\",\"countrySearch\":\"style_countrySearch__BmySQ\",\"topDiv\":\"style_topDiv__wvomn\",\"locationArea\":\"style_locationArea__zWDch\",\"addKwBtnContainer\":\"style_addKwBtnContainer__FBfop\",\"tooltipInner\":\"style_tooltipInner___CBL_\",\"writingStyleContainer\":\"style_writingStyleContainer__keOla\",\"singleReadabilityItem\":\"style_singleReadabilityItem__Fe4pT\",\"activeReadabilityItem\":\"style_activeReadabilityItem__UpNZT\",\"prevReadabilityItem\":\"style_prevReadabilityItem__BGp7b\",\"nextReadabilityItem\":\"style_nextReadabilityItem__EGWMl\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__pUSoR\",\"addNewKwForm\":\"style_addNewKwForm__UIbcE\",\"populateButton\":\"style_populateButton__uUxBA\",\"customInputField\":\"style_customInputField__PqCdR\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs__e5i_W\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__ymRtc\",\"questionsTab\":\"style_questionsTab__BzJZ3\",\"countrySelectorPopover\":\"style_countrySelectorPopover__rkd0q\",\"columnTitlesRow\":\"style_columnTitlesRow__gDyYX\",\"columnTitle\":\"style_columnTitle__NsuCR\",\"defaultLocationName\":\"style_defaultLocationName__t5x2F\",\"locationInfo\":\"style_locationInfo__xzAIt\",\"setAsDefaultText\":\"style_setAsDefaultText__URXN3\",\"countryReach\":\"style_countryReach__Vqlx_\",\"singleCountryRow\":\"style_singleCountryRow__pNmS5\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__1cgyK\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__mvCk5\",\"copyTooltip\":\"style_copyTooltip__M8waz\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__RCmbz\",\"miniMetrics\":\"style_miniMetrics__uglSl\",\"miniMetricsLabel\":\"style_miniMetricsLabel__C7fe6\",\"miniMetricsValue\":\"style_miniMetricsValue__lweAH\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__L1MLr\",\"longLoadingBanner\":\"style_longLoadingBanner__n1_Co\",\"customSchemaBtn\":\"style_customSchemaBtn__L967y\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"linkToolTip\":\"style_linkToolTip__bhIce\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsContainer\":\"style_competitorsContainer__SfNOS\",\"competitorsInnerContainer\":\"style_competitorsInnerContainer___TbD7\",\"singleCompetitor\":\"style_singleCompetitor__U87HC\",\"competitorDetailsContainer\":\"style_competitorDetailsContainer__StWBo\",\"competitorPosition\":\"style_competitorPosition__M88ib\",\"competitorContentScore\":\"style_competitorContentScore__KDgTT\",\"competitorWordCount\":\"style_competitorWordCount__GBsaT\",\"splitter\":\"style_splitter__eGmIb\",\"progress\":\"style_progress__2Uzzo\",\"competitorIcon\":\"style_competitorIcon__FaDSp\",\"competitorInfo\":\"style_competitorInfo__V54hG\",\"competitorName\":\"style_competitorName__F92CB\",\"competitorUrl\":\"style_competitorUrl__s2401\",\"competitorText\":\"style_competitorText__Fzphu\",\"emptyDataBox\":\"style_emptyDataBox__4N8UY\",\"emptyImg\":\"style_emptyImg__CYXAU\",\"emptyDataTitle\":\"style_emptyDataTitle__Js1W9\",\"selectInput\":\"style_selectInput___gVgJ\",\"keywordChecked\":\"style_keywordChecked__C87zU\",\"ant-select\":\"style_ant-select__7CoFi\",\"ant-select-disabled\":\"style_ant-select-disabled__ju49Y\",\"ant-select-selector\":\"style_ant-select-selector__r_4up\",\"ant-select-single\":\"style_ant-select-single__R__La\",\"ant-select-customize-input\":\"style_ant-select-customize-input__4fC4G\",\"tooltipOverlay\":\"style_tooltipOverlay__6zcSe\",\"competitorTooltipUrl\":\"style_competitorTooltipUrl__U2ss8\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"analyticsCollapseCard\":\"style_analyticsCollapseCard__sEtSW\",\"expandIcon\":\"style_expandIcon__nKE6c\",\"header\":\"style_header__hnfX_\",\"headerRight\":\"style_headerRight__YroUz\",\"title\":\"style_title__ICalb\",\"divider\":\"style_divider__zJoLJ\",\"colTitle\":\"style_colTitle__nPW60\",\"pageText\":\"style_pageText__eXO_c\",\"analyticsHideArrow\":\"style_analyticsHideArrow__dF_7X\",\"paginationStyle\":\"style_paginationStyle__DHqNy\",\"singlePageBlur\":\"style_singlePageBlur__xKJPI\",\"filters\":\"style_filters__l5Lmi\",\"filtersText\":\"style_filtersText__Ri9O_\",\"filtersItems\":\"style_filtersItems__wtY3s\",\"chevron\":\"style_chevron__PPxCQ\",\"OptionContainer\":\"style_OptionContainer__9w4R7\",\"checkboxLabel\":\"style_checkboxLabel__mF6_s\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__DXBXv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorIcon\":\"style_competitorIcon__77Of4\",\"pageTitleUrl\":\"style_pageTitleUrl__l8xBO\",\"selectInput\":\"style_selectInput__bKQhM\",\"tableOuterPages\":\"style_tableOuterPages__AgusG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__l3WUN\",\"truncate\":\"style_truncate__5_fss\",\"tabsContainer\":\"style_tabsContainer__UYJo0\",\"tooltipContent\":\"style_tooltipContent__yIv6r\",\"title\":\"style_title__vbncV\",\"stat\":\"style_stat__2U44j\",\"label\":\"style_label__oCj7Z\",\"value\":\"style_value__OatCd\",\"competingTermsDrawerStyle\":\"style_competingTermsDrawerStyle__98Cfv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"selectInput\":\"style_selectInput__RDSGZ\",\"minified\":\"style_minified__rLAna\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsHeadingsDrawerStyle\":\"style_competitorsHeadingsDrawerStyle__ejLJA\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__fymKP\",\"popoverDivider\":\"style_popoverDivider__TIZ7J\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__4jpzP\",\"contentIdeasTitle\":\"style_contentIdeasTitle__rDNWa\",\"descriptionText\":\"style_descriptionText__dkTjD\",\"input\":\"style_input__ULYYv\",\"inputLabel\":\"style_inputLabel__ItSkl\",\"countrySelector\":\"style_countrySelector__DElA_\",\"selectInput\":\"style_selectInput__bf__m\",\"generateIdeasButton\":\"style_generateIdeasButton__AqGzy\",\"generatedItemsNumb\":\"style_generatedItemsNumb__iz2UY\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__4mBeR\",\"ContentIdea\":\"style_ContentIdea__2PlUV\",\"controlButtons\":\"style_controlButtons__YpGL7\",\"downloadButton\":\"style_downloadButton__iWffV\",\"copyButton\":\"style_copyButton___gD7q\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"overViewContainer\":\"style_overViewContainer__gRQCk\",\"title\":\"style_title__HNTaD\",\"boldTitle\":\"style_boldTitle__6f4Ii\",\"searchVolume\":\"style_searchVolume__kmSSg\",\"commonCitations\":\"style_commonCitations__g_Ylt\",\"citationScroll\":\"style_citationScroll__spbFE\",\"singleCitation\":\"style_singleCitation__0mNxO\",\"citationIcon\":\"style_citationIcon__UfZKe\",\"citationInfo\":\"style_citationInfo__fh1eJ\",\"citationName\":\"style_citationName__0_jeb\",\"citationUrl\":\"style_citationUrl____8Xs\",\"citationText\":\"style_citationText__j1sAb\",\"serpUsedByContainer\":\"style_serpUsedByContainer__82DwT\",\"citationSerpsContainer\":\"style_citationSerpsContainer__8KMGG\",\"serpIcon\":\"style_serpIcon__2dcxZ\",\"serpTooltip\":\"style_serpTooltip__mFPIs\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__tXyUj\",\"serpTitle\":\"style_serpTitle__KxJsy\",\"serpUrl\":\"style_serpUrl__oCtSk\",\"rankingContainer\":\"style_rankingContainer__V9EQL\",\"statusBar\":\"style_statusBar__qUtAS\",\"barTitle\":\"style_barTitle__yUiCm\",\"barSubTitle\":\"style_barSubTitle__ltuLr\",\"createButton\":\"style_createButton__4IncC\",\"rankingTable\":\"style_rankingTable__hRQEi\",\"firstColumnText\":\"style_firstColumnText__WROJq\",\"progress\":\"style_progress__Ft_pg\",\"dot\":\"style_dot__n0CLC\",\"topCompetitorTable\":\"style_topCompetitorTable__StrGn\",\"td\":\"style_td__vaRRm\",\"th\":\"style_th__e9zfY\",\"similarKeywordsTable\":\"style_similarKeywordsTable__53Snx\",\"paginationContainer\":\"style_paginationContainer__jJX9i\",\"titleText\":\"style_titleText__Z96eD\",\"urlText\":\"style_urlText__Qo1bK\",\"competitorImg\":\"style_competitorImg__Ct7If\",\"topTagsContainer\":\"style_topTagsContainer__30JuF\",\"topTags\":\"style_topTags__lUSuL\",\"addToProjectBtnExpanded\":\"style_addToProjectBtnExpanded___r13i\",\"addToProjectBtn\":\"style_addToProjectBtn__t13df\",\"disabledBtn\":\"style_disabledBtn__iGVvR\",\"addedToProjectBtnExpanded\":\"style_addedToProjectBtnExpanded__y3OYB\",\"iconRemove\":\"style_iconRemove__r5k98\",\"iconAdded\":\"style_iconAdded__KtJk2\",\"addedToProjectBtn\":\"style_addedToProjectBtn__AQ2cX\",\"viewAllKWButton\":\"style_viewAllKWButton__mqQ1f\",\"tooltipOverlay\":\"style_tooltipOverlay__EQTVG\",\"truncate\":\"style_truncate___oeK6\",\"contentResearchDrawerStyle\":\"style_contentResearchDrawerStyle__zXIxG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__V9bN1\",\"limitedAccess\":\"style_limitedAccess__9hmvs\",\"flexRow\":\"style_flexRow__TypB_\",\"quota\":\"style_quota__rhh52\",\"focusTermDropdown\":\"style_focusTermDropdown__AOpQn\",\"scoreContainer\":\"style_scoreContainer__loUPZ\",\"scoreDescription\":\"style_scoreDescription__fydWp\",\"scoreDescTitle\":\"style_scoreDescTitle__N5Fq9\",\"scoreDescText\":\"style_scoreDescText__49I_N\",\"speedIndexContainer\":\"style_speedIndexContainer__hpZ7E\",\"speedIndexDot\":\"style_speedIndexDot__XHb3w\",\"refecthButtonContainer\":\"style_refecthButtonContainer__jX7gt\",\"popoverInfoContainer\":\"style_popoverInfoContainer__zv0v3\",\"customSpinner\":\"style_customSpinner___6GwX\",\"keywords\":\"style_keywords__fho0v\",\"keywordMetric\":\"style_keywordMetric__8JKbU\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__UMcSb\",\"viewers\":\"style_viewers__L2oXV\",\"avatar\":\"style_avatar__fZe_c\",\"progress\":\"style_progress__JMqDz\",\"smallProgress\":\"style_smallProgress__gDgKa\",\"needHelp\":\"style_needHelp__wFCHN\",\"userIcon\":\"style_userIcon__ByzNC\",\"readabilityLetter\":\"style_readabilityLetter__hQD0j\",\"readabilityAActive\":\"style_readabilityAActive__X2_dk\",\"readabilityBActive\":\"style_readabilityBActive__fAWmd\",\"readabilityCActive\":\"style_readabilityCActive__i1lv3\",\"readabilityDActive\":\"style_readabilityDActive__VivCX\",\"readabilityEActive\":\"style_readabilityEActive__H5ftS\",\"readabilitySecondary\":\"style_readabilitySecondary__QWVvd\",\"focusTermsCollapse\":\"style_focusTermsCollapse__UdsfG\",\"header\":\"style_header__PDtnu\",\"number\":\"style_number__G29Vf\",\"expandedIcon\":\"style_expandedIcon__VyaR6\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin__fA2SL\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__PWpsl\",\"focusTermContent\":\"style_focusTermContent__erOS3\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__ih_4n\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__lXX3f\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__uE5uE\",\"copyIcon\":\"style_copyIcon__Yl1p4\",\"focusTermAndTags\":\"style_focusTermAndTags__e71fF\",\"icon\":\"style_icon__SlMha\",\"focusTermName\":\"style_focusTermName__2byG0\",\"foundInElement\":\"style_foundInElement__W0Nx4\",\"customFocusTermName\":\"style_customFocusTermName__Ms_Z_\",\"brandedLabel\":\"style_brandedLabel__RK_ob\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__z9yEJ\",\"focusTermUsageCount\":\"style_focusTermUsageCount__2P6MT\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__pHGc3\",\"removeFocusTerms\":\"style_removeFocusTerms__ERiTh\",\"removeTermLabel\":\"style_removeTermLabel__Hngc_\",\"removeTermIcon\":\"style_removeTermIcon__M1_JE\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__Oa1Mz\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__DyVeh\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__glCbD\",\"writingStylePopover\":\"style_writingStylePopover__C3ut3\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__5vHOV\",\"focusTermPopover\":\"style_focusTermPopover__VnTU3\",\"innerPopover\":\"style_innerPopover__lSYg1\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__24Dg6\",\"withArrow\":\"style_withArrow__5GtWL\",\"popoverTitle\":\"style_popoverTitle__ExoBo\",\"popoverCountrySv\":\"style_popoverCountrySv__XjYX9\",\"sv\":\"style_sv__uUHFn\",\"emoji\":\"style_emoji__YIvMa\",\"popOverTitle\":\"style_popOverTitle__QEfN0\",\"competitors\":\"style_competitors___oTWx\",\"competitor\":\"style_competitor__xaN9N\",\"singleCompetitor\":\"style_singleCompetitor__y4FaW\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__IGy_S\",\"snippetsContainer\":\"style_snippetsContainer__ujuID\",\"singleSnippet\":\"style_singleSnippet__VPWpj\",\"popoverDivider\":\"style_popoverDivider__boUZ7\",\"headingsPopover\":\"style_headingsPopover__y8sGr\",\"headingTooltipValue\":\"style_headingTooltipValue__fgpE6\",\"collapseContainer\":\"style_collapseContainer__pts2d\",\"collapsableContainer\":\"style_collapsableContainer__H44WO\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__88ikQ\",\"collapseButton\":\"style_collapseButton__so3g3\",\"commonPopover\":\"style_commonPopover__GswDO\",\"editKeywordsBtn\":\"style_editKeywordsBtn__u6kSF\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__NVC47\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__PZNMQ\",\"isKeywordRemoving\":\"style_isKeywordRemoving__juQLI\",\"suggestedKwContainer\":\"style_suggestedKwContainer__szYtD\",\"svAndCpc\":\"style_svAndCpc__KtqVX\",\"clickToAdd\":\"style_clickToAdd__GtPlI\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__uAxIa\",\"closeSuggestedKW\":\"style_closeSuggestedKW__g89NG\",\"cancelButton\":\"style_cancelButton__CSqoR\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon___PuoH\",\"keywordContainer\":\"style_keywordContainer__4fdS3\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__2uDTM\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__Num0E\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__Qqz06\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__aT7_s\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__ceI0z\",\"keywordLocationIcon\":\"style_keywordLocationIcon__eF4lH\",\"showIcons\":\"style_showIcons__iTCoZ\",\"editKwButtonContainer\":\"style_editKwButtonContainer__saLfy\",\"editKwButtonIcon\":\"style_editKwButtonIcon__gMi05\",\"keywordName\":\"style_keywordName__q2NAW\",\"keywordMetricContainer\":\"style_keywordMetricContainer___q6X_\",\"link\":\"style_link__01A4S\",\"orderContentBtn\":\"style_orderContentBtn__DE32O\",\"footerText\":\"style_footerText__s81Rx\",\"divider\":\"style_divider__kuakJ\",\"viewSchemaBtn\":\"style_viewSchemaBtn__4XAB1\",\"tabs\":\"style_tabs__yKF1D\",\"truncateText\":\"style_truncateText__uv_Dk\",\"darkenTechnical\":\"style_darkenTechnical__xbbue\",\"importUrlButton\":\"style_importUrlButton__gFSge\",\"scoreDescHeader\":\"style_scoreDescHeader__jw8OS\",\"popOver\":\"style_popOver__TgfyK\",\"subtitle\":\"style_subtitle__py_8r\",\"scrollBarSidebar\":\"style_scrollBarSidebar__7vCov\",\"focusTermsExpanded\":\"style_focusTermsExpanded__K1IrF\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__gHhKR\",\"selectContainer\":\"style_selectContainer__dc_Qg\",\"customSelectInput\":\"style_customSelectInput__4LY7U\",\"globeContainer\":\"style_globeContainer__wDM6e\",\"globeIcon\":\"style_globeIcon__Grl8C\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__a4Cas\",\"countryInfo\":\"style_countryInfo__fnbn7\",\"countrySearch\":\"style_countrySearch__67Vea\",\"topDiv\":\"style_topDiv__VdAWB\",\"locationArea\":\"style_locationArea__aoXon\",\"addKwBtnContainer\":\"style_addKwBtnContainer__fZ77F\",\"tooltipInner\":\"style_tooltipInner__vtG3X\",\"writingStyleContainer\":\"style_writingStyleContainer___9YQW\",\"singleReadabilityItem\":\"style_singleReadabilityItem__eEjir\",\"activeReadabilityItem\":\"style_activeReadabilityItem__wuJaK\",\"prevReadabilityItem\":\"style_prevReadabilityItem__Tp5ZP\",\"nextReadabilityItem\":\"style_nextReadabilityItem__bvcj1\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__q2__N\",\"addNewKwForm\":\"style_addNewKwForm__RKuU2\",\"populateButton\":\"style_populateButton__GrfTY\",\"customInputField\":\"style_customInputField__zvN4C\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs___0OIs\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__Gd2PJ\",\"questionsTab\":\"style_questionsTab__dppHa\",\"countrySelectorPopover\":\"style_countrySelectorPopover__T8e40\",\"columnTitlesRow\":\"style_columnTitlesRow__NMSYq\",\"columnTitle\":\"style_columnTitle__7VIWu\",\"defaultLocationName\":\"style_defaultLocationName__F5x15\",\"locationInfo\":\"style_locationInfo__NpXoS\",\"setAsDefaultText\":\"style_setAsDefaultText__cnlk2\",\"countryReach\":\"style_countryReach__pE0aL\",\"singleCountryRow\":\"style_singleCountryRow__pUxir\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__3i839\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__qu_SS\",\"copyTooltip\":\"style_copyTooltip__3916s\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__pm0sj\",\"miniMetrics\":\"style_miniMetrics__zV6fP\",\"miniMetricsLabel\":\"style_miniMetricsLabel__EtBkz\",\"miniMetricsValue\":\"style_miniMetricsValue__TOlMK\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__kw3Fc\",\"longLoadingBanner\":\"style_longLoadingBanner__Xqc_5\",\"customSchemaBtn\":\"style_customSchemaBtn__R0sVb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarError\":\"error_sidebarError__2cjOS\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"resize\":\"v2-sidebar_resize__QB3FU\",\"sidebar\":\"v2-sidebar_sidebar__q6cEA\",\"ant-typography\":\"v2-sidebar_ant-typography__ta5hf\",\"title\":\"v2-sidebar_title__OlAx5\",\"subTitle\":\"v2-sidebar_subTitle__LhneY\",\"secondary-text\":\"v2-sidebar_secondary-text__4LWw2\",\"divider\":\"v2-sidebar_divider__9z9OB\",\"link\":\"v2-sidebar_link___z0EU\",\"fullWidth\":\"v2-sidebar_fullWidth__k3Ujx\",\"back\":\"v2-sidebar_back__FYZmn\",\"close\":\"v2-sidebar_close__0lvVI\",\"edit\":\"v2-sidebar_edit__YifNd\",\"green\":\"v2-sidebar_green__KFjaa\",\"orange\":\"v2-sidebar_orange__cSWrx\",\"red\":\"v2-sidebar_red__JmlMA\",\"disable\":\"v2-sidebar_disable__nfA52\",\"upgradeCard\":\"v2-sidebar_upgradeCard__c27O9\",\"upgradeCardTitle\":\"v2-sidebar_upgradeCardTitle__HzPcb\",\"fullAccess\":\"v2-sidebar_fullAccess__tvMBu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__NBfKV\",\"left-side\":\"styles_left-side__LpfI5\",\"pageEditorError\":\"styles_pageEditorError__I7i3p\",\"headerKeywords\":\"styles_headerKeywords__2WBVR\",\"popoverDivider\":\"styles_popoverDivider__1cFJJ\",\"draftToolkit\":\"styles_draftToolkit__UgO6K\",\"loaderSpinnerContainer\":\"styles_loaderSpinnerContainer__unc8w\",\"loaderSpinner\":\"styles_loaderSpinner__qi_LK\",\"spin\":\"styles_spin__YiR1L\",\"selectionTooltip\":\"styles_selectionTooltip__DsvgJ\",\"arrowBottom\":\"styles_arrowBottom__usbcz\",\"textInputNotification\":\"styles_textInputNotification__5FRSY\",\"contentGeneratorDrawer\":\"styles_contentGeneratorDrawer__T7pXe\",\"closeIcons\":\"styles_closeIcons__8uuC5\",\"outlineDrawerBackArrow\":\"styles_outlineDrawerBackArrow__mEByX\",\"contentGeneratorTitle\":\"styles_contentGeneratorTitle__fm_kc\",\"selectedTextInfoContainer\":\"styles_selectedTextInfoContainer__lwCTc\",\"dataAndIcon\":\"styles_dataAndIcon__NAyfz\",\"textAndUrl\":\"styles_textAndUrl__cOjPy\",\"text\":\"styles_text__TfrwZ\",\"url\":\"styles_url__p8_St\",\"textUrlControlls\":\"styles_textUrlControlls__L9_rW\",\"urlPopup\":\"styles_urlPopup__3ZEur\",\"inputContainer\":\"styles_inputContainer__ACZFh\",\"textLabel\":\"styles_textLabel__yKZPz\",\"urlInput\":\"styles_urlInput__DVTni\",\"inputControlls\":\"styles_inputControlls__Ynfjt\",\"linkSuggestionsPopover\":\"styles_linkSuggestionsPopover__2c_Jo\"};"],"names":["notificationType","Notification","type","text","showContactSupportLink","param","settings","customer","isGHLAccount","useStore","openLiveChat","chatBtn","document","querySelector","click","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","div","className","classnames","styles","jsx","NextImg","src","span","onClick","CaAiQuotaInfo","observer","quotaUtilization","mode","size","customLabel","isMinified","colorSetup","useState","dark","textColor","light","gray","sizeSetup","small","fontSize","normal","profile","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","Wrapper","Label","ca","allowedAiContentGeneration","consumed","total","styled","_templateObject","p","_templateObject1","VideoPlayerModal","iconPath","title","subTitle","button1","videoLink","button2","FontAwesomeIcon","icon","faCheck","style","marginRight","buttonMinimize","onClickButton1","onClickButton2","button3","onClickButton3","home","videoPlayerModal","setVideoPlayerModal","minimized","setMinimized","Fragment","ModalStyled","destroyOnClose","width","display","alignSelf","visible","onClose","maskStyle","background","justifyContent","marginBottom","TitleText","SubTitleText","Button","color","variant","faArrowDownLeftAndArrowUpRightToCenter","iframe","height","frameBorder","allow","allowFullScreen","borderRadius","SmallPopupStyled","position","CloseOutlinedStyled","faArrowUpRightAndArrowDownLeftFromCenter","Modal","_templateObject3","_templateObject4","Table","props","block","blockProps","editor","getData","get","target","concat","createPortal","jsx_runtime","EditorBlock","data","tableKey","tableShape","colgroup","isArray","table","borderCollapse","margin","id","dangerouslySetInnerHTML","__html","tbody","map","row","i","tr","cell","j","element","th","border","padding","backgroundColor","textAlign","colSpan","colspan","rowSpan","rowspan","data-position","defaultValue","td","BlockImage","image","useRef","contentState","content","alt","getEntityAt","getEntity","widthImg","includes","heightImg","ref","iframeRegex","test","srcMatch","match","widthMatch","heightMatch","titleMatch","urlPattern","referrerPolicy","getNumberFromEnglishCounting","WriteForMe","htmlToDraft","contentOptimizer","currentPage","contentFragment","getCustomerQuota","isFullBtn","setIsFullBtn","currentEditorState","focusTermsClassNames","isSideBarHidden","antIcon","LoadingOutlined","spin","antIconLarge","useEffect","preventingDefaultMenu","e","stopPropagation","querySelectorAll","forEach","elem","addEventListener","removeEventListener","setTimeout","editorWrapperElem","getElementById","editorElem","clientWidth","offsetWidth","getEditorRealMargin","window","debouncedChange","debounce","state","focusTerms","isNewDecorations","editContent","debouncedUpdate","useCallback","getSelection","editorState","insertText","isBlock","firstNewBlockId","contentBlocks","entityMap","fragment","html","selection","newSelection","SelectionState","anchorKey","getKey","anchorOffset","getText","length","focusKey","focusOffset","getAnchorKey","getEndOffset","ContentState","createFromBlockArray","getBlockMap","nonStyledState","Modifier","replaceWithFragment","getCurrentContent","currentBlock","nextBlock","getBlockAfter","existingNodes","getAttribute","updatedState","EditorState","push","setCurrentEditorState","setAiTooltip","show","newTextElems","classList","add","analytics","remove","getParams","currentContent","fetchAndInsertText","action","selectedText","start","getAnchorOffset","getFocusOffset","end","getBlockForKey","isCollapsed","slice","fetchFragment","aiTooltip","Promise","reject","isTextSelected","isEmptyContent","Container","Tooltip","WriteForMeStyled","cursor","fragmentLoading","Spin","marginTop","indicator","faFeather","WriteForMeMiniStyled","BasedOn","isSelection","UsedQuota","used","_templateObject2","CustomBlock","blockRef","Option","Select","isOpen","setIsOpen","require","typesMap","hotKeysLabelMap","blockType","getType","dropdownRef","handleClickOutside","event","current","contains","onEditorChange","prevSelection","prevEditorState","forceSelection","BlockContainer","blockHeight","offsetHeight","topOffset","writeForMeTopOffset","isScaPublicPage","DropdownContainer","onContextMenu","currentValue","open","onChange","value","hasFocus","isBackward","newEditorState","RichUtils","toggleBlockType","dropdownStyle","dropdownMatchSelectWidth","suffixIcon","faCaretDown","Object","keys","idx","CustomBlock_templateObject","CustomBlock_templateObject1","Input","CommonInput","UploadFromUrlForm","store","form","Form","useForm","t","useTranslation","onUploadHandler","url","setIsCreateFromUrl","uploadFromUrl","updateContentLoadedAt","setCurrentStep","initialValues","onFinish","Item","name","rules","required","message","validator","_","isURL","require_protocol","resolve","inputType","placeholder","buttonType","loading","isUploading","Step1","setIsCreateFromScratch","setIsFirstArticleEdit","router","useRouter","onStartFromScratchClick","setIsFetchingTargetKw","analysis","clearUrl","createWithContent","createFromText","routes","landingPageOptimizer","query","uuid","undefined","shallow","br","Welcome","currentStep","styleMap","ContentEditor","getEditorState","showAiBanner","editorContainer","heroSection","lastScrollPosition","setLastScrollPosition","addHeroImageLoading","setAddHeroImageLoading","localStorage","setItem","aiOutline","aiMetaData","pages","getHeroImageById","clearFocusTermsClusters","getCurrentEditorState","zoomLevel","newPage","clearFeTargetKeywords","clearTargetKeywords","isInitialEditorStateFetched","setIsEditorScrolled","isEditorScrolled","setFocusTermsSorter","resetRepollCounters","clearAllTaData","setIsUnspashDrawerOpen","updateHeroImage","isHeroImageLoading","setContentType","clearAiOutline","isOpenAiOutlineDrawer","setIsOpenAiOutlineDrawer","clearV2AiOutline","setIsOpenAiContentToolsDrawer","clearTemplateOutlines","clearTemplates","setIsOpenAiWriterDrawer","clearOneClickIdea","clearOneClickOutlines","setAiWriter","aiWriterController","setAiTemplate","aiTemplatesController","clearMetaData","navBar","setIsDockedSider","heroImage","aiInProgress","setHeroImage","heroImageAltText","antIconOrange","windowHeight","innerHeight","showForm","label","key","removeSizeDataFromBlock","delete","set","blockMap","handleTabInTable","direction","collapsed","targetKey","targetBlock","getBlockBefore","merge","getLength","splitBlock","getLastBlock","createEmpty","setBlockType","isTargetTable","endOffset","setSelectionIfNone","getHasFocus","moveSelectionToStart","toggleInlineStyle","inlineStyle","customStyleMap","existingMatch","getCurrentInlineStyle","filter","split","toList","kebabCase","endsWith","rexp","RegExp","newString","replace","toggleListType","listType","getCurrentBlockType","handleDeleteKey","startBlock","getStartKey","endBlock","getEndKey","handleKeypressWhenSelectionNotCollapsed","toggleBlockData","newData","selectionState","newContentState","setBlockData","setIndent","listMax","indentMax","setDepth","adjustment","startKey","endKey","blocks","toSeq","skipUntil","k","takeUntil","depth","getDepth","maxDepth","newDepth","Math","max","min","selectionBefore","selectionAfter","isEditorFocus","focus","setIsEditorFocus","oneClick","getSingleUrlParam","writeWithAi","onEditorBlockTypeChange","getCurrentBlock","blockKey","currentSelection","handleChangeBlockType","keysMap","curPressKeys","checkKey","preventDefault","keyCode","multipleExist","keysArray","every","clearPressKeysArr","checkTitle","titleArray","handleAddHeroImage","targetKeywordsCount","cleanedHtml","res","loadPage","notification","error","warning","scrollTo","top","addHtmlToDocument","newHtml","hasText","reset","convertHtmlToEditorState","newBlockMap","newContent","currentEditor","blur","chars","prevBlock","firstCell","getStartOffset","firstTableKey","lastCell","lastTableKey","sameTable","startOffset","v","toOrderedMap","has","genKey","ContentBlock","Map","firstBlock","removeRange","first","butLast","subSelection","notLastTable","notFirstTable","notTable","separatorBlock","notTableStart","find","selectionKey","handlePastedText","pastedHtml","replaceText","moveFocusToEnd","getFirstBlock","blockRendererFn","contentBlock","component","editable","templateUsed","templateIcon","templateName","templateDesc","isStandaloneTool","toJS","isUseMask","onScroll","scrollTop","classNames","isExportingPage","getZoomLevel","editorHeightOffset","breadcrumbHeight","keywordsHeight","opaqueColor","alignItems","boxShadow","faBrainCircuit","fontWeight","marginLeft","faArrowRight","HeroImageWrapper","SkeletonRingLoader","HeroSection","HeroImage","ButtonsContainer","getPopupContainer","trigger","ButtonWrapper","faArrowsRotate","faICursor","faTrash","AiBanner","shouldPopulatePageHtml","Editor","editorKey","draftEditorState","scrollY","blockStyleFn","handleKeyCommand","command","offset","blockBefore","currentBlockType","acceptSelection","onBackspace","getFocusKey","float","keyBindingFn","KeyBindingUtil","hasCommandModifier","getDefaultKeyBinding","content_editor_templateObject","content_editor_templateObject1","content_editor_templateObject2","img","content_editor_templateObject3","content_editor_templateObject4","_templateObject5","User","avatar","email","isOwner","permission","onPermissionChange","activePermission","setActivePermission","Avatar","CaretDownFilled","share_modal_Option","ShareModal","pagePermissions","shareDialog","setEmail","setPermission","globalPermission","setGlobalPermission","isEditableByAnyone","handleGlobalPermissionsUpdate","location","existingPermission","existingViewPermission","isViewableByAnyone","navigator","clipboard","writeText","href","success","editPagePermissions","closeDialog","MixPanel","track","SCA_PAGE_SHARED","handleInviteUser","closeAfterSubmit","emails","warn","closable","closeIcon","faXmark","bodyStyle","Title","Head","InputContainer","V2Button","disabled","emailReg","EmailError","Body","ul","li","createdByUser","users","sort","user","toLowerCase","Divider","Footer","GrayButton","paddingBottom","paddingTop","share_modal_templateObject1","share_modal_templateObject2","share_modal_templateObject3","share_modal_templateObject4","share_modal_templateObject5","_templateObject6","_templateObject7","AiTooltip","activeOption","setActiveOption","urlCopy","setUrlCopy","setIsCopy","onLinkRemove","updatedSelection","toggleLink","sendTextToEditor","insertLinkToText","decorator","createCompositeDecorators","formatUrl","urlValue","entityKey","newContentWithEntity","createEntity","getLastCreatedEntityKey","newNewContent","textValue","withLinkText","withProperCursor","getSelectionAfter","isLinkEdit","bottom","left","onMouseDown","flexDirection","ButtonV2","paddingLeft","faEarthAmerica","faPen","isLink","faLinkSimpleSlash","word","faCopy","internalLinkSuggestions","link","keyword","trim","Popover","placement","overlayClassName","overlayStyle","SuggestionsContainerTitle","faCircleInfo","SuggestionsTitle","results","suggestion","SingleLinkContainer","Left","Link","Right","isUsed","SuggestionsMenuItem","faLink","faAngleRight","AiTooltip_templateObject","AiTooltip_templateObject1","AiTooltip_templateObject2","AiTooltip_templateObject3","AiTooltip_templateObject4","AiTooltip_templateObject5","AiTooltip_templateObject6","a","AiTooltip_templateObject7","Unsplash","contentType","UNSPLASH_ACCESS_KEY","UnsplashReact","namedExports","searchInput","onAddImage","imageUrl","onImageUpload","insertImage","accessKey","Uploader","withDefaultProps","InsertIntoApplicationUploader","onFinishedUploading","FreeStockTab","gap","Radio","RadioStyled","ImageComponent","setImagesList","historyCopyStatus","setShowSelectedHistoryImage","setShowHistoryImage","rootElement","setImagesAddedCount","imagesAddedCount","elemIdx","setElemIdx","imagesLoadedCount","setImagesLoadedCount","setShowAddHeroCheck","setShowAddToArticleCheck","setShowCopiedCheck","showAddHeroCheck","showAddToArticleCheck","showCopiedCheck","templatesHistory","currentElement","IntersectionObserver","entries","entry","intersectionRatio","unobserve","imagesLoading","item","imageList","images","root","threshold","observe","handleHistoryImageCopyClick","execCommand","result","inputs","fieldValue","selectedHistoryImageAdd","index","imgOnLoad","onMouseLeave","Col","onMouseOver","ColCardContainer","hide","ColCardImage","String","onLoad","button","copyIconWhite","viewImageCheck2","imageComponent_templateObject","imageComponent_templateObject1","ImageListComponent","buttonTitle","dummyImages","imagesDummy","setImagesDummy","imagesList","Row","gutter","overflow","maxHeight","val","CardStyle","load","Card","AICreateImagesTab","activeTab","isUnsplashDrawerOpen","setHistoryCopyStatus","aspectRatio","setAspectRatio","imagesAspectRatio","setImagesAspectRatio","isRealistic","setIsRealistic","loadAiTemplateOutlinesHistory","loadAiGeneratedImage","setDummyImages","setImageGenerateInputValue","imageGenerateInputValue","historyLoading","setCopyStatus","projects","setShowScaTopUpModal","isWhitelabel","isAllowedAiContentGenerationQuotaLimitReached","plans","showSidebarPaymentDrawer","setButtonTitle","showError","setShowError","showSelectedHistoryImage","showHistoryImage","selectSuffixIcon","filteredObj","projectId","defaultAiSettings","onGenerateBtnClick","subtitle","QuotaWrapper","QuotaInfoDetail","consumedData","totalData","heading","description","ctaLabel","showCta","customCta","isCenter","InputWrapper","CommonInputStyled","onFocus","whiteSpace","SettingContainer","SelectContainer","OptionLabel","SelectStyled","grayBackground","aspectRatioOptions","Checkbox","autoFocus","defaultChecked","checked","ModalImage","centered","footer","onOk","onCancel","ai_create_images_tab_templateObject","ai_create_images_tab_templateObject1","ai_create_images_tab_templateObject4","ai_create_images_tab_templateObject5","ai_create_images_tab_templateObject6","AddImageDrawer","checkTab","setActiveTab","handleClose","URL","queryParams","URLSearchParams","search","newURL","origin","pathname","toString","hash","history","pushState","path","Drawer","mask","maskClosable","TabsStyled","Tabs","tabBarGutter","activeKey","copyAndModifyQueryParams","TabPane","tab","AddImageDrawer_templateObject","EditorSection","isCopy","setEditorHeightOffset","setShowAiBanner","showEditAltModal","setShowEditAltModal","altText","setAltText","setElement","modalEditorStates","setModalEditorStates","hideButton","setHideButton","noFirstVisit","getItem","handleModalOpen","currentAlt","handleUpdateAlt","tagkey","attributes","blockList","next","newEntity","entity","mergeEntityData","promptForLink","pageX","pageY","closeContextMenu","headerKeywordsRef","updateKeywordsRef","isNil","isManualUpdate","debouncedHighlightingChange","decorated","changeType","acceptedTypes","decoratedState","debouncedHighlighting","errorMessage","isImportError","isCreatedFromScratch","prevOffset","blockWithLinkAtBeginning","linkKey","characterList","getCharacterList","initialSelectedText","generateSelectedText","lastWasEnd","selectedBlocks","blockArray","selectedTextFromBlocks","join","xSelection","x","prevChar","nextChar","prevEntity","nextEntity","finalPrevOffset","finalNextOffset","char","blockLength","finalAnchorOffset","rangeCount","getRangeAt","getBoundingClientRect","noEntityCase","noSelectionLeft","noSelectionTop","noSelectionBottom","tempX","clientY","clientX","linkInstance","startsWith","getLastChangeType","lastChangedBlockKey","lastChangedBlock","lastChangedBlockType","addCrossIcon","isExtensionInstalled","handleShowNotification","checkDate","getCount","date1","hoursDifference","Number","diffInMs","abs","date2","now","Date","maxWidth","checkCount","CloseOutlined","rel","transform","zIndex","InputTitle","InputStyled","ButtonsWrapper","CancelButton","ButtonStyled","EditorSection_templateObject","EditorSection_templateObject1","EditorSection_templateObject3","EditorSection_templateObject5","Header_Option","Header","blockTypeEnhancement","CaretDownOutlined","pointerEvents","UnorderedList","UnorderedListOutlined","Bold","inlineStyleEnhancement","BoldOutlined","Italic","ItalicOutlined","Underline","UnderlineOutlined","OrderedList","OrderedListOutlined","Code","CodeOutlined","Anchor","updateText","showNewUrlEditor","setShowNewUrlEditor","editorValues","setEditorValues","selectionRange","setSelectionRange","customSelection","dateRef","onkeydown","ctrlKey","shiftKey","metaKey","iconClicked","LinkOutlined","AnchorRemove","entityTypeEnhancement","removeLink","faUnlink","AddImage","openDrawer","faImage","Dragger","Upload","BrowseImage","loader","setLoader","isError","setIsError","altValue","parentElement","setImgFile","setImage","contentStateWithEntity","AtomicBlockUtils","insertAtomicBlock","formData","FormData","append","imgFile","CONTENT_ASSISTANT_API","uploadImage","ele","which","handleImageChange","selectedFile","reader","FileReader","onloadend","readAsDataURL","RequiredFileType","faTrashXmark","StyleDragger","multiple","showUploadList","customRequest","file","onDrop","getFile","dataTransfer","files","faCloudArrowUp","InputWraper","AtributeWrapper","Pwrapper","CancelBtn","AddBtn","browseFile_templateObject","browseFile_templateObject1","browseFile_templateObject2","UploadURL","imgRegex","imageFormat","urlUpload_templateObject","urlUpload_templateObject1","urlUpload_templateObject2","UploadImage","FileBtn","faFileImage","Popup","StyledInputContainer","StyledTabs","defaultActiveKey","UploadImage_templateObject2","UploadImage_templateObject3","InsertIframe","showIframeEditor","setShowIframeEditor","setUrl","contentData","iframeUrl","faRectangleCode","LargeBadge","alpha","StyledPopup","StyledUrlContainer","InsertButton","insertIframe_templateObject1","Textarea","Toolkit","isTaActive","setIsSideBarHidden","setZoomLevel","isPublic","updatingFolder","isLinkgraph","newState","undo","UndoOutlined","redo","RedoOutlined","faWandMagicSparkles","arrowPointAtCenter","faChevronRight","transition","useClickedOnPageHandler","callback","SingleKeywordDataCard","getSpecificCountryByCode","kw","keywordsFormProps","countries","Text","Typography","updateKeyword","useWatch","keywordResearcherV2","postNewKeywords","keywordDetails","loadKeywordDetailList","loadKeywordDetails","setDetailsRepolling","isKwNameEdit","setIsKwNameEdit","showLocationSelector","setShowLocationSelector","isEditDefaultLocation","setIsEditDefaultLocation","popRef","showKwErrorMsg","setShowKwErrorMsg","showMessage","r","removeTargetKeywords","err","payload","keywordsArray","feTargetKeywords","feKw","updateFeTargetKeywords","locationId","countryCode","editKeywords","response","status","allowedFocusTerms","isEmpty","setFieldsValue","postAndGetData","keywords","kwClickHandler","targetKeywords","setIsDrawerFromCa","setActiveTargetKw","setIsOpenKeywordDrawer","values","formKeyword","formatArray","preparedKeyword","kwArray","locationSelected","reach","updatelocationData","keywordForFrontendArray","JSON","stringify","SCA_PAGE_UPDATE_KEYWORD_LOCATION","locationDebouncerChange","country","updateCountriesList","openLocationSelector","searchForLocation","shouldUpdate","resetFields","faTimes","toUpperCase","overlayInnerStyle","faLocationDot","mouseLeaveDelay","mouseEnterDelay","openClassName","faArrowLeft","faSearch","faInfoCircle","faGlobe","formatNumber","faMapMarkerAlt","serpTaskStatus","Flag","code","searchVolumeFormatter","sv","Globe","globalSv","svTopCountries","indx","_countryCode","searchVolume","Progress","showInfo","strokeWidth","percent","round","trailColor","strokeColor","getProgressColor","SkeletonHorizontalLoaderGray","lightLoader","skeletonHeight","skeletonMarginTop","kd","getInverseProgressColor","costPerClickFormatter","cpc","TargetKeywords","expanded","isAddingNewKw","setIsAddingNewKw","newKwValue","setNewKwValue","kwLengthErr","setKwLengthErr","targetrKeywordsContainer","addHorizontalScroll","topScroll","leftScroll","scrollX","onscroll","deltaY","scrollLeft","newKwLocation","setNewKwLocation","popoverRef","onAddKeywordFinish","format","faPlus","numberWithCommas","textOverflow","faExclamationTriangle","SCA_PAGE_ADD_KEYWORD","SuggestedKeywordCard","isRemoving","setIsRemoving","addSuggestedKwToTargetKw","passedKw","stagedForAddingKw","SCA_PAGE_ADD_KEYWORD_SUGGESTION","removeTargetKeyword","removeSuggestedKeyword","strong","KeywordSuggestions","keywordSuggestionsContainer","showAllSuggestionsHandler","kwSuggestions","isFetchingSuggestedKw","editorText","TargetKeywordsAndSuggestions","isExpanded","setIsExpanded","containerRef","parentRef","ChevronDown","faChevronDown","faChevronsDown","faChevronUp","MetaIdeasList","metaIdeas","onIdeaUse","metaCopied","setMetaCopied","copyMetaHandler","desc","IdeasContainer","idea","SingleIdeaContainer","MetaTitle","metaTitle","MetaDesc","metaDesc","MetaIdeasList_templateObject","MetaIdeasList_templateObject1","MetaIdeasList_templateObject2","MetaIdeasList_templateObject3","MetaTagGenerator","updateMetaData","setIsExternalTitleEdit","isMetaUpdating","editTitle","setLoading","loadAiMetaData","metaData","showMetaDataModal","setShowMetaDataModal","customMetaTitle","setCustomMetaTitle","customMetaDesc","setCustomMetaDesc","showAiMetaResults","setShowAiMetaResults","antdIcon","updateMetadata","meta_title","meta_desc","checkPageTitle","regexp","aiButtonTooltipMsg","msg","generateSingleMetaIcon","metaValue","faHexagonExclamation","metaValueMinLength","metaValueMaxLength","largerThenMax","smallerThanMin","idealSize","missing","largerBy","smallerBy","statusMsg","faTriangleExclamation","faCircleCheck","updateMetaDataHandler","aiMetaDataHandler","targetKwArr","aiSuggestionMsg","metaDataTooltipContent","destroyTooltipOnHide","onVisibleChange","MetaDataBtnStyled","OneClickPublisherV2","extractOptions","wpArray","syncedAt","postStatus","synced","publishedAtUrl","topicalMapName","errorId","setErrorId","smallPageLoad","setUnsavedChanges","unsavedChangesInContent","wpPublish","fetchWpPublishData","postingData","showDataModal","setShowDataModal","publishWpPage","setShowAddSiteModal","isApiError","isShopifyApiError","updateApiError","setShowIndividualPopover","showIndividualPopover","setLoadingData","loadShopifyBlogs","blogs","creatingPage","creatingBlog","createNewShopifyPage","createNewShopifyBlog","getVendorAccounts","vendorAccounts","ottoV2Store","loadIssueTableData","ottoUrls","selectedWpSite","setSelectedWpSite","triggerSites","setTriggerSites","selectedShopifySite","setSelectedShopifySite","showWpVideo","setShowWpVideo","filteredObject","setFilteredObject","selectedUser","setSelectedUser","selectedWpSiteUsers","setSelectedWpSiteUsers","setTrigger","showSynchronizeTypeDropdown","setShowSynchronizeTypeDropdown","synchronizeType","setSynchronizeType","parent","setParent","project","setProject","reloadProjectUuid","refOne","refTwo","newBtnLabelOptions","setNewBtnLabelOptions","currentProject","offerPublishUrl","importedFromUrl","wpPublishedAtUrl","cleanWpArr","getDomain","showWpFormType","setShowWpFormType","syncWp","createNewWp","syncShopify","shopifySynced","createNewShopify","wpPostCategories","wpPostStatus","wpPostType","wpPublishedAtWebsiteId","defaultWpPostCategories","defaultWpPostStatus","defaultWpPostType","defaultWpWebsiteId","shopifyContentType","wpPostParent","shopDomain","wpWebsite","wpPostCategory","account_id","accountId","postParent","wpNewPostCategory","author","wpPostAuthorId","selectedWPsiteData","articles","updatedArticles","setShopifyInitialValues","newBtnLabel","setNewBtnLabel","syncBtnLabel","setSyncBtnLabel","Group","antdIconLarge","wpPostMetaDesc","getTopLinkUrl","getTopLinkId","publishWpPageHandler","notificationV2","topicalMapObject","obj","issueType","params","issue_type","page_size","pageSize","page","is_loading","pageId","pageUrl","postType","postAuthor","postCategories","selectedVendor","shopifySite","shop_domain","shopifyPayload","blog_title","ca_page_id","post_type","tags","new_post","permalink","getSyncedPill","SyncedPill","faCircleXmark","setFields","errors","categories","options","category","children","wpPublisherSyncSection","WpUpdatePostSection","isActive","CustomRadioButton","VideoTutorialBtn","InputsContainer","wpSyncedAt","shopifySyncedAt","wpSynced","shopifyContentUrl","WpLastSyncLeft","moment","WpSyncedPostDetails","sanitizeUrl","faUpRightFromSquare","InputLabelWrapper","FormLabel","initialValue","PurpleRadioButton","blueColor","getFieldValue","StyledFormItem","blog","on","userEmail","itemsArray","areCategoriesSame","Array","PublishButton","htmlType","wpPublisherNewPostSection","WpNewPostSection","borderRadiusTop","wpSite","OptionalTag","pattern","wordCount","wpPublishTooltipContent","WpPublishTooltipContentWrapper","ErrorNotificationContainer","ErrorNotification","textDecoration","onClickShopify","alignConfig","points","handleClick","shopifyBlogId","shopifyBlogTitle","shopifyPostType","shopifyAuthor","shopifyAccountId","shopifyTags","Dropdown","overlay","DropdownContentContainer","align","SynchronizeType","isCleanedHtmlUpdated","_content_wpPostAuthorId","faWordpressSimple","faCaretRight","isShopifyCustomer","faShopify","SynchronizeBtn","faRotate","OneClickPublisherV2_templateObject","OneClickPublisherV2_templateObject1","OneClickPublisherV2_templateObject2","OneClickPublisherV2_templateObject3","OneClickPublisherV2_templateObject4","OneClickPublisherV2_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject19","TitleEditor","languages","contentLoadedAt","isAnalyzing","isExternalTitleEdit","viewers","setShowQuickSyncModal","showQuickSyncModal","userAiSettings","updateUserAiSettings","getUserAiSettings","titleLeft","setTitleLeft","setTitle","modalUrl","setModalUrl","editPageUrl","setEditPageUrl","isCloseClicked","setIsCloseClicked","showDownloadConfirmationModal","setShowDownloadConfirmationModal","submitDisabled","setSubmitDisabled","renderWithbrowser","setRenderWithBrowser","keepContentModal","setKeepContentModal","titleContainerWidth","setTitleContainerWidth","calculateWidth","collapsedViewers","setCollapsedViewers","titleRef","getTitleLeft","urlInput","debouncedChangeFocusOut","URL_PATTERN","popupRef","language","setLanguage","defaultLanguage","onLanguageChangeHandler","option","selectSufixIcon","onEditUrlSubmit","updateUrlHandler","shouldOverwriteContent","renderWIthBrowser","SCA_PAGE_URL_UPDATE","titleWidth","ctx","createElement","getContext","measureText","formatedTitleWidth","WpInstructionsModal","WpAddSiteModal","CommonModal","EditUrlModalTitle","EditUrlModalSub","EditUrlLink","EditUrlModalButtons","CheckboxStyled","input","onBlur","readOnly","ScaArticleStatusSelectorV2","articleUuid","articleStatus","ProjectsSelector","projectName","pageUuid","minifiedVersion","EditUrlContainer","valuePropName","Loader","faArrowDownToBracket","faArrowUpFromBracket","opacity","StyledSelect","showSearch","filterOption","indexOf","onMouseEnter","lang","formatCountryCode","title_editor_templateObject","title_editor_templateObject2","title_editor_templateObject3","title_editor_templateObject4","title_editor_templateObject5","dropdownColors","grey","listItemsBackgroundColor","borderColor","BreadCrumb","headerTopRef","isKebabOpen","setIsKebabOpen","isModalOpen","setIsModalOpen","exportToDocsLoading","setExportToDocsLoading","briefAntIcon","copySuccess","setCopySuccess","clearAnalytics","isExporting","isSaving","exportToGoogledoc","deleteDialog","incrementInTotalArticle","setPageRemovedFromEditor","isAllowedPagesQuotaLimitReached","clientHeight","createPage","PAGES_API","SCA_CREATE_PAGE","exportToGoogleDocs","exportPageToGoogleDocs","PageHeader","onBack","login","backIcon","extra","ShareButton","openDialog","faShareNodes","ExportButton","faFileArrowDown","faEllipsisV","ButtonComponent","googledocLink","SCA_PAGE_EXPORT_TO_DOCS","GoogleOutlined","resp","exportArticleAsHtml","setAttribute","encodeURIComponent","body","appendChild","removeChild","allowedPages","DeleteModal","removeFromEditorCallback","h1","Btn","TopSection","minWidth","DraftToolkit","TextSuggestions","setIsTaActive","setFocusTermsForInsertion","stagingTaSuggestions","taActiveTerm","setTaActiveTerm","setStagingTaSuggestions","highlightedNodeId","setHighlightedNodeId","showOriginalBlockId","setShowOriginalBlockId","updatingTa","totalOccurances","setTotalOccurances","getElementsByClassName","class","onArrowClickHandler","updatedValues","term","order","nodesWithTerm","_higlightedNode_dataset","higlightedNode","dataset","blockIndex","elemOffset","offsetTop","Heading","blocksRenderer","blocksArray","domNode","attribs","typeDettector","onBlockStatusChange","prepDataArr","itemIndex","onDotClickHandler","updateImageStyle","replaceAll","TextContainer","regExp","isSuggestion","SingleBlockWithSuggestion","showingOriginalBlock","currNodeId","data-block-index","termIncluded","right","textTransform","parse","faRotateLeft","BlockWrapper","Controller","DotsContainer","Dot","Arrow","faArrowUp","faArrowDown","checkCurBlockStatus","highlightedNode","elementStatus","_highlightedNode_dataset","TextSuggestions_templateObject","TextSuggestions_templateObject1","TextSuggestions_templateObject2","TextSuggestions_templateObject3","TextSuggestions_templateObject4","TextSuggestions_templateObject5","TextSuggestions_templateObject6","TextSuggestions_templateObject7","TextSuggestions_templateObject8","TextSuggestions_templateObject9","TextSuggestions_templateObject10","TextSuggestions_templateObject11","TextSuggestions_templateObject12","MissingPlacementsBanner","setShow","termsWithNoSuggestions","setTermsWithNoSuggestions","getlinksForInsertion","linksAssistantSuggestions","prepArr","linksIncluded","noPlacementsTermsCount","autoAdjustOverflow","MissingPlacementsBanner_templateObject","SingleTerm","finalTermsList","setFinalTermsList","setVisible","kwUpdate","termIndex","setTermIndex","getstagingLinkSuggestions","setStagingLinkSuggestions","setLinkActiveTerm","linkActiveTerm","onTermClickHandler","curTerm","newClass","incDec","cardClick","scrollTerms","acceptedStatus","dismissedStatus","CardTitle","isTerm","faCircleX","faCircleDashed","StatusTitle","isVal","DividerLine","SuggestionCard","newItems","updateTerm","SingleTerm_templateObject","SingleTerm_templateObject1","SingleTerm_templateObject2","SingleTerm_templateObject3","SingleTerm_templateObject4","SingleTerm_templateObject6","LinksList","taLinkSuggestionLoading","setFilter","loadLinksData","expectedData","outerArray","linksData","innerArray","uniqueData","seenSet","Set","array","stringRepresentation","suggestionList","allLinks","arrayToObject","givenValue","expectedValue","internalLinkSuggestionsV2","getTerms","elements","DOMParser","parseFromString","innerText","formattedArray","arr","arrTwo","indexx","filteredValue","addData","firstTerm","LinkAssistantRightSidebar","inputValue","activeKeywordsList","setIsLinkActive","setLinksForInsertion","stagingLinkSuggestions","setIsTaUpdating","fetchLinkSuggestions","setActiveKeywordsList","updated","setUpdated","setInputValue","anyButtonClicked","setAnyButtonClicked","activeKwArr","active","onCheckboxClicked","elemId","filteredKw","findIndex","onCancelClickHandler","onSubmitHandler","finalHtmlOutput","updatedEditorState","keywordsDropdown","KeywordsDropdownContainer","OverlayTitle","addLink","allLink","urlWithProtocols","links","stringToArray","keywordNewLineReg","popoverContent","CustomTextarea","paddingToNumber","paddingToText","isKeyWordv2","autoSize","minHeight","autoSizeCheck","nativeEvent","LinkSubmitBtns","selectedLink","TaWrapper","TermsMainWrapper","TitleContainer","Description","ActionButtonsContainer","some","linkAssistantRightsideBar_templateObject","linkAssistantRightsideBar_templateObject1","linkAssistantRightsideBar_templateObject3","linkAssistantRightsideBar_templateObject4","linkAssistantRightsideBar_templateObject5","linkAssistantRightsideBar_templateObject7","viewSuggestionsOption","css","blinkAnimation","keyframes","linkAssistantRightsideBar_templateObject9","linkAssistantRightsideBar_templateObject10","linkAssistantRightsideBar_templateObject11","linkAssistantRightsideBar_templateObject12","TextSuggestionsLinks","isLinkActive","doc","TextSuggestionsLinks_templateObject","TextSuggestionsLinks_templateObject1","TextSuggestionsLinks_templateObject2","TextSuggestionsLinks_templateObject3","TextSuggestionsLinks_templateObject4","TextSuggestionsLinks_templateObject5","LeftSide","sideBarWidth","LeftSideContainer","isLinkSuggestionActive","isNewPage","LeftSide_templateObject","Error","WarningOutlined","h3","SingleCluster","SORT_DIRECTION","removingTerms","cluster","isClusterRemoving","tableData","setTableData","sortField","setSortField","sortDirection","setSortDirecion","removeClusterHandler","isBulkRemovingCluster","bulkRemoveTerms","setTerms","dataFiltered","filterDataInMemory","handleTableChange","pagination","filters","sorter","column","sortFieldName","dataSource","loadingRows","columns","dataIndex","render","record","foundIn","FoundInLabel","isBranded","formatLargeNumber","defaultSortOrder","usedCount","idealCountMax","RemoveClusterBtn","rowKey","SingleCluster_templateObject","SingleCluster_templateObject1","BulkRemoveTermsModal","clusteredTerms","setClusteredTerms","clusterToRemove","setClusterToRemove","clusterTerms","clusters","tempArr","focusTermsSorter","tempCluster","b","clusterTitle","termsArr","ModalTitle","CollapseStyled","expandIconPosition","Collapse","Panel","header","ClusterHeader","ClusterName","ClusterDesc","clusterSv","BulkRemoveTermsModal_templateObject","BulkRemoveTermsModal_templateObject1","BulkRemoveTermsModal_templateObject2","BulkRemoveTermsModal_templateObject3","BulkRemoveTermsModal_templateObject5","TermsDropdownController","onViewChange","currentView","onChangeIncludeBranded","includeBranded","onTermsFilter","onSortTerms","showExportModal","setShowExportModal","showBulkRemoveTermsModal","setShowBulkRemoveTermsModal","getTermsCount","termsFiltersSetup","setTermsFiltersSetup","handleOnSortChange","downloadFileToTxt","pageTitle","articleUrl","imagesCount","count","videosCount","videos","iframesCount","iframes","internalLinksCount","internal","externallLinksCount","external","socialCount","social","javascriptCount","js","headersSum","headers","headersCount","pageTechnicalsString","includedFocusterms","notIncludedFocusTerms","ft","requiredCountMin","questionsSting","questions","q","convertedText","Blob","createObjectURL","download","getXlsExportLink","token","getTokenFromCookies","baseUrl","getApiUrl","BaseApi","CA_ENDPOINT","termsFilterHandler","updatedTermsSetup","updatedFilteredTermsArr","tooltipStyle","isNotPublic","viewChangeDropdown","TermsViewDropdownContainer","CheckboxStyledHighlights","highlights","setHighlights","PTag","BulkRemoveTermsBtn","TermsContainer","ExportModalTitle","ExportModalDesc","ExportModalButtonsContainer","faFileSpreadsheet","faFileLines","faGoogle","TermsFilterContainer","customBackground","GroupTermsContainer","Menu","sorters","Sort","faArrowUpArrowDown","SortTxt","isRemovingFocusTerms","AddButton","setShowAddFocusTermModal","ExportBtn","AdjustBtnContainer","GearIcon","faSliders","TermsDropdownController_templateObject","TermsDropdownController_templateObject1","TermsDropdownController_templateObject2","TermsDropdownController_templateObject4","TermsDropdownController_templateObject5","TermsDropdownController_templateObject7","TermsDropdownController_templateObject9","TermsDropdownController_templateObject10","TermsDropdownController_templateObject11","TermsDropdownController_templateObject12","TermsDropdownController_templateObject13","TermsDropdownController_templateObject14","TermsDropdownController_templateObject15","TermsDropdownController_templateObject16","TermsDropdownController_templateObject17","TermsDataController","onFilter","isClustersExpanded","setIsClustersExpanded","termsSearchQuery","setTermsSearchQuery","termsSearchInputValue","setTermsSearchInputValue","secondAntIcon","handleOnClusterClick","filteredSearch","clusterName","termSearchHandler","formatInput","trimmedArr","SearchAndSort","prefix","faMagnifyingGlass","ClustersWrapper","ClustersContainer","expandedClusters","ClusterTooltipSingleRow","ClusterTooltipLabel","ClusterTooltipValue","SingleClusterContainer","activeCluster","TermsDataController_templateObject","TermsDataController_templateObject1","TermsDataController_templateObject2","TermsDataController_templateObject3","TermsDataController_templateObject4","TermsDataController_templateObject5","TermsDataController_templateObject6","TermsDataController_templateObject7","AntdInput","focusTerm","removeTermHandler","removeTerms","termContainerSetup","hoverBackground","fitTermInQuota","quote","startIndex","h5","targetKewyordsOnlyArr","getTwoGreenPercentageColor","percentage","requiredCountMax","competitors","competitor","getSiteName","hostname","snippets","snippet","normalizedScore","source","LowerSection","isAnyFocusTermLink","wikipediaLink","wikidataLink","knowledgeGraphLink","crunchbaseLink","ReferencesWrapper","ReferencesTitle","LinksWrapper","SingleLink","faWikipediaW","TermContainer","TermName","BrandedLabel","CopyIcon","FocusTermsTab_SingleTerm_templateObject","FocusTermsTab_SingleTerm_templateObject1","FocusTermsTab_SingleTerm_templateObject2","FocusTermsTab_SingleTerm_templateObject3","FocusTermsTab_SingleTerm_templateObject4","FocusTermsTab_SingleTerm_templateObject5","FocusTermsTab_SingleTerm_templateObject6","SingleTerm_templateObject7","SingleTerm_templateObject8","SingleTerm_templateObject9","SingleTerm_templateObject10","SingleTerm_templateObject11","TermsDropdowns","includedBranded","setIncludeBranded","setQuery","termsToShow","setTermsToShow","isCopied","setIsCopied","standardTerms","setStandardTerms","queryParam","prepTermsArr","filteredTerms","termsToShowParam","TopicalTermsContainer","focusMode","focusTermsExpanded","CopyButton","TermsDropdowns_templateObject","TermsDropdowns_templateObject1","TermsDropdowns_templateObject2","FocusTermsTab","includedTerms","includeMoreTerms","includeLessTerms","EmptyDataBox","FocusTermsTab_templateObject","LinkSuggestionsDropdownController","isSynced","setIsSynced","isSyncing","setIsSyncing","onLinksSync","getInternalLinkSuggestionsv2","FocusModeBtn","setFocusTermsExpanded","faDownLeftAndUpRightToCenter","faUpRightAndDownLeftFromCenter","FocusModeLabel","ExportIcon","faFileDownload","RefetrchBtnContainer","faSyncAlt","LinkSuggestionsDropdownController_templateObject","LinkSuggestionsDropdownController_templateObject2","LinkSuggestionsDropdownController_templateObject3","LinkSuggestionsDropdownController_templateObject4","SingleSuggestion","customCallback","isRemovingTerm","setIsRemovingTerm","isBookmarked","setIsBookmarked","removeInternalLinkSuggestion","bookmarkInternalLinkSuggestion","TitleAndStar","faStarSolid","faStar","SingleISugesstion_templateObject","SingleISugesstion_templateObject1","SingleISugesstion_templateObject2","SingleISugesstion_templateObject3","SingleISugesstion_templateObject4","SingleISugesstion_templateObject5","InternalLinksSuggestions","isQueried","DropdownsContainer","InternalLinkSuggestions_templateObject","SingleCitation","citation","addDefaultSrc","onError","substring","serps","serp","CommonCitations","commonCitations","SidebarTooltip","SuggestionsDataController","visibleKeywords","updateKeywords","linksDropDownFromSuggestion","showEditor","setShowEditor","hostnameEditor","EditorContainer","FormStyled","updateHostname","InputStyeld","ButtonContainer","isUpdatingHostname","UpdateButton","topMessage","HostnameContainer","HostnameLink","addProtocolToDomain","HostnameLinkBtnContainer","AddNewUrlBtn","ViewDropdownContainer","viewControlls","ViewControllsContainer","SearchAndSortWraper","SearchContainer","SuggestionsDataController_templateObject","SuggestionsDataController_templateObject1","SuggestionsDataController_templateObject3","SuggestionsDataController_templateObject4","SuggestionsDataController_templateObject5","SuggestionsDataController_templateObject6","SuggestionsDataController_templateObject7","SuggestionsDataController_templateObject9","CommonBtn","SuggestionsDataController_templateObject12","SuggestionsDataController_templateObject17","SuggestionsDataController_templateObject19","_templateObject20","_templateObject21","LinkSuggestionsTab","perc","setCurrentView","searchQuery","setSearchQuery","dataArr","setDataArr","initialDataArr","setInitialDataArr","setIsQueried","selectedOption","setSelectedOption","domain","setDomain","isVisiblePopover","setIsVisiblePopover","updateLoading","setUpdateLoading","urlsError","setUrlsError","isFetchingIntLinksSug","onDataFilter","filterDataHandler","formattedArr","customDataArr","foundLinks","n","filteredSelectedLinks","foundLink","calculateUsagePercentage","postLInkSuggestion","initValues","handleRadioChange","submitUrl","apiError","kwArr","SuggestionsBannerContainer","TooltipTitle","TooltipDescription","exportLinkIcon","Pill","StyledPopover","PopoverContentWrapper","PopoverTitle","providedUrl","AddDomainSection","DomainDetails","AddDomainTitle","AddDomainDesc","AddDomainInput","ProvideUrlsSection","ProvideUrlsDetails","ErrorMessageForURL","Dismiss","Update","onOpenChange","LinkSuggestionsTab_templateObject","LinkSuggestionsTab_templateObject1","LinkSuggestionsTab_templateObject2","LinkSuggestionsTab_templateObject3","LinkSuggestionsTab_templateObject4","LinkSuggestionsTab_templateObject6","LinkSuggestionsTab_templateObject7","LinkSuggestionsTab_templateObject8","LinkSuggestionsTab_templateObject9","LinkSuggestionsTab_templateObject10","LinkSuggestionsTab_templateObject11","LinkSuggestionsTab_templateObject12","LinkSuggestionsTab_templateObject14","LinkSuggestionsTab_templateObject15","LinkSuggestionsTab_templateObject16","LinkSuggestionsTab_templateObject18","SingleQuestion","question","aiCopied","setAiCopied","setCreatingPage","isAiGenerating","setIsAiGenerating","justify","faMessageCheck","faFilePlus","QuestionsTab","level","htmlString","string","copiedText","textContent","htmlContent","plainTextContent","copyToClipboardWithHtmlAndText","AddFocusTermModal","showAddFocusTermModal","terms","addFocusTerms","isFocusTermsLoading","handleAddFocusTerms","StyledModal","Desc","TextArea","AddFocusTermModal_templateObject1","AddFocusTermModal_templateObject2","AddFocusTermModal_templateObject3","AddFocusTermModal_templateObject4","FocusTermsTabs","setActiveKey","onChangeTab","SCA_PAGE_FOCUS_TERMS_TAB_OPEN","SCA_PAGE_QUESTIONS_TAB_OPEN","SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN","CommonTabsStyled","tabBarStyle","editorScrolled","TabTitleContainer","totalUsedTerms","totalUsedQuestions","totalUsedSuggestions","CommonTabs","CommonTabPane","FocusTermsTabs_templateObject2","SingleMetrics","tooltipLabel","showTooltip","headingData","StyledLable","StyledIcon","RangeValues","h2","h2Min","h2Max","h3Min","h3Max","internalLinks","internalLinksMin","internalLinksMax","externalLinks","externalLinksMin","externalLinksMax","isWithinRecomendedRange","SingleMetrics_templateObject","SingleMetrics_templateObject1","SingleMetrics_templateObject2","SingleMetrics_templateObject3","ContentScore","scoreCounts","scoreExtended","internalLinksData","externalLinksData","avg","h1value","h1Min","h1Max","h2value","h3value","setViewSuggestionsOption","setLinksDropDownFromSuggestion","isWordCountLoading","isScoreLoading","score","suggestedWordCountLimits","viewSuggestionHandler","shouldShowTooltip","tooltipMsg","cur","openText","scrollToText","anchorTag","scrollIntoView","behavior","countsSetup","lower","upper","paragraphs","paragraphsMin","paragraphsMax","headings","headingsMin","headingsMax","StyleHeadingsTooltipTitle","internalLinksLength","externalLinksLength","StyledLinksTabs","StyledRecommender","StyledRecomentedValue","StyledSuggestionLink","showAsLink","StyledCurrentValue","StyledFontAwesomeIcon","StyledLinksDiv","StyledLinkItem","faArrowUpRightFromSquare","ReactEcharts","grid","series","axisLine","roundCap","lineStyle","progress","startAngle","radius","endAngle","pointer","offsetCenter","itemStyle","axisTick","splitLine","distance","splitNumber","axisLabel","detail","RightSection","ContentScore_templateObject","ContentScore_templateObject1","ContentScore_templateObject2","ContentScore_templateObject5","ContentScore_templateObject6","ContentScore_templateObject7","ContentScore_templateObject8","ContentScore_templateObject9","ContentScore_templateObject10","WordCount","WordCount_templateObject","WordCount_templateObject1","HeaderSection","MiniContainer","ScoreAndWordCount","ProgressStyled","strokeLinecap","gapDegree","gapPosition","MiniTitleContainer","HeaderSection_templateObject","HeaderSection_templateObject1","HeaderSection_templateObject2","HeaderSection_templateObject3","HeaderSection_templateObject5","HeaderSection_templateObject6","HeaderSection_templateObject7","termsForInsertion","termsAssistantSuggestions","overflowY","TermsAssistant_MissingPlacementsBanner_templateObject","dots","setDots","saved","dismissed","savedPlacements","dismissedPlacements","placements","Data","PlacementsInfo","generatePlacmenetsInfo","TermsList_SingleTerm_templateObject","TermsList_SingleTerm_templateObject1","TermsList_SingleTerm_templateObject2","TermsList_SingleTerm_templateObject3","TermsList_SingleTerm_templateObject4","TermsList","termOccurances","TermsSelectionDropdown","_filter","selectedTerms","setSelectedTerms","popoverVisible","setPopoverVisible","showLimitError","setShowLimitEror","fetchTaSuggestions","taSuggestionsLoading","handleCheckboxClick","updatedList","onTermsSearchHandler","onBulkSelectTop20Handler","addCompleteTerms","prepcCompleteTerms","completeTermsLength","prepIncludeMoreTerms","onUncheckAllClickHandler","onTriggerClickHandler","HeadingSection","SearchBox","QuotaInfo","ControllsBar","BulkControllBtn","SingleTermRow","opaque","TermUsage","BtnsContainer","Trigger","TermsSelectionDropdown_templateObject","TermsSelectionDropdown_templateObject1","TermsSelectionDropdown_templateObject2","TermsSelectionDropdown_templateObject3","TermsSelectionDropdown_templateObject4","TermsSelectionDropdown_templateObject6","TermsSelectionDropdown_templateObject7","TermsSelectionDropdown_templateObject8","TermsSelectionDropdown_templateObject9","TermsSelectionDropdown_templateObject11","TermsSelectionDropdown_templateObject12","TermsSelectionDropdown_templateObject13","TermsAssistantRightSidebar","RightSidebar_templateObject","RightSidebar_templateObject1","RightSidebar_templateObject2","RightSidebar_templateObject3","RightSidebar_templateObject4","RightSidebar_templateObject5","SingleCompetitor","contentScore","TopRankingCompetitors","topRankingCompetitorActiveKw","competitorsData","setTopRankingCompetitorsActiveKw","openCompetingFocusTermsDrawer","onSelect","dropdownClassName","DrawersTriggers","changeView","loadingTaSuggestions","setLoadingTaSuggestions","handleTriggerAssistant","finalPrepArr","buttonsConf","faListTree","hoverColor","openCompetitorsHeadingsDrawer","faMagicWandSparkles","tooltipContent","faWrench","faChartSimple","updatedButtonConf","SingleItem","DrawersTriggers_templateObject","DrawersTriggers_templateObject1","Analytics","ContentContainer","Analytics_templateObject","Analytics_templateObject1","KeywordSelector","isSubscriber","isCompetitorsTable","setFilteredCompetitorsData","setActiveKw","setCompetitors","activeKw","handleOnSelectChange","KeywordDropdownWrapper","KeywordSelector_templateObject","CompetitorsTable","filteredCompetitorsData","schemaTypesList","allSchemasCount","nullCount","selectedSchema","setSelectedSchema","setShowCompetitorTermsTableDetail","isSmallScreen","setIsSmallScreen","allowScroll","setAllowScroll","onWindowResize","innerWidth","average","reFormatSchemaType","schema","selectedSchemaValue","filteredItems","graph","graphItem","fixed","ellipsis","PageUrlWrapper","lineHeight","dr","parseFloat","toFixed","DRWrapper","schemaLength","schemaItemsList","BlueTextWithUnderline","ULStyled","LinksContainer","paddingRight","LinkWrapper","StyledAnchor","h1Count","h2Count","h3Count","TypesSchemaFilterWrapper","SchemaFilterTitle","SchemaFilterWrapper","SchemaFilter","scroll","y","_dir","CompetitorsTable_templateObject","CompetitorsTable_templateObject1","CompetitorsTable_templateObject2","CompetitorsTable_templateObject3","CompetitorsTable_templateObject4","CompetitorsTable_templateObject5","CompetitorsTable_templateObject6","CompetitorsTable_templateObject7","CompetitorsTable_templateObject8","CompetitorsTable_templateObject9","CompetitorsTable_templateObject10","CompetitorsTable_templateObject11","CompetitorsTable_templateObject12","CompetitorsDetail","competitorSchemaObject","competitorTitle","competitorUrl","competitorSchemaGraphIdx","formats","renderSchemaData","dataObj","LargeLine","mainLebel","mainValue","SchemaLabel","SchemaValue","urlValidationRegex2","isValid","utc","BackArrowContainer","SchemaContainer","SchemaHeader","SchemaPageTitle","context","CompetitorsDetail_templateObject","CompetitorsDetail_templateObject1","CompetitorsDetail_templateObject2","CompetitorsDetail_templateObject3","CompetitorsDetail_templateObject4","CompetitorsDetail_templateObject5","CompetitorsDetail_templateObject6","CompetitorsDetail_templateObject7","CompetitorsDrawerTab","setSchemaTypesList","setAllSchemasCount","setNullCount","showCompetitorTermsTableDetail","squareTooltip","IsRanking","IsNotRanking","focusTermsTooltip","CompetingFocusTermsDrawer","isCompetingFocusTermsDrawerOpen","closeCompetingFocusTermsDrawer","isOpeningKwSuggestionsFromContentResearch","setIsOpeningKwSuggestionFromContentResearch","selectedKeyword","setSelectedKeyword","selectedCompTabKw","setSelectedCompTabKw","isHovered","setIsHovered","maxElemHeight","setMaxElemHeight","allRef","keywordSuggestionsRef","elementsArray","elementsWidthArr","exportSingleNode","node","today","date","getFullYear","getMonth","getDate","html2canvas","then","canvas","toDataURL","onTabChange","schemaCountsHandler","competitorsTypes","countOccurrences","inputArray","counts","prototype","hasOwnProperty","call","afterVisibleChange","focusTermsGridData","TitleStyled","tabPosition","overflowX","Subtitle","data-html2canvas-ignore","SectionHeader","sites","Rank","Site","rotate","wrap","contentScores","focusTermUsageBySites","Square","keywordSuggestionsGridData","keywordSuggestionsUsageBySites","CompetingFocusTermsDrawer_templateObject","CompetingFocusTermsDrawer_templateObject1","CompetingFocusTermsDrawer_templateObject2","CompetingFocusTermsDrawer_templateObject3","CompetingFocusTermsDrawer_templateObject4","CompetingFocusTermsDrawer_templateObject5","CompetingFocusTermsDrawer_templateObject6","CompetingFocusTermsDrawer_templateObject7","CompetingFocusTermsDrawer_templateObject9","CompetingFocusTermsDrawer_templateObject10","CompetingFocusTermsDrawer_templateObject11","NewContentIdeaForm","drawerVisible","usaCode","selectedCountry","setSelectedCountry","onFormSubmit","topic","loadContentIdeasData","SCA_PAGE_CONTENT_IDEAS_GENERATE","SingleContentIdea","setConvertedText","newLineIndex","textWithoutLeadingSpace","firstTitle","breakFileName","fileName","faDownload","SCA_PAGE_CONTENT_IDEA_DOWNLOAD","SCA_PAGE_CONTENT_IDEA_COPY","CopyOutlined","ContentIdeas","csvModel","wordsArray","CsvDownloader","datas","filename","displayName","ExportOutlined","ContentIdeasDrawer","contentIdeas","setDrawerVisible","clearContentIdeas","setIsOpenContentGeneratorDrawer","SimilarKeyword","isIncluded","OverviewPage","addToLoadingArray","loadingArray","onRemoveKeywordFinish","ContentResearchDrawer","keywordDetail","isContentResearchDrawerOpen","closeContentResearchDrawer","getKeywordDetail","removeFromLoadingArray","countryName","similarKeywordsPageNumber","setSimilarKeywordsPageNumber","similarKeywordsPageSize","similarKeywordsData","setSimilarKeywordsData","similarKeywordsList","setSimilarKeywordsList","topCompetitorsData","setTopCompetitorsData","rankingPotentialData","setRankingPotentialData","handleFilterRenderData","dataArray","pageNumber","targetKwArray","similarKeywordsFormattedData","isKwIncluded","similarKeywords","onPaginationChange","relevanceData","competition","typicalTop10","averageContentScores","averageDr","averageWordCount","readAbility","averageReadability","SimilarKeywordConfig","BarChartColumn","numeral","PageTitle","skeletonMarginRight","totalSearchResults","rankingPotential","xAxis","svTrend","interval","formatter","rich","month","year","yAxis","volume","areaStyle","symbolSize","symbol","MiddleContainer","readability","Pagination","showSizeChanger","defaultPageSize","showQuickJumper","termsGrid","ContentResearchDrawer_templateObject","ContentResearchDrawer_templateObject1","ContentResearchDrawer_templateObject2","ContentResearchDrawer_templateObject3","ContentResearchDrawer_templateObject4","ContentResearchDrawer_templateObject5","ContentResearchDrawer_templateObject6","ContentResearchDrawer_templateObject7","ContentResearchDrawer_templateObject8","ContentResearchDrawer_templateObject9","ContentResearchDrawer_templateObject10","KeywordsDrawer","isOpenKeywordsDrawer","isDrawerFromCa","KeywordDetailContent","TechnicalsViewSwitcher","TechnicalsSwitcherContainer","ViewSwitcher_templateObject","PageSpeedIndex","refetchArticle","refetchPage","SpeedIndexContainer","psiMetrics","avgSpeedIndex","SpeedIndexDot","LastFetchContainer","updatedAt","faRotateRight","isInitialPageLoad","isTechnicalsDataLoading","PageSpeedIndex_templateObject","PageSpeedIndex_templateObject1","PageSpeedIndex_templateObject2","PageSpeedIndex_templateObject3","TechnicalScore","technicalsMsgColorMap","technicalScore","TitleAndWordCount","TechnicalScore_templateObject","TechnicalScore_templateObject1","TechnicalScore_templateObject2","TechnicalScore_templateObject3","auditLoader","setAuditLoader","onPageAuditPopoverVisible","setOnPageAuditPopoverVisible","contentAuditStore","loadContentAudit","setNewRecordId","antIconSecond","onRunPageAudit","countryCodeToUse","getId","shouldUseHeadlessBrowser","onPageAuditDetails","TopSeactionContainer","PopoverWrapper","getUniqueKeywords","existingValues","getFieldsValue","AntdCheckbox","PopoverKwContainer","PopoverBtnContainer","RunPageAuditBtn","faFileChartColumn","BtnText","Technicals_HeaderSection_templateObject","Technicals_HeaderSection_templateObject1","Technicals_HeaderSection_templateObject3","Technicals_HeaderSection_templateObject4","Technicals_HeaderSection_templateObject5","Technicals_HeaderSection_templateObject6","HeaderSection_templateObject8","AnalyticsCollapseCard","descriptionColor","colTitle1","colTitle2","sortKey","colTitle3","colTitle4","dataRenderer","isCollapse","defaultActive","plan","warningBar","setPageNumber","checkData","setCheckData","isFilterOpened","setIsFilterOpened","sortOrder","setSortOrder","formatData","setFormatData","sortData","sortBy","bordered","expandIcon","CaretUpFilled","faCaretUp","defaultCurrent","faFilter","ChevronUp","disabledTooltip","SchemaModal","setShowModal","dataList","setExpanded","dataForDisplay","ModalContentWrapper","MainContainer","potentialAction","z","wordBreak","queryInput","SchemaModal_templateObject","SchemaModal_templateObject1","SchemaModal_templateObject2","SchemaModal_templateObject3","SchemaModal_templateObject4","SchemaModal_templateObject5","SchemaModal_templateObject6","TechnicalsData","showMissingAltText","setShowMissingAltText","isActiveInternalBrokenLinks","setIsActiveInternalBrokenLinks","isActiveExternalBrokenLinks","setIsActiveExternalBrokenLinks","showSchemaModal","setShowSchemaModal","internalLinksFilters","statusCode","SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN","uiFormatImageSize","sizeArray","brokenHeaders","translateWord","getMissingAltTotal","imagesFilter","SCA_PAGE_IMAGES_SHOW_MISSING_ALT","externalLinksFilters","SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN","displayStatusCode","displayFollowCode","followCode","jsonLd","metaSummary","meta","field","statusColor","suggestionColor","getStatusColor","Image","getMissingAltText","WarningMiniBar","Video","video","visitable","ExternalLink","generateInternalLinksDesc","msgArr","labelColor","getInternalBrokenLinksCount","getInternalRedirectsCount","anchor","generateExternallLinksDesc","getExternalBrokenCount","getExternalRedirectsCount","List","ButtonLink","linkgraphDomain","Technicals","DataContainer","Technicals_templateObject","Technicals_templateObject1","compListCollapsed","HeadingsTree","activeCompetitor","setShowBulkAddContentBtn","showBulkAddContentBtn","setCheckedCount","checkedCount","setCheckedIndexData","checkedIndexData","setCopiedHeadings","addedHeadings","setAddedHeadings","copiedHeading","setCopiedHeading","tag","setFilters","onCheckboxChecked","curFilters","checkboxClickHandler","headingContent","headingTag","handleCopyClick","updatedCopiedHeadings","textToAdd","headingType","cleanText","curAddedHeadings","updatedAddedHeading","addHeadingsHandler","FiltersWrapper","FiltersContainer","headingsHierarchy","BulkAddAction","faSquareCheck","ActionsWrapper","AddHeadings","CopyAction","CancelAction","FiltersTree","SingleHeading","itemId","HeadingTag","HeadingText","Copy","InsertText","calculateIndent","getTopMargin","calculateFontSize","generateColor","HeadingsTree_templateObject","HeadingsTree_templateObject1","HeadingsTree_templateObject2","HeadingsTree_templateObject3","HeadingsTree_templateObject4","HeadingsTree_templateObject5","HeadingsTree_templateObject6","HeadingsTree_templateObject7","HeadingsTree_templateObject8","HeadingsTree_templateObject9","HeadingsTree_templateObject10","HeadingsTree_templateObject11","HeadingsTree_templateObject12","HeadingsTree_templateObject13","CompetitorHeadingsDrawerContent","setCompListCollapsed","setCheckedHeadingsWithTags","checkedHeadingsWithTags","setActiveCompetitor","updatedCompetitors","currentArticleOutline","generateHeadingOutline","getBlocksAsArray","outline","lastIndexOf","isCurrentArticleOutline","faBars","faBarsSort","competitorsList","CompetitorsList","CurrentArticleOutline","Order","NameLogoUrl","Name","Url","Logo","NameAndUrl","Headingoutlines","DrawerContent_templateObject","DrawerContent_templateObject1","DrawerContent_templateObject2","DrawerContent_templateObject3","DrawerContent_templateObject4","DrawerContent_templateObject5","DrawerContent_templateObject6","DrawerContent_templateObject7","DrawerContent_templateObject8","DrawerContent_templateObject9","DrawerContent_templateObject10","DrawerContent_templateObject11","DrawerContent_templateObject12","DrawerContent_templateObject13","CompetitorsHeadingsDrawer","isCompetitorsHeadingsDrawerOpen","closeCompetitorsHeadingsDrawer","SidebarContent","showTechnicals","setShowTechincals","TechnicalsContainer","LoadingBannerContainer","LongLoadingBanner","isFetchingTargetKw","SidebarContent_templateObject","SidebarContent_templateObject1","SidebarContent_templateObject2","SidebarContent_templateObject3","SidebarContent_templateObject4","RightSidebarV2","onResizeCallback","isHidden","topPosition","setTopPosition","sideBarRef","sidebarUpdate","handleScroll","pageYOffset","passive","_document_querySelector","Resizable","onResize","dir","elRef","enable","topRight","bottomRight","bottomLeft","topLeft","analyzingError","ErrorView","PageEditor","rootStore","loadAiWriterHistory","refetchOneClickDraftResultForArticleCreation","isExportingPageLoader","setIsPublic","setFocusTermsClassNames","setSideBarWidth","setViewers","emailAddress","resultId","triggerFreddySurvey","FREDDY_EVENT_SCA_ARTICLE_CREATED","updateFocusTermsState","sortedFocusTerms","internalLinksClusters","variations","finalData","parts","prepareFinalTerms","regex","multiWordCountRegex","mapFocusTerms","dbRef","firebase","database","snapshot","exists","catch","console","onDisconnect","cancel","setRepollsAllowed","focusedState","moveFocusToStart","afterSelectionMove","firstKey","formattedEditorState","setIsInitialEditorStateFetched","loadProject","getAllProjects","setRefechForBulkArticleCreation","getTime","loadPages","activeProjectId","initialLoadPage","setNewPage","headerStore","setComponent","spend","quotaProps","MainLoader","module","exports"],"sourceRoot":""}
')) {\n return 'h3';\n }\n if (text.startsWith('')) {\n return 'h4';\n }\n if (text.startsWith('')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (linkActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (linkActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions([...prepDataArr]);\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n const parser = new DOMParser();\n const doc = parser.parseFromString(block.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n const suggestionList = [];\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n\n if (block.isSuggestion) {\n return (\n <>\n term.keyword?.replaceAll(' ', '-')+`${block?.itemIndex}`)), block.status)}>\n {showOriginalBlockId != null && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n ;\n }\n })}\n\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsLinkActive(false);\n clearAllTaData();\n setLinksForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n \n {blocksRenderer(getstagingLinkSuggestions)}\n ;\n});\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 65%;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:10%;\n padding-right:40px;\n color: rgba(0, 0, 0, 0.85);\n border-right: 1px solid lightgray;\n .linkInsertionChange {\n text-decoration: underline;\n }\n p a{\n color: rgba(0, 0, 0, 0.85);\n }\n .default p span a{\n color: #1890ff;\n }\n .accepted{\n span a{\n text-decoration: underline;\n color: #1FAC47 !important;\n text-decoration-color: #1FAC47 !important;\n\n }\n }\n .dismissed{\n span a{\n text-decoration: underline;\n color: #F44343 !important;\n text-decoration-color: #F44343 !important;\n }\n }\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n img {\n width: 100%;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styles from './content-editor.module.scss';\nimport {EditorSection} from './EditorSection/EditorSection';\n// import {FocusTermsPopups} from './FocusTermsPopups';\nimport {TopSection} from './TopSection/TopSection';\nimport styled from 'styled-components';\nimport {TextSuggestions} from '../RightSidebar/v2-sidebar/Analytics/TermsAssistant/TextSuggestions';\nimport {TextSuggestionsLinks} from '../RightSidebar/v2-sidebar/Analytics/LinkAssistant/TextSuggestionsLinks';\n\n\ninterface Props {\n // allRef: any;\n newPage: any;\n htmlToDraft: any;\n}\n\nexport const LeftSide = observer(({newPage, htmlToDraft}: Props) => {\n const {contentOptimizer} = useStore('');\n const {currentPage} = contentOptimizer;\n const {\n sideBarWidth,\n isSideBarHidden,\n isTaActive,\n isLinkActive,\n } = currentPage;\n\n return \n \n ;\n});\n\n\nconst LeftSideContainer = styled.div<{isNewPage?: boolean; isSideBarHidden?: boolean; sideBarWidth?: string; isLinkSuggestionActive?: boolean}>`\n overflow: hidden;\n text-align: -webkit-center; \n transition: all .3s ease;\n width: 100%;\n max-width: ${p => p.isLinkSuggestionActive ? '100%' : !p.isNewPage ? !p.isSideBarHidden ? `calc(100% - ${p.sideBarWidth} + 15px)` : '100%' : '100%'};\n`;\n","import {WarningOutlined} from '@ant-design/icons';\nimport React from 'react';\nimport styles from './index.module.scss';\n\nexport const Error: React.FC = () => {\n return (\n \n An error has occurred, please try again later.
\n \n );\n};\n","import {FocusTermClusteredType} from '@/store/content-optimizer/currentPage';\nimport {Table} from '@/components/common-components/components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {filterDataInMemory} from '@/utils/filter-data';\nimport styles from './style.module.scss';\nimport {formatLargeNumber} from '@/utils/number';\nimport {ColumnType} from 'antd/es/table';\n\ninterface Props {\n cluster: FocusTermClusteredType;\n isClusterRemoving: boolean;\n}\n\nexport const SingleCluster = observer(({\n cluster,\n isClusterRemoving,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n enum SORT_DIRECTION {\n ascend = 'ascend',\n descend = 'descend'\n }\n\n const [tableData, setTableData] = useState([]);\n const [sortField, setSortField] = useState('requiredCountMin');\n const [sortDirection, setSortDirecion] = useState(SORT_DIRECTION.descend);\n\n\n const removeClusterHandler = (term: string) => {\n if (currentPage.isBulkRemovingCluster) return;\n currentPage.bulkRemoveTerms([term], 'term', cluster.title);\n };\n\n const setTerms = () => {\n const {dataFiltered} = filterDataInMemory(cluster?.focusTerms, '', [], [], 1, cluster?.focusTerms.length, sortField, sortDirection);\n setTableData(dataFiltered);\n };\n\n const handleTableChange = async (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortFieldName} = column || {};\n\n setSortField(sortFieldName);\n setSortDirecion(order);\n if (order) {\n const {dataFiltered} = filterDataInMemory(tableData, '', [], [], 1, tableData.length, sortFieldName, order);\n setTableData(dataFiltered);\n } else {\n setTableData(cluster?.focusTerms);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [cluster]);\n\n type ExtendedColumnsType = ColumnType & {defaultSortOrder?: 'ascend' | 'descend'; sortFieldName?: string};\n\n const tableColumns = (removingTerms: boolean): ExtendedColumnsType[] => {\n return [\n {\n title: 'TOPICAL TERM',\n dataIndex: 'name',\n key: 'name',\n align: 'left' as 'left',\n width: 250,\n render: (_, record) => {\n return \n {record.name}\n {record?.foundIn && record.foundIn.map((item, idx) => {\n return {item} ;\n })}\n {record?.isBranded && {'branded'} }\n ;\n },\n },\n {\n title: 'MSV',\n dataIndex: 'sv',\n key: 'sv',\n align: 'right' as 'right',\n sortFieldName: 'sv',\n width: 60,\n sorter: true,\n render: (_, record) => {\n return {formatLargeNumber(record.sv)};\n },\n },\n {\n title: 'USAGE',\n dataIndex: 'requiredCountMin',\n key: 'requiredCountMin',\n defaultSortOrder: 'descend',\n align: 'right' as 'right',\n width: 60,\n sortFieldName: 'requiredCountMin',\n sorter: true,\n render: (_, record) => {\n return {`${record.usedCount}/${record.idealCountMax}`};\n },\n },\n {\n title: 'REMOVE',\n dataIndex: 'name',\n key: 'name',\n align: 'right' as 'right',\n width: 80,\n render: (_, record) => {\n return removeClusterHandler(record.name)}>\n ;\n },\n },\n\n ];\n };\n\n return \n >;\n}\n\nexport const BulkRemoveTermsModal = observer(({\n isModalOpen,\n setIsModalOpen,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n const [clusteredTerms, setClusteredTerms] = useState([]);\n const [clusterToRemove, setClusterToRemove] = useState('');\n\n const setTerms = () => {\n const clusterTerms = toJS(currentPage?.analytics?.clusters);\n const tempArr = [];\n\n setClusteredTerms(toJS(clusterTerms));\n\n if (currentPage.focusTermsSorter.key) {\n clusterTerms?.forEach((item, id) => {\n let tempCluster = [];\n\n tempCluster = item?.focusTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n\n tempArr.push({\n ...clusterTerms[id],\n focusTerms: tempCluster,\n });\n });\n\n\n setClusteredTerms(tempArr);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n const removeClusterHandler = async (e, clusterTitle: string) => {\n e.preventDefault();\n e.stopPropagation();\n const clusterToRemove = clusteredTerms?.find(cluster => cluster.title === clusterTitle);\n const termsArr = clusterToRemove?.focusTerms?.map(term => term.name);\n setClusterToRemove(clusterTitle);\n try {\n await currentPage.bulkRemoveTerms(termsArr, 'cluster', clusterTitle);\n } catch (e) {\n setClusterToRemove('');\n } finally {\n setClusterToRemove('');\n }\n };\n\n return Bulk Remove Topical Terms \n \n {clusteredTerms?.filter(cluster => cluster.focusTerms?.length > 0)?.map((cluster, idx) => {\n return \n {cluster.title} \n {`(Terms: ${cluster.focusTerms?.length}, MSV: ${formatLargeNumber(cluster.clusterSv)})`} \n }\n extra={ removeClusterHandler(e, cluster.title)}>\n }>\n \n ;\n })}\n \n setIsModalOpen(false)}>Close \n \n \n\n\n ;\n});\n\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 5px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\n\nconst ClusterHeader = styled.div`\n display: flex;\n align-items: baseline;\n`;\nconst ClusterName = styled.div`\n font-weight: 500;\n color: #121212;\n`;\nconst ClusterDesc = styled.div`\n font-size: 12px;\n color: #4E5156;\n margin-left: 5px;\n`;\n\nconst CollapseStyled = styled(Collapse)`\n // background: #fff;\n border: none;\n max-height: calc(75vh - 185px);\n overflow-y: auto;\n\n .ant-collapse-content {\n border-top: 0px solid transparent;\n background-color: #fff;\n }\n\n .ant-collapse-item {\n border-radius: 10px !important;\n margin-bottom: 10px;\n border: 1px solid #E8E8E8;\n background-color: #fff;\n }\n\n .ant-collapse-content-box {\n padding-top: 0px;\n }\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faArrowUpArrowDown, faSliders} from '@fortawesome/pro-regular-svg-icons';\nimport {faFileArrowDown, faFileLines, faFileSpreadsheet} from '@fortawesome/pro-light-svg-icons';\nimport {faPlus, faTrash} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Dropdown, Radio, Tooltip, Spin, Divider, Menu} from 'antd';\nimport {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport {Modal} from '@/components/common-components';\nimport {faGoogle} from '@fortawesome/free-brands-svg-icons';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport {BulkRemoveTermsModal} from '../BulkRemoveTermsModal/BulkRemoveTermsModal';\nimport {toJS} from 'mobx';\nimport {useStore} from '@/store/root-store';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface TopicalProps {\n onViewChange?: Dispatch>;\n onChangeIncludeBranded?: Dispatch>;\n onTermsFilter?: Dispatch>;\n includeBranded: boolean;\n currentView?: 'clusters' | 'completion';\n store: CurrentPageStore;\n onSortTerms?: () => void;\n}\n\n\nexport const TermsDropdownController = observer(({onViewChange, currentView, store, onChangeIncludeBranded, includeBranded, onTermsFilter, onSortTerms}: TopicalProps) => {\n const {Group} = Radio;\n const antIcon = \n e.stopPropagation()}>\n onViewChange(e.target.value)} style={{display: 'flex', flexDirection: 'column'}}>\n Editor settings: \n currentPage?.setHighlights(e.target.checked)}>Enable Terms Highlighting in the Editor \n Terms recommendations: \n onCheckboxClicked(e.target.checked)}>Include Branded Terms \n\n \n {isNotPublic && setShowBulkRemoveTermsModal(true)}> }\n \n ;\n\n return \n setShowExportModal(false)}>\n Export Content Brief \n Export a brief with the SEO and Content data for this article (Meta Data, Word Count, Focus Terms, questions, Link Suggestions, etc.) \n \n setShowExportModal(false)}>Close \n \n window.open(getXlsExportLink(), '_self')}>\n \n downloadFileToTxt()}>\n \n exportToGoogleDocs()} disabled={exportToDocsLoading}>\n {exportToDocsLoading ? \n \n \n \n \n \n {Object.keys(termsFiltersSetup).map((item, idx) => {\n return \n termsFilterHandler(e.target.checked, item)}>\n {getTermsCount(termsFiltersSetup[item].type)}\n \n ;\n })}\n \n \n \n \n {sorters.map((item, index) => (\n handleOnSortChange(item)} key={index}>{item.label} \n ))}\n \n }>\n \n Sort \n \n \n \n\n {store?.isRemovingFocusTerms && \n currentPage.setShowAddFocusTermModal(true)}>\n \n \n \n\n {isNotPublic && setShowExportModal(true)}>\n }\n\n \n \n \n \n \n \n \n \n ;\n});\n\n// TOPICAL TERMS STYLED COMPONENTES\nconst GearIcon = styled.a`\n height: 14px;\n cursor: pointer;\n margin-top: auto;\n margin-bottom: auto;\n display: block;\n`;\nconst GroupTermsContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n`;\n\nconst TermsContainer = styled.div`\n display: flex;\n flex-direction: column;\n background-color: transparent;\n padding: 10px 10px;\n background-color: #2D2F34;\n border-radius: 5px 5px 0 0;\n`;\n\nconst ExportBtn = styled(Button)`\n background: transparent;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: auto;\n margin-right: 0px;\n padding: 7px 10px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst AdjustBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n padding-bottom: 5px;\n cursor: default;\n`;\n\n\nconst TermsViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n padding: 12px 20px;\n border-radius: 17px;\n margin-top: 10px;\n width: 232px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n// margin-left: 3px !important;\n display: flex;\n align-items: flex-start;\n font-weight: 500 !important;\n margin-right: 8px;\n\n .ant-checkbox-inner {\n width: 14px;\n height: 14px;\n padding: 7px;\n border-radius: 4px !important;\n ::after {\n top: 47% !important;\n left: 18.5% !important;\n }\n }\n\n .ant-checkbox {\n padding-right: 0px !important;\n padding-left: 0px !important;\n }\n\n span {\n padding-right: 1px;\n padding-left: 1px;\n font-size: 13px;\n }\n`;\n\nconst PTag = styled.p`\nmargin-left: 10px;\nmargin-bottom: 0px !important;\n`;\n\nconst CheckboxStyledHighlights = styled(CheckboxStyled)`\nmargin-bottom: 4px;\n`;\n\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n margin-bottom:5px;\n`;\n\n\nconst ExportModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n\nconst ExportModalDesc = styled.div`\n color: #4E5156;\n`;\n\nconst ExportModalButtonsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst BulkRemoveTermsBtn = styled.div`\n cursor: pointer;\n margin-top: 6px;\n font-weight: 500;\n`;\nconst TermsFilterContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 103%;\n border-radius: 0px 4px 4px 0px;\n margin-left: -10px;\n padding: 0px 9px 10px 15px;\n`;\n\nconst AddButton = styled.div`\n margin-left: 6px;\n cursor: pointer;\n`;\n\nconst Sort = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n`;\n\nconst SortTxt = styled.span`\n color: var(--Text-gray-light, var(--Gray-light, #E8E8E8));\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {formatLargeNumber} from '@/utils/number';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip, Input as AntdInput} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react-lite';\nimport {ChangeEvent, useState} from 'react';\nimport styled from 'styled-components';\nimport {faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\n\ninterface Props {\n store: CurrentPageStore;\n onFilter: (query: string[]) => void;\n}\nexport const TermsDataController = observer(({\n store,\n onFilter,\n}: Props) => {\n const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n\n const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n return \n \n \n \n {store?.isAnalyzing ? : \n {toJS(store.analytics?.clusters)?.map((cluster, id) => {\n return \n \n Terms in cluster: \n {cluster.focusTerms?.length} \n \n \n Monthly Search Volume: \n {formatLargeNumber(cluster.clusterSv)} \n \n }>\n item.trim() === cluster.title).length > 0}\n onClick={() => handleOnClusterClick(cluster.title)}>{`#${cluster.title} - ${cluster.focusTerms?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n \n ;\n});\n\nconst ClusterTooltipSingleRow = styled.div`\n display: flex;\n justify-content: space-between\n`;\nconst ClusterTooltipLabel = styled.div`\n font-size: 12px;\n font-weight: 400;\n color: #E8E8E8;\n`;\n\nconst ClusterTooltipValue = styled.div`\n font-size: 12px;\n font-weight: 500;\n color: #FFFFFF;\n`;\n\nconst Wrapper = styled.div`\n margin-bottom: 15px;\n border-radius: 8px;\n background: #282B2F;\n box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.02);\n padding: 10px;\n`;\nconst SearchAndSort = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\nconst ClustersWrapper = styled.div`\n display: flex;\n`;\nconst ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n display: flex;\n flex-wrap: wrap;\n\n height: ${p => p.expandedClusters ? 'auto' : '25px'};\n overflow: hidden;\n`;\n\nconst SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n border-radius: 60px;\n padding: 3px 8px;\n width: auto;\n height: 20px;\n font-size: 11px;\n margin-right: 6px;\n margin-bottom: 6px;\n cursor: pointer;\n\n &:hover {\n background-color: #4B4D51 !important;\n }\n`;\n\nconst InputStyled = styled(AntdInput)`\n height: 32px;\n margin-bottom: 5px;\n background: #282B2F;\n border-color: transparent !important;\n .ant-input {\n margin-left: 7px;\n background: #282B2F;\n color: white !important;\n color: var(--Text-gray, var(--Gray, #A3A4A4));\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n }\n .ant-input-affix-wrapper {\n border: none !important;\n }\n &:hover{\n box-shadow: none !important;\n border-color: transparent !important;\n }\n &:focus{\n box-shadow: none !important;\n }\n`;\n","import {useState} from 'react';\nimport {faArrowDown, faCheck, faTrash} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport styles from '../../style.module.scss';\nimport {\n costPerClickFormatter,\n searchVolumeFormatter,\n isScaPublicPage,\n} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/LeftSide/EditorSection/content-editor/utils';\nimport {\n Divider,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport {NextImg} from '@/utils/nextImg';\n\nimport {getTwoGreenPercentageColor} from '@/utils/colors';\nimport classNames from 'classnames';\nimport {useTranslation} from 'next-i18next';\nimport {CurrentPageStore, FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {getDomain, getSiteName} from '@/utils/url';\nimport {isNil} from 'lodash';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport styled from 'styled-components';\nimport {faWikipediaW} from '@fortawesome/free-brands-svg-icons';\n\ninterface Props {\n focusTerm: FocusTermModel;\n i: number;\n store: CurrentPageStore;\n}\n\nexport const SingleTerm = observer(({focusTerm, i, store}: Props) => {\n const {t} = useTranslation('landing-page-optimizer');\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemoving, setIsRemoving] = useState(false);\n\n const antIcon = \n Topical term
\n {focusTerm.name}
\n \n {focusTerm.sv !== undefined && focusTerm.sv !== null && {`SV: ${searchVolumeFormatter(focusTerm.sv)}`}}\n {focusTerm.cpc !== undefined && focusTerm.cpc !== null && {`CPC: ${costPerClickFormatter(focusTerm.cpc)}`}}\n \n {focusTerm?.foundIn && focusTerm?.foundIn.length > 0 ?\n \n Used in \n {focusTerm.foundIn.map((item, i)=> {\n if (focusTerm.foundIn.length === 1) {\n return {`<${item}>`};\n } else {\n if (i === focusTerm.foundIn.length - 1) {\n return <>and {`<${item}>`};\n } else if (i === focusTerm.foundIn.length - 2) {\n return {`<${item}>`} ;\n } else {\n return {`<${item}>`}, ;\n }\n }\n })}\n :\n null}\n {'Current / Recommended # of uses'}
\n \n {store?.content?.targetKewyordsOnlyArr?.includes(focusTerm.name) ?
Target keywords do not have any usage limitations. : null}\n {focusTerm.usedCount}\n of {focusTerm.requiredCountMin}\n {`(Max: ${focusTerm.requiredCountMax || 0})`}\n \n {'Competitors using this term'}
\n \n {focusTerm?.competitors?.results?.map((competitor, index) => (\n \n {competitor.title ?? getSiteName(competitor.hostname)}
\n {competitor.url}\n \n {competitor?.snippets?.map((snippet, idx) => {\n return \n \n {/* {snippet.length > 130 ? snippet.substring(0, 130) + '...' : snippet} */}\n
\n {idx !== (competitor?.snippets?.length - 1) && }>\n \n \n // {`${index + 1}. `}{competitor.hostname}\n ))}\n\n \n {(!isNil(focusTerm?.normalizedScore) || focusTerm?.source) ? \n {focusTerm?.source ?\n {`Keyword source: `}{focusTerm?.source?.join(', ')}
: null}\n {!isNil(focusTerm?.normalizedScore) ? <>\n {`Importance score: `}{focusTerm.normalizedScore}
\n : null\n }\n {isAnyFocusTermLink() ?\n \n Entity References \n \n {focusTerm?.crunchbaseLink ?\n window.open(focusTerm?.crunchbaseLink)} style={{display: 'flex'}}>\n \n Crunchbase\n : ''}\n {focusTerm?.knowledgeGraphLink ?\n window.open(focusTerm?.knowledgeGraphLink)} style={{display: 'flex'}}>\n \n Google\n : ''}\n {focusTerm?.wikipediaLink ?\n window.open(focusTerm?.wikipediaLink)} style={{display: 'flex'}}>\n : ''}\n {focusTerm?.wikidataLink ?\n window.open(focusTerm?.wikidataLink)} style={{display: 'flex'}}>\n \n Wikidata\n : ''}\n \n : ''}\n \n \n }\n >\n\n \n \n {focusTerm.name} \n {focusTerm?.isBranded && {'branded'} }\n {focusTerm?.foundIn && focusTerm.foundIn.map((item, idx) => {\n return {item} ;\n })}\n \n \n {termContainerSetup[focusTerm.status].icon}\n {focusTerm.usedCount} / {focusTerm.requiredCountMin}\n\n \n {\n navigator.clipboard.writeText(focusTerm.name);\n setCopySuccess(true);\n }}>\n \n \n \n\n {!isScaPublicPage() ? {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n {(isRemoving && store.isRemovingFocusTerms) ? \n \n );\n});\n\nconst TermContainer = styled.div`\n margin-right: 5px;\n margin-left: 5px;\n margin-bottom: 9px;\n display: flex;\n max-width: 300px;\n cursor: default;\n\n\n .termControllsContainer {\n position: absolute;\n right: -100%;\n width: 100%;\n height: 100%;\n transition: all .3s ease;\n background: #2D2F34;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n }\n\n &:hover {\n .termControllsContainer {\n right: 0;\n }\n }\n`;\nconst Left = styled.div<{background: string; hoverBackground: string}>`\n padding: 3px 8px;\n background: ${p => p.background};\n width: 100%;\n border-radius: 36px 0 0 36px;\n display: flex;\n flex-wrap: wrap;\n max-width: 260px;\n align-items: center;\n transition: background .2s ease;\n\n &:hover {\n background: ${p => p.hoverBackground};\n }\n`;\nconst TermName = styled.div`\n font-size: 13px;\n color: #fff;\n line-height: 13px;\n`;\nconst BrandedLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n color: #4ebbab;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\nconst FoundInLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\n\nconst Right = styled.div<{border: string}>`\n padding: 5px 7px;\n border: ${p => `2px solid ${p.border}`};\n border-radius: 0 36px 36px 0;\n font-size: 13px;\n display: flex;\n align-items: center;\n line-height: 13px;\n position: relative;\n overflow: hidden;\n min-width: fit-content;\n cursor: pointer;\n \n\n\n`;\n\nconst CopyIcon = styled.div`\n`;\nconst ReferencesTitle = styled.p``;\nconst ReferencesWrapper = styled.div``;\nconst LinksWrapper = styled.div`\ndisplay: flex;\nflex-wrap: wrap;\ngap: 8px;\n`;\nconst SingleLink = styled.div`\ndisplay: flex;\npadding: 3px 6px;\njustify-content: center;\nalign-items: center;\ngap: 4px;\nborder-radius: 6px;\nborder: 1px solid #E8E8E8;\nbackground:#FFF;\ncursor: pointer;\nspan {\n color: #121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n}\n`;\nconst LowerSection = styled.div`\npadding: 10px 21px;\nbackground: #f9f9fb;\n`;\n","import {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {TermsDropdownController} from '../DropdownController/TermsDropdownController';\nimport styled from 'styled-components';\nimport {toJS} from 'mobx';\nimport {TermsDataController} from '../DropdownController/TermsDataController';\nimport {SingleTerm} from './SingleTerm';\nimport {FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {Tooltip} from 'antd';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\n\nexport const TermsDropdowns = observer(() => {\n // const [defaultActiveCluster, setDefaultActiveCluster] = useState(['1']);\n const [includedBranded, setIncludeBranded] = useState(true);\n const [query, setQuery] = useState([]);\n const [termsToShow, setTermsToShow] = useState(['include-more', 'included', 'include-less']);\n const [isCopied, setIsCopied] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const [standardTerms, setStandardTerms] = useState([]);\n\n const setTerms = (queryParam?: string[]) => {\n if (queryParam?.length) {\n setQuery(queryParam);\n } else {\n setQuery([]);\n }\n\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (queryParam?.length) {\n for (let i = 0; i < queryParam.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(queryParam[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n if (currentPage.focusTermsSorter.key === 'leastCount') {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (a.usedCount < b.usedCount) return -1;\n });\n } else {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n }\n\n\n filteredTerms = filteredTerms?.filter(term => termsToShow.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n const filterTermsHandler = (termsToShowParam: string[]) => {\n setTermsToShow(termsToShowParam);\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (query?.length) {\n for (let i = 0; i < query.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(query[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n\n filteredTerms = filteredTerms?.filter(term => termsToShowParam.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n return <>\n \n \n \n \n {standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n }).map((term, idx) => {\n return ;\n })}\n \n {\n if (!visible) {\n setTimeout(() => setIsCopied(false), 300);\n }\n }}>\n {\n if (standardTerms?.length) {\n navigator.clipboard.writeText(standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n })?.map(i => i?.name).join(', '));\n }\n setIsCopied(true);\n }}\n > \n ;\n});\n\nconst TopicalTermsContainer = styled.div`\nbackground-color: #2D2F34;\n \n`;\n\nconst TermsContainer = styled.div<{focusMode?: boolean}>`\n padding-right: 15px;\n padding-bottom: 16px;\n border-radius: 0 0 8px 8px;\n display: flex;\n flex-wrap: wrap;\n max-height: ${p => !p.focusMode ? '476px' : 'calc(100vh - 440px)'};\n overflow-y: auto;\n \n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst CopyButton = styled.button`\n background-color: transparent;\n border: 0px;\n cursor: pointer;\n margin: 6px;\n color: rgb(52, 174, 243);\n`;\n\n","import {observer} from 'mobx-react-lite';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {TermsDropdowns} from './TermsDropdowns';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const FocusTermsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n return currentPage?.analytics?.includedTerms?.length || currentPage?.analytics?.includeMoreTerms?.length || currentPage?.analytics?.includeLessTerms?.length ? (\n \n {/* ;\n});\n\nconst EmptyDataBox = styled.div`\n background: #2d2f34;\n border-radius: 5px;\n box-shadow: 0 4px 21px rgba(0, 0, 0, 0.02);\n display: flex;\n padding: 12px 15px;\n\n .emptyImg {\n display: flex;\n justify-content: center;\n }\n\n .emptyDataTitle {\n color: #a3a4a4;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n margin-left: 17px;\n }\n`;\n\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button} from '@/components/common-components/v2/Button';\n\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faDownLeftAndUpRightToCenter, faFileDownload, faUpRightAndDownLeftFromCenter} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react';\nimport {faCheck, faSyncAlt} from '@fortawesome/pro-regular-svg-icons';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface Props {\n currentView?: 'links' | 'terms';\n store: CurrentPageStore;\n}\n\n\nexport const LinkSuggestionsDropdownController = observer(({currentView, store}: Props) => {\n const [isSynced, setIsSynced] = useState(false);\n const [isSyncing, setIsSyncing] = useState(false);\n const isNotPublic = !isScaPublicPage();\n\n const onLinksSync = async () => {\n try {\n setIsSyncing(true);\n // await store?.getInternalLinkSuggestions(store?.content?.uuid, true);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setIsSynced(true);\n setTimeout(() => {\n setIsSynced(false);\n }, 3000);\n } catch (e) {\n setIsSyncing(false);\n } finally {\n setIsSyncing(false);\n }\n };\n\n const getXlsExportLink = () => {\n const token = getTokenFromCookies();\n if (store?.content?.uuid) {\n const baseUrl = getApiUrl(BaseApi.CA_ENDPOINT, `/api/pages/${store?.content?.uuid}/export-data-to-xls/`);\n const savedKeywordsUrl=`${baseUrl}?&jwt=${token}`;\n return savedKeywordsUrl;\n }\n };\n\n\n return \n \n store.setFocusTermsExpanded(!store.focusTermsExpanded)}>\n {store?.focusTermsExpanded ? 'Default Mode' : 'Focus Mode'} \n \n \n\n {/* \n {currentView === 'links' ? 'Internal' : 'External links'} \n \n\n {currentView === 'links' ? \n Keywords \n : null} */}\n\n {isNotPublic && (currentView === 'links' ? \n : null)}\n\n\n onLinksSync()}>\n \n \n\n ;\n});\n\nconst Container = styled.div<{current: string}>`\n display: flex;\n align-items: center;\n padding: 10px 15px;\n justify-content: ${p => p.current === 'links' ? 'space-between' : 'flex-start'};\n`;\n\n\nconst FocusModeBtn = styled(Button)`\n background: transparent;\n padding: 4px 0px;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: 0px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst FocusModeLabel = styled.span`\n color: #E8E8E8;\n font-size: 12px;\n margin-bottom: -2px;\n`;\n\nconst ExportIcon = styled.a`\n display: flex;\n align-items: center;\n cursor: pointer;\n background: transparent;\n font-size: 12px !important; \n margin-left: auto;\n margin-right: 0px;\n color: #fff;\n padding: 7px 20px;\n height: 28px !important;\n\n &:focus,\n &:hover {\n background: transparent;\n color: #fff;\n }\n`;\n\n\nconst RefetrchBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n margin-right: 0px;\n`;\n","import {InternalLinkType} from '@/store/content-optimizer/CurrentPageModel';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip} from 'antd';\nimport styled from 'styled-components';\nimport {\n faCheck,\n faStar,\n} from '@fortawesome/pro-regular-svg-icons';\nimport {faStar as faStarSolid} from '@fortawesome/pro-solid-svg-icons';\nimport {useEffect, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n link: InternalLinkType;\n customCallback?: () => void;\n}\nexport const SingleSuggestion = observer(({link, customCallback}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemovingTerm, setIsRemovingTerm] = useState(false);\n const [isBookmarked, setIsBookmarked] = useState(link?.isBookmarked);\n const {contentOptimizer: {currentPage: {removeInternalLinkSuggestion, bookmarkInternalLinkSuggestion, content: {uuid}}}} = useStore('');\n\n const antdIcon = \n \n \n \n \n \n \n {link?.title ? link.title : ''}\n \n {isBookmarked ? : null}\n \n\n \n {link?.path}\n \n \n \n \n \n {\n setIsBookmarked(!isBookmarked);\n await bookmarkInternalLinkSuggestion(uuid, link?.url);\n if (typeof customCallback == 'function') customCallback();\n }}>\n \n \n \n \n \n \n \n {\n setIsRemovingTerm(true);\n await removeInternalLinkSuggestion(uuid, link?.url, link?.keywords);\n if (typeof customCallback == 'function') customCallback();\n setIsRemovingTerm(false);\n }}>\n {isRemovingTerm ? : \n \n \n\n ;\n});\n\nconst SingleLinkContainer = styled.div`\n margin-bottom: 12px;\n display: flex;\n justify-content: space-between;\n position: relative;\n\n .actionsMenu {\n display: none;\n font-size: 12px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n cursor: pointer !important;\n position: absolute;\n background: linear-gradient(90deg, #2d2f342b -10.83%, #2d2f34 39.77%);\n padding-left: 30px;\n right: 0;\n }\n\n &:hover {\n .actionsMenu {\n display: flex;\n }\n }\n\n .copyTooltip {\n :global(.ant-tooltip-content) {\n background-color: $color-gray-dark;\n border-radius: 10px !important;\n }\n \n :global(.ant-tooltip-arrow) {\n display: none !important;\n }\n \n :global(.ant-tooltip-inner) {\n border-radius: 10px !important;\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n }\n`;\nconst Right = styled.div`\n width: 90%;\n margin-right: auto;\n`;\nconst Left = styled.div`\n display: flex;\n width: 10%;\n`;\nconst TitleAndStar = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n`;\nconst Title = styled.div`\n cursor: pointer;\n color: #e8e8e8 !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 90%;\n`;\nconst Link = styled.a`\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n color: #34AEF3;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\n\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {SingleSuggestion} from './SingleISugesstion';\nimport styles from '../CommonCitations/style.module.scss';\n\ninterface Props {\n data: any[];\n store?: CurrentPageStore;\n isQueried?: boolean;\n customCallback?: () => void;\n}\n\n\nexport const InternalLinksSuggestions = observer(({data, store, isQueried, customCallback}: Props) => {\n return <>\n \n {data?.length ?\n data?.map((suggestion, id) => (\n \n )) : isQueried ?\n \n No Internal Link Suggestions found that match your search.\n :\n store?.content?.targetKeywords?.length === 0 ?\n \n Please add Target Keywords to get Internal Link Suggestions.\n : \n No Internal Link Suggestions found for these Target Keywords.\n }\n \n\n ;\n});\n\n\nconst DropdownsContainer = styled.div`\n background-color: #2D2F34;\n max-height: 340px;\n overflow-y: auto;\n padding-right: 15px;\n padding-left: 15px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n","\nimport {CommonCitationsType} from '@/store/content-optimizer/CurrentPageModel';\nimport {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n citation: CommonCitationsType;\n}\n\nexport const SingleCitation = observer(({citation}: Props) => {\n const addDefaultSrc = e => {\n e.target.src = '/img/world-wide-web.svg';\n };\n\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)} src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc.length > 90 ?\n \n {citation?.metaDesc.substring(0, 90) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by: \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp.metaDesc.length > 70 ? serp.metaDesc.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 7 && (\n {`+${citation?.serps?.length - 7}`}\n )}\n \n : null}\n\n \n ;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SingleCitation} from './SingleCitation/SingleCitation';\nimport styles from './style.module.scss';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n store: CurrentPageStore;\n}\nexport const CommonCitations = observer(({store}: Props) => {\n return <>\n {store?.analytics?.commonCitations?.length ? \n \n {store?.analytics?.commonCitations.map(citation => {\n return (citation.url || citation.metaDesc) && ;\n })}\n \n :\n !store?.content?.targetKeywords?.length ? \n Please add Target Keywords to get Common Citations.\n : \n No Common Citations found for these Target Keywords.\n }\n ;\n});\n","import {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\n\nexport const SidebarTooltip = observer(props => {\n return \n {props.children}\n ;\n});\n","import {observer} from 'mobx-react';\nimport {ChangeEvent, Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled, {css, keyframes} from 'styled-components';\nimport {Tooltip, Form, Dropdown, Radio} from 'antd';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport Text from 'antd/lib/typography/Text';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {Button as CommonBtn, CommonInput} from '@/components/common-components/components';\nimport {Loader} from '../../../Utils/loader';\nimport {addProtocolToDomain, sanitizeUrl} from '@/utils/url';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPen, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {Button} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {Input} from '@/components/common-components/v2';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\n// import {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\n// import { toJS } from 'mobx';\n// import { LoadingOutlined } from '@ant-design/icons';\n\ninterface Props {\n store: CurrentPageStore;\n currentView?: 'links' | 'terms';\n onViewChange?: Dispatch>;\n visibleKeywords?: any[];\n updateKeywords?: (kwArray) => void;\n onFilter: (query: string[]) => void;\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const SuggestionsDataController = observer(({\n store,\n currentView,\n onViewChange,\n visibleKeywords,\n updateKeywords,\n onFilter,\n viewSuggestionsOption,\n linksDropDownFromSuggestion,\n}: Props) => {\n const [showEditor, setShowEditor] = useState(false);\n const [isCloseClicked, setIsCloseClicked] = useState(false);\n const [form] = Form.useForm();\n const [inputValue, setInputValue] = useState(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n const [submitDisabled, setSubmitDisabled] = useState(true);\n const isNotPublic = !isScaPublicPage();\n\n // const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n const {Group} = Radio;\n useEffect(() => {\n onViewChange(linksDropDownFromSuggestion);\n }, [linksDropDownFromSuggestion]);\n\n\n // const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n const hostnameEditor = \n {\n if (!isCloseClicked) {\n try {\n await store?.updateHostname(inputValue);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setShowEditor(false);\n } catch (e) {\n return Promise.reject(e);\n }\n }\n }}\n initialValues={{\n urlInput: inputValue,\n }}>\n {'Page URL'} \n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n {\n setInputValue(e.target.value);\n if (!e.target.value) {\n setSubmitDisabled(true);\n } else {\n setSubmitDisabled(false);\n }\n }\n }\n placeholder={t('enter-url')} />\n\n \n \n {\n e.preventDefault();\n setInputValue(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n setShowEditor(false);\n }}\n disabled={store?.isUpdatingHostname}\n >\n {store?.isUpdatingHostname ? : t('cancel')}\n \n setIsCloseClicked(false)}\n >\n {store?.isUpdatingHostname ? : 'Update'}\n \n \n\n \n ;\n\n const topMessage = \n {hostnameEditor}\n {isNotPublic && (store?.content?.importedFromUrl || store?.content?.hostname ? <>\n \n Suggestions shown for \n \n {sanitizeUrl(store?.content?.hostname ?? store?.content?.importedFromUrl)}\n \n \n \n setShowEditor(!showEditor)} style={{marginLeft: 'auto'}}>\n \n : <>\n To get Link Suggestions setShowEditor(!showEditor)}>specify a Page URL \n )}\n ;\n\n const viewChangeDropdown = \n e.stopPropagation()}>\n onViewChange(e.target.value)}>\n Internal Link Suggestions \n External Link Suggestions \n \n \n ;\n\n const keywordsDropdown = \n Show Internal Link Suggestions for following target keywords: \n e.stopPropagation()}>\n {visibleKeywords?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const viewControlls = \n \n \n {currentView === 'links' ? 'Internal Links' : 'External links'} \n \n \n\n {currentView === 'links' ? \n Keywords {visibleKeywords?.filter(kw => kw.active)?.length} / {visibleKeywords?.length} \n : null}\n\n ;\n\n const SearchAndSort = \n \n termSearchHandler(e)}/>\n \n {/* \n {store?.isAnalyzing ? : \n {toJS(store.content?.internalLinkSuggestions)?.map((cluster, id) => {\n return \n \n Link Suggestions in cluster: \n {cluster.results?.length} \n \n }>\n item.trim() === cluster.keyword).length > 0}\n onClick={() => handleOnClusterClick(cluster.keyword)}>{`#${cluster.keyword} - ${cluster.results?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n */}\n ;\n\n return \n {topMessage}\n {viewControlls}\n {SearchAndSort}\n ;\n});\n\nconst Wrapper = styled.div`\n margin-bottom: 10px;\n`;\n\nconst EditorContainer = styled.div<{show: boolean}>`\n display: ${p => p.show ? 'block' : 'none'};\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n border-radius: 5px;\n position: absolute;\n top: 20px;\n right: 0;\n padding: 15px 10px;\n width: 300px;\n z-index: 1;\n `;\nconst FormStyled = styled(Form)`\n .ant-form-item {\n margin-bottom: 10px;\n }\n\n .ant-form-item-explain.ant-form-item-explain-error {\n div {\n color: #ff4d4f;\n }\n }\n `;\n\nconst HostnameContainer = styled.div`\n position: relative;\n display: flex;\n font-size: 12px;\n margin-bottom: 10px;\n`;\nconst HostnameLink = styled.a`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 150px);\n margin-left: 5px;\n color: #34AEF3;\n`;\nconst HostnameLinkBtnContainer = styled.div`\n width: 14px;\n height: 14px;\n margin-left: 10px;\n cursor: pointer;\n`;\n\nconst ViewControllsContainer = styled.div`\n display: flex;\n`;\nconst AddNewUrlBtn = styled.div`\n font-size: 12px;\n margin-left: 5px;\n color: #40a9ff !important;\n text-decoration: underline;\n cursor: pointer;\n`;\nconst InputStyeld = styled(CommonInput)`\n `;\nconst ButtonContainer = styled(Form.Item)`\n .ant-form-item-control-input-content {\n display: flex;\n justify-content:flex-end;\n }\n `;\n\nconst CancelButton = styled(CommonBtn)`\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n padding: 5px 15px;\n\n span {\n color: #4E5156 !important;\n }\n\n &:hover, &.active, &.focus {\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n }\n `;\nconst UpdateButton = styled(CommonBtn)`\n padding: 5px 15px;\n margin-left: 10px;\n `;\nconst ViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 255px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\nconst RadioStyled = styled(Radio)`\n .ant-radio-checked .ant-radio-inner {\n background-color: #7f4ead !important;\n border-color: #7f4ead !important;\n\n &::after {\n background-color: #fff !important;\n }\n }\n`;\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst ButtonStyled = styled(Button)<{viewSuggestionsOption?: boolean}>`\n background-color: #323539;\n border: 1px solid transparent;;\n font-size: 13px;\n padding: 8px 14px;\n margin: 0 9px 0 0 !important;\n\n &:hover, &:focus {\n background-color: transparent !important;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 230px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\n\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\n// const ClusterTooltipSingleRow = styled.div`\n// display: flex;\n// justify-content: space-between\n// `;\n// const ClusterTooltipLabel = styled.div`\n// font-size: 12px;\n// font-weight: 400;\n// color: #E8E8E8;\n// `;\n\n// const ClusterTooltipValue = styled.div`\n// font-size: 12px;\n// font-weight: 500;\n// color: #FFFFFF;\n// `;\n\nconst SearchAndSortWraper= styled.div `\n margin-top: 10px;\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\n\n// const ClustersWrapper = styled.div`\n// display: flex;\n// `;\n// const ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n// display: flex;\n// flex-wrap: wrap;\n\n// height: ${p => p.expandedClusters ? 'auto' : '25px'};\n// overflow: hidden;\n// `;\n\n// const SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n// background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n// border-radius: 60px;\n// padding: 3px 8px;\n// width: auto;\n// height: 20px;\n// font-size: 11px;\n// margin-right: 6px;\n// margin-bottom: 6px;\n// cursor: pointer;\n\n// &:hover {\n// background-color: #4B4D51 !important;\n// }\n// `;\n\nconst InputStyled = styled(Input)`\n height: 32px;\n`;\n","import {observer} from 'mobx-react';\nimport React, {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {LinkSuggestionsDropdownController} from '../DropdownController/LinkSuggestionsDropdownController';\nimport {InternalLinksSuggestions} from './InternalLinkSuggestions/InternalLinkSuggestions';\nimport {CommonCitations} from './CommonCitations/CommonCitations';\nimport {useStore} from '@/store/root-store';\nimport {SuggestionsDataController} from '../DropdownController/SuggestionsDataController';\nimport {toJS} from 'mobx';\nimport {Button, Input, Popover, Radio, Spin, Tooltip, Form} from 'antd';\nimport {exportLinkIcon} from '@/utils/icons';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import { SmallBadge } from '@/components/common-components/components/badge';\nimport {Pill} from '@/components/layoutV2/user-menu/styles';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\nimport {notification} from '@/utils/notification-v2';\nimport {apiError} from '@/utils/api';\n\ninterface LinkSuggestionTabPRops {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const LinkSuggestionsTab = observer(({viewSuggestionsOption, linksDropDownFromSuggestion}: LinkSuggestionTabPRops) => {\n const [currentView, setCurrentView] = useState<'links' | 'terms'>('links');\n const [activeKeywordsList, setActiveKeywordsList] = useState([]);\n const [searchQuery, setSearchQuery] = useState([]);\n const [dataArr, setDataArr] = useState([]);\n const [initialDataArr, setInitialDataArr] = useState([]);\n const [isQueried, setIsQueried] = useState(false);\n const [anyButtonClicked, setAnyButtonClicked] = useState(false);\n const antIcon = ) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n if (e.target.value.length) setUrlsError('');\n setInputValue(e?.target?.value);\n }\n };\n\n const addDomainPopoverContent = () => {\n return \n To continue, provide a source of Internal links \n \n \n \n \n \n \n \n Add a domain \n We’ll scan the domain and provide inlinks recommendations \n {selectedOption === 'domain' &&\n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n setDomain(e.target.value)}\n />\n \n }\n \n \n \n \n \n \n \n \n Provide URLs \n Write or paste a list of URLs and we’ll find the best fit for them \n {selectedOption === 'urls' &&\n <>\n \n {urlsError&& {urlsError} }\n \n }\n \n \n \n \n ;\n };\n\n const popoverInnerStyle = {\n width: '500px',\n borderRadius: '10px',\n border: '1px solid #D9D9D9',\n background: 'var(--White, #FFF)',\n boxShadow: '0px 1px 20px 0px rgba(0, 0, 0, 0.19)',\n };\n\n\n return <>\n {\n onDataFilter(kwArr);\n }}\n visibleKeywords={activeKeywordsList}\n onFilter={setLinks}\n viewSuggestionsOption={viewSuggestionsOption}\n />\n \n \n \n \n \n Internal links help search engines understand how your content interrelates.\n \n \n {`Links in of the page: ${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.filter(link => link.isUsed).length ?? 0}/${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.length ?? 0}`}\n \n }>\n \n\n {getMsg(calculateUsagePercentage(toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks))}\n \n \n Add links to content easily with AI
\n {dataArr?.length && (currentView == 'links' || currentView == 'terms') ? {\n (dataArr?.length && (currentView == 'links' || currentView == 'terms')) && postLInkSuggestion(currentView);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
:\n \n \n Launching AI Links Assistant.\n Do not modify your article before this tool is fully loaded\n : ''}>\n {\n setIsVisiblePopover(true);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
\n \n }\n \n {currentView === 'links' ? a.isBookmarked > b.isBookmarked ? -1 : 1)} store={currentPage}/> : }\n \n ;\n});\n\nconst Wrapper = styled.div`\n background-color: #2d2f34;\n border-radius: 5px;\n padding: 0 0 13px 0;\n`;\nconst SuggestionsBannerContainer = styled.div<{percent?: number}>`\n background-color: ${p => p.percent < 75 ? '#F1AA3E1C' : '#1FAC471C'};\n border-radius: 5px;\n padding: 9px 10px;\n font-size: 12px;\n margin: 10px 6px;\n\n .infoBannerIcon {\n width: 15px;\n color: ${p => p.percent < 75 ? '#F1AA3E' : '#1FAC47'};\n margin-right: 5px;\n }\n`;\n\nconst TooltipTitle = styled.div`\n`;\nconst TooltipDescription = styled.div`\n font-size: 12px;\n color: #a3a4a4;\n`;\n\nconst LinksWrapper = styled.div<{anyButtonClicked?: boolean}>`\n\nbackground-image: linear-gradient(to left, rgb(52 174 243 / 9%), rgba(52, 174, 243, 0.42));\ndisplay: flex;\n// justify-content: space-between;\nheight: 35px;\nalign-items: center;\nmargin: 0 7px 20px 7px;\npadding: 0 15px;\nborder-radius: 5px;\np{ \n margin-bottom: 0;\n font-size: 12px;\n &:last-child{\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 30%;\n margin-left: 10px;\n color: #34AEF3;\n cursor: ${props => props.anyButtonClicked ? 'not-allowed' : 'pointer'};\n text-decoration: underline;\n }\n}\n`;\n\nconst StyledPopover = styled(Popover)`\n .ant-popover-inner-content {\n padding: 0px !important;\n }\n`;\n\nconst PopoverContentWrapper = styled.div`\n margin: 6px 4px;\n`;\n\nconst PopoverTitle = styled.p`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin-bottom: 15px !important;\n`;\n\nconst AddDomainSection = styled.div`\n display: flex; \n width: 460px;\n min-height: 50px;\n flex-shrink: 0;\n border-radius: 12px 12px 0px 0px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n padding: 12px 16px;\n`;\n\nconst ProvideUrlsSection = styled.div`\n display: flex;\n width: 460px;\n min-height: 58px;\n flex-shrink: 0;\n border-radius: 0px 0px 12px 12px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n margin-bottom: 15px;\n padding: 12px 16px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n`;\n\nconst AddDomainTitle = styled.div`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 2px;\n`;\n\nconst AddDomainDesc = styled.div`\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 10px;\n`;\n\nconst AddDomainInput = styled(Input)`\n width: 400px;\n height: 32px;\n flex-shrink: 0;\n border-radius: 6px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--White, #FFF);\n`;\n\nconst DomainDetails = styled.div`\n .ant-form-item {\n margin-bottom: 0px !important;\n } \n\n`;\n\nconst ProvideUrlsDetails = styled.div`\n \n`;\n\nconst Dismiss = styled.button`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Body-background, #F2F2F5);\n border: none;\n cursor: pointer;\n`;\n\nconst Update = styled(Button)`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Blue, #2D6CCA);\n color: white;\n min-width: 120px;\n &:hover {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n &:focus {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n`;\n\nconst ErrorMessageForURL = styled.span`\n color: #ff4d4f;\n font-size: 14px;\n line-height: 1.5715;\n`;\n","import {useCallback, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {\n Divider,\n Row,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faFilePlus, faMessageCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useTranslation} from 'next-i18next';\nimport {QuestionModel} from '@/store/content-optimizer/CurrentPageModel';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {debounce, isNil} from 'lodash';\nimport {insertText} from '@/utils/editor-scripts';\nimport {EditorState} from 'draft-js';\n\ninterface Props {\n question: QuestionModel;\n i: number | string;\n}\n\n\nexport const SingleQuestion = observer(({question, i}: Props) => {\n const {contentOptimizer: {\n contentFragment,\n },\n } = useStore('');\n const {contentOptimizer: {currentPage, aiOutline}} = useStore('');\n const [copySuccess, setCopySuccess] = useState(false);\n const [aiCopied, setAiCopied] = useState(false);\n const [creatingPage, setCreatingPage] = useState(false);\n const [isAiGenerating, setIsAiGenerating] = useState(false);\n const {t} = useTranslation('common');\n\n const antIcon = \n {t('question')}
\n {question.keyword ? question.keyword : null}
\n \n {question?.sv !== undefined && question?.sv !== null && {`SV: ${searchVolumeFormatter(question.sv)}`}}\n {question?.cpc !== undefined && question?.cpc !== null && {`CPC: ${costPerClickFormatter(question.cpc)}`}}\n \n {t('number-of-uses')}
\n \n {question?.usedCount ?? ''}\n
\n \n }\n >\n \n \n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n }}>\n \n {question?.keyword ?? ''}\n
\n ;\n});\n","\nimport {Typography, Spin, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleQuestion} from './SingleQuestion';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport {copyToClipboardWithHtmlAndText} from '@/utils/clipboard';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const QuestionsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {t} = useTranslation('common');\n\n const {Title} = Typography;\n const antIcon = \n Questions {currentPage?.isAnalyzing ? <Spin indicator={antIcon} style={{marginRight: '20px'}}/> :\n currentPage?.analytics?.questions?.length ? <span className={styles.totalQuestions}>{`${currentPage?.analytics?.questions?.filter(question => question?.usedCount > 0)?.length}/${currentPage?.analytics?.questions?.length}`}</span> : null}\n <Tooltip\n title={copySuccess ? <span><FontAwesomeIcon icon={faCheck} style={{color: '#2AC155'}}/>{` Copied to clipboard`}</span> : t('copy-to-clipboard')}\n placement='top'\n overlayClassName={styles.copyTooltip}\n onVisibleChange={visible => {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n <div style={{cursor: 'pointer', color: '#34AEF3', marginLeft: 'auto'}}\n onClick={() => {\n let htmlString = '<p></p>';\n let string = '';\n currentPage?.analytics?.questions?.map(question => {\n htmlString += (`<p>${question.keyword}?</p>`);\n string += (`${question.keyword}?`);\n });\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlString, 'text/html');\n const copiedText = doc.body.textContent;\n navigator.clipboard.writeText(copiedText);\n\n // Example usage:\n const htmlContent = htmlString;\n const plainTextContent = string;\n\n copyToClipboardWithHtmlAndText(htmlContent, plainTextContent);\n setCopySuccess(true);\n }}>\n <FontAwesomeIcon icon={faCopy} style={{marginRight: 5}}/> Copy all\n </div>\n </Tooltip>\n \n {currentPage?.analytics?.questions?.length ? \n \n {currentPage?.analytics?.questions?.map((question, i) => {\n return ;\n })}\n \n :\n \n {/* ('');\n const {contentOptimizer: {currentPage: {addFocusTerms, isFocusTermsLoading}}} = useStore('');\n\n const onClose = () => {\n setShowAddFocusTermModal(false);\n setTerms('');\n };\n\n const handleTerms = (e: React.ChangeEvent) =>{\n const value = e.target.value;\n setTerms(value.replaceAll(',', '\\n'));\n };\n\n const handleAddFocusTerms = async () => {\n try {\n await addFocusTerms({terms: stringToArray(terms, keywordNewLineReg, ',' )});\n onClose();\n notification.success('', 'Focus terms added successfully');\n } catch (error) {\n const errorMessage = apiError(error) as string;\n notification.error('', errorMessage || 'Something went wrong please try again');\n }\n };\n\n return (\n \n Add focus terms \n Provide your own terms and get usage recommendations to elevate your writing. \n \n \n \n );\n});\n\nexport default AddFocusTermModal;\n\nconst StyledModal = styled(Modal)`\n .ant-modal-content{\n border-radius: 12px;\n background: var(--White, #FFF);\n }\n`;\n\nconst Title = styled.div`\n color: var(--Text-black, var(--Black, #121212));\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`;\n\nconst Desc = styled.div`\n width: 370px;\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 4px;\n`;\n\nconst TextArea = styled.div`\n margin-top: 22px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 24px;\n\n .cancel-btn {\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n background-color: transparent;\n border: none;\n cursor: pointer;\n }\n\n .add-btn {\n display: flex;\n width: 115px;\n height: 44px;\n /* padding: 13px 60px 14px 30px; */\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 6px;\n background: var(--Green, #2AC155);\n color: white;\n color: var(--White, var(--White, #FFF));\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n }\n .ant-btn[disabled] {\n background: #f5f5f5 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n }\n`;\n","import {useEffect, useState} from 'react';\nimport {\n Tabs as CommonTabs,\n TabPane as CommonTabPane,\n} from '@/components/common-components/components';\nimport {\n Spin,\n} from 'antd';\nimport {\n LoadingOutlined,\n} from '@ant-design/icons';\nimport styles from './style.module.scss';\nimport {useTranslation} from 'next-i18next';\n// import {VideoPopOver} from '@/components/common-components/components/popover';\nimport {FocusTermsTab} from './FocusTermsTab/FocusTermsTab';\nimport {observer} from 'mobx-react';\nimport {LinkSuggestionsTab} from './LinkSuggestionsTab/LinkSuggestionsTab';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {QuestionsTab} from './QuestionsTab/QuestionsTab';\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_FOCUS_TERMS_TAB_OPEN, SCA_PAGE_QUESTIONS_TAB_OPEN, SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN} from '@/constants/events';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\nimport AddFocusTermModal from './DropdownController/AddFocusTermModal';\n\ninterface FocusTermsTabsProps {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\nconst secondAntIcon = onChangeTab(key)}\n >\n \n \n \n {t('topical-terms')}\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedTerms}\n /{currentPage?.analytics?.focusTerms?.length}\n )\n }\n \n \n \n }\n key='1'\n style={{'outline': 'none'}}>\n \n \n \n Questions\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedQuestions}\n /{currentPage?.analytics?.questions?.length}\n )\n }\n \n \n \n }\n key='2'\n style={{'outline': 'none'}}>\n {isNotPublic && \n \n \n Link Suggestions\n \n \n {currentPage?.isFetchingIntLinksSug ?\n () :\n (\n {currentPage?.content?.totalUsedSuggestions}\n /{currentPage?.content?.internalLinkSuggestionsV2?.allLinks?.length}\n )\n }\n \n \n \n }\n key='3'\n style={{'outline': 'none'}}>\n \n \n \n \n );\n});\n\nconst CommonTabsStyled = styled(CommonTabs)`\n .rc-tabs-extra-content {\n background-color: transparent !important;\n border: 1px solid $color-gray-dark-medium;\n border-radius: 5px;\n cursor: pointer;\n font-size: $font-size-12;\n height: 25px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n padding: 0 5px;\n transition: all 0.2s ease-in;\n }\n\n .focusTermsTabTitleValue {\n color: $color-gray-light;\n display: block;\n font-size: $font-size-12;\n font-weight: 400;\n margin-left: 5px;\n\n .ant-spin-spinning {\n height: 10px;\n }\n\n .customSpinner {\n font-size: 12px !important;\n }\n }\n\n .rc-tabs-content-holder {\n background-color: transparent !important;\n padding-top: 15px;\n }\n\n .rc-tabs-nav {\n border-bottom: 1px solid #4E5156;\n }\n .rc-tabs-nav-list {\n justify-content: space-between;\n }\n .rc-tabs-nav-operations {\n display: none !important;\n }\n\n .rc-tabs-tab {\n margin-left: 20px !important;\n\n &:first-child {\n margin-left: 0px !important;\n }\n }\n\n @media screen and (max-width: 1400px) {\n .rc-tabs-tab {\n margin-left: 0px !important;\n margin-right: 15px !important;\n }\n \n }\n\n .rc-tabs-tab-btn {\n padding: 5px 0 !important;\n }\n\n .rc-tabs-ink-bar {\n background-color: #F1AA3E !important;\n border-radius: 2px;\n }\n`;\n\nconst TabsStyled = styled(CommonTabPane)<{expanded: boolean; editorScrolled: boolean}>`\n \n .ant-collapse {\n overflow-y: ${p => p.expanded ? 'auto' : 'inherit'};\n height: ${p => p.expanded ? `calc(100vh - ${p.editorScrolled ? 292 : 300}px)` : 'auto'};\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n }\n`;\n\nconst TabTitleContainer = styled.div<{active: boolean}>`\n\n .tabTitle {\n font-weight: 400;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n\n .tabExtraInfo {\n padding-bottom: 8px;\n\n .tabUsageContainer {\n display: flex;\n\n .usageValue {\n font-size: 18px;\n font-weight: 600;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n .totalValue {\n span {\n font-size: 12px;\n color: #A3A4A4;\n }\n }\n }\n }\n\n`;\n","/* eslint-disable max-len */\n\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {ReactNode} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport styles from './style.module.scss';\n\n\ninterface Props {\n label: string;\n value?: number;\n tooltipLabel?: string | ReactNode;\n showTooltip?: boolean;\n loading?: boolean;\n min?: number;\n max?: number;\n headingData?:{\n h1: number;\n h2: number;\n h3: number;\n h1Min: number;\n h1Max: number;\n h2Min: number;\n h2Max: number;\n h3Min: number;\n h3Max: number;\n };\n linksData?:{\n internalLinks: number;\n externalLinks: number;\n internalLinksMin: number;\n internalLinksMax: number;\n externalLinksMin: number;\n externalLinksMax: number;\n };\n}\n\nexport const SingleMetrics = observer(({label, value, tooltipLabel, showTooltip, loading, min, max, headingData, linksData}:Props) => {\n const secondAntIcon = \n {label === 'Headings:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n \n :\n <>\n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n :\n }\n :\n label === 'Links:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n linksData.internalLinksMax) ? faArrowDown : faCheck} color={(linksData.internalLinks < linksData.internalLinksMin) || (linksData.internalLinks > linksData.internalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '} Internal: {linksData.internalLinks}\n \n {`${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `/` : '/'} ${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `${linksData.internalLinksMin}-${linksData.internalLinksMax}` : ''}`}\n \n \n \n linksData.externalLinksMax) ? faArrowDown : faCheck} color={(linksData.externalLinks < linksData.externalLinksMin) || (linksData.externalLinks > linksData.externalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '}External: {linksData.externalLinks}\n \n {`${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `/` : ''} ${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `${linksData.externalLinksMin}-${linksData.externalLinksMax}` : ''}`}\n \n \n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n :\n <>\n {label} \n {!loading ?\n showTooltip ?\n \n \n max) ? faArrowDown : faCheck} color={(value < min) || (value > max) ? '#FF8536' : '#1FAC47'}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n \n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n cursor: default;\n height: 18px;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1FAC47' : '#F44343'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 2px;\n margin-right: 3px;\n`;\nconst RangeValues = styled.div`\n color: #A3A4A4 !important;\n font-size: 10px;\n display: inline-flex;\n margin-left: 2px;\n\n @media screen and (max-width: 1400px) {\n font-size: 8px;\n }\n`;\nconst StyledLable = styled.p`\n margin-bottom: 0px;\n width: 72px;\n text-align: end;\n margin-right: 5px;\n color: #E8E8E8;\n`;\nconst StyledIcon = styled(FontAwesomeIcon)`\n width: 12px;\n`;\n","/* eslint-disable no-console */\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {isNil} from 'lodash';\nimport {SingleMetrics} from '../SingleMetrics';\nimport {SkeletonHorizontalLoaderGray} from '@/components/common-components';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck, faArrowUpRightFromSquare} from '@fortawesome/pro-regular-svg-icons';\nimport {useState, Dispatch, SetStateAction} from 'react';\nimport {Tabs, Tooltip} from 'antd';\nimport {TabPane} from 'rc-tabs';\nimport {toJS} from 'mobx';\n\ninterface ContentScoreProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const ContentScore = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: ContentScoreProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n isWordCountLoading,\n feTargetKeywords,\n currentEditorState,\n isScoreLoading,\n isFetchingIntLinksSug,\n analytics,\n content: {\n score,\n scoreExtended,\n wordCount,\n suggestedWordCountLimits,\n scoreCounts,\n internalLinkSuggestionsV2,\n },\n },\n }} = useStore('');\n\n const [activeKey, setActiveKey] = useState('internal');\n\n const chartOption={\n grid: {\n top: '0px',\n bottom: '0px',\n },\n series: [{\n min: 0,\n max: 100,\n type: 'gauge',\n axisLine: {\n roundCap: false,\n lineStyle: {\n width: 10,\n color: [\n [0.33, '#f44343'],\n [0.66, '#f1aa3e'],\n [1, '#1ea745'],\n ],\n },\n },\n progress: {\n show: false,\n },\n startAngle: 180,\n radius: '90%',\n endAngle: 0,\n pointer: {\n width: 4,\n icon: 'roundRect',\n length: '25%',\n offsetCenter: [0, '-80%'],\n itemStyle: {\n color: '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n splitLine: {\n distance: -13,\n length: 15,\n lineStyle: {\n color: '#24262a',\n width: 6,\n },\n },\n splitNumber: 3,\n axisLabel: {\n show: false,\n color: 'auto',\n distance: 40,\n fontSize: 20,\n },\n detail: {\n show: false,\n },\n data: [{\n value: score ?? 0,\n }],\n }],\n };\n\n const viewSuggestionHandler = (key: 'links' | 'terms') => {\n setViewSuggestionsOption(true);\n setLinksDropDownFromSuggestion(key);\n setTimeout(() => {\n setViewSuggestionsOption(false);\n }, 1000);\n };\n const scoreLeftPosition = (score?: number) => {\n if (!score || score === 0) return '31%';\n if (score < 100 ) return '27%';\n if (score === 100 ) return '21%';\n };\n const avgTopLeftPosition = (avg?: number, top?: number) => {\n if (!avg && !top) return '25%';\n return '17%';\n };\n\n const shouldShowTooltip = (min?: number, max?: number) => {\n if (isNil(min) || isNil(max)) {\n return false;\n }\n\n return true;\n };\n\n const tooltipMsg = (key: string, min?: number, max?: number, cur?: number) => {\n let msg = '';\n if (cur <= min) msg = `Try to use more ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= max) msg = `Try to use less ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= min && cur <= max) msg = `Good job. You're in the optimal range.`;\n return msg;\n };\n\n const setHeadingsTooltip = (h1value: number, h1Min: number, h1Max: number, h2value: number, h2Min: number, h2Max: number, h3value: number, h3Min: number, h3Max: number) => {\n return \n \n H1 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h1value}/{h1Min}-{h1Max}\n \n
\n \n H2 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h2value}/{h2Min}-{h2Max}\n \n
\n \n H3 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h3value}/{h3Min}-{h3Max}\n \n
\n ;\n };\n const onChangeTab = key => {\n setActiveKey(key);\n };\n\n const openText = scrollToText => {\n const anchorTag = document.querySelector('a[href=\"' + scrollToText + '\"]') as HTMLElement;\n if (anchorTag) {\n anchorTag?.classList.add('animateAnchor');\n anchorTag?.scrollIntoView({behavior: 'smooth', block: 'start'});\n setTimeout(() => {\n anchorTag?.classList.remove('animateAnchor');\n }, 3000);\n }\n };\n\n\n const setLinksTooltip = (internalLinksData, externalLinksData) => {\n return \n onChangeTab(key)}\n >\n \n Recommended:\n {internalLinksData.internalLinksMin} - {internalLinksData.internalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? ()=> viewSuggestionHandler('links') : ()=> {}}>\n {!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {internalLinksData.internalLinksLength}\n internalLinksData.internalLinksMax) ?\n faArrowDown : faCheck}\n color={(internalLinksData.internalLinksLength < internalLinksData.internalLinksMin) ?\n 'red' : (internalLinksData.internalLinksLength > internalLinksData.internalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {internalLinksData?.internalLinks?.map((item, index) => openText(item)}>{item} \n window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n Recommended:\n {externalLinksData.externalLinksMin} - {externalLinksData.externalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? ()=> viewSuggestionHandler('terms') : ()=> {}}>\n {!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {externalLinksData.externalLinksLength}\n externalLinksData.externalLinksMax) ?\n faArrowDown : faCheck}\n color={(externalLinksData.externalLinksLength < externalLinksData.externalLinksMin) ?\n 'red' : (externalLinksData.externalLinksLength > externalLinksData.externalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {externalLinksData?.externalLinks?.map((item, index) => openText(item)}>{item} window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n ;\n };\n\n const countsSetup = [{\n label: 'Word Count:',\n value: wordCount,\n min: suggestedWordCountLimits?.lower,\n max: suggestedWordCountLimits?.upper,\n tooltipLabel: tooltipMsg('words', suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper, wordCount),\n showTooltip: shouldShowTooltip(suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper),\n loading: isWordCountLoading,\n },\n {\n label: 'Paragraphs:',\n value: scoreCounts?.paragraphs,\n min: scoreCounts?.paragraphsMin,\n max: scoreCounts?.paragraphsMax,\n tooltipLabel: tooltipMsg('paragraphs', scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax, scoreCounts?.paragraphs),\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n },\n {\n label: 'Headings:',\n value: scoreCounts?.headings,\n min: scoreCounts?.headingsMin,\n max: scoreCounts?.headingsMax,\n // tooltipLabel: tooltipMsg('headings', scoreCounts?.headingsMin, scoreCounts?.headingsMax, scoreCounts?.headings),\n tooltipLabel: setHeadingsTooltip(scoreCounts?.h1, scoreCounts?.h1Min, scoreCounts?.h1Max, scoreCounts?.h2, scoreCounts?.h2Min, scoreCounts?.h2Max, scoreCounts?.h3, scoreCounts?.h3Min, scoreCounts?.h3Max),\n showTooltip: false,\n loading: isWordCountLoading,\n headingData: {\n h1: scoreCounts?.h1,\n h2: scoreCounts?.h2,\n h3: scoreCounts?.h3,\n h1Min: scoreCounts?.h1Min,\n h1Max: scoreCounts?.h1Max,\n h2Min: scoreCounts?.h2Min,\n h2Max: scoreCounts?.h2Max,\n h3Min: scoreCounts?.h3Min,\n h3Max: scoreCounts?.h3Max,\n },\n },\n {\n label: 'Links:',\n value: 30,\n min: 2,\n max: 12,\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n tooltipLabel: setLinksTooltip(\n {\n internalLinks: toJS(scoreCounts?.internalLinks),\n internalLinksLength: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n },\n {\n externalLinks: toJS(scoreCounts?.externalLinks),\n externalLinksLength: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n externalLinksMin: scoreCounts?.externalLinksMin,\n externalLinksMax: scoreCounts?.externalLinksMax,\n },\n ),\n linksData: {\n internalLinks: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n externalLinks: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n externalLinksMax: scoreCounts?.externalLinksMax,\n externalLinksMin: scoreCounts?.externalLinksMin,\n },\n },\n // {\n // label: 'Images:',\n // value: scoreCounts?.images,\n // min: scoreCounts?.imagesMin,\n // max: scoreCounts?.imagesMax,\n // tooltipLabel: tooltipMsg('images', scoreCounts?.imagesMin, scoreCounts?.imagesMax, scoreCounts?.images),\n // showTooltip: shouldShowTooltip(scoreCounts?.imagesMin, scoreCounts?.imagesMax),\n // loading: isWordCountLoading,\n // },\n ];\n\n const contentProgressMessage = value => {\n if ((feTargetKeywords?.length == 0 || !currentEditorState?.getCurrentContent().hasText()) && value == 0) {\n return <>\n {!isScoreLoading ? \n Add Target Keywords and Start Writing to see how your content ranks\n :\n \n \n \n \n {score ?? 0}/100\n \n \n \n {`Avg: ${scoreExtended?.avg ?? '-'}`}\n \n \n {`Top: ${scoreExtended?.top ?? '-'}`}\n \n \n\n \n \n {countsSetup.map((item, idx) => {\n return ;\n })}\n \n\n \n\n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst RightSection = styled.div`\n\n`;\nconst StyleHeadingsTooltipTitle = styled.div``;\nconst StyledLinksTabs = styled(Tabs)`\ncolor: #4E5156;\nfont-size: 12px;\nfont-weight: 400;\n.ant-tabs-nav {\n margin: 0 0 12px 0;\n \n .ant-tabs-nav-wrap {\n .ant-tabs-nav-list{\n .ant-tabs-tab{\n padding: 4px 0px;\n &:hover{\n color: #121212;\n }\n }\n .ant-tabs-tab-active{\n .ant-tabs-tab-btn {\n color: #121212;\n\n }\n }\n .ant-tabs-ink-bar{\n background: #F1AA3E !important;\n height: 5px;\n border-radius: 2px 2px 0px 0px;\n }\n }\n }\n}\n`;\n\nconst TabsStyled = styled(TabPane)``;\nconst StyledLinksDiv = styled.ul`\nmax-height: 200px;\noverflow-y: auto;\nmargin-left: -15px;\n.linkopen{\n margin-left: 5px !important;\n cursor: pointer;\n &:hover{\n color: #2D6CCA !important;\n }\n}\n::-webkit-scrollbar {\n width: 4px;\n}\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb {\n background: #3E4144;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n`;\n\nconst StyledRecommender = styled.div`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\n`;\nconst StyledRecomentedValue = styled.span`\ncolor: #121212;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 600;\n`;\nconst StyledSuggestionLink = styled.a<{showAsLink}>`\ncolor: ${p=> p.showAsLink ? '#2D6CCA' : '#A3A4A4'};\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\ntext-decoration-line: none;\nmargin-left: 10px;\ncursor: ${p=> p.showAsLink ? 'pointer' : 'default'};\n&:hover{\n color: ${p=> p.showAsLink ? '#5487d4' : '#A3A4A4'};\n text-decoration-line: ${p=> p.showAsLink ? 'underline' : 'none'};\n}\n`;\nconst StyledCurrentValue= styled.p`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\nmargin-bottom: 2px;\nspan{\n color:#121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 600;\n margin-left: 4px;\n}\n`;\nconst StyledLinkItem = styled.span`\ncolor: #000;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 18px;\nmargin-bottom: 2px;\ncursor: pointer !important;\n&:hover{\n text-decoration: underline;\n}\n`;\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\nmargin-left: 6px;\nheight: 10px;\npadding-bottom:1px;\n`;\n\n// const StyledAnchor = styled.a`\n// text-decoration: none;\n// transition: text-decoration 0.2s;\n\n// &:hover {\n// text-decoration: underline;\n// }\n// `;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\n\nexport const WordCount = observer(() => {\n const secondAntIcon = \n Word count:\n {!currentPage?.isWordCountLoading ? <>\n \n = currentPage?.content?.suggestedWordCountLimits?.lower && currentPage?.content?.wordCount <= currentPage?.content?.suggestedWordCountLimits?.upper}/> \n {currentPage?.content?.wordCount} :\n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n height: 18px;\n cursor: default;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1aceb3' : '#ff8436'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 5px;\n margin-right: 5px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {ContentScore} from './ContentScore';\nimport {useTranslation} from 'next-i18next';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {Progress} from 'antd';\nimport {getProgressColor} from '@/utils/colors';\nimport {WordCount} from './WordCount/WordCount';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {Dispatch, SetStateAction} from 'react';\ninterface HeaderSectionProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const HeaderSection = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: HeaderSectionProps) => {\n const {t} = useTranslation('common');\n const {\n contentOptimizer: {\n currentPage: {\n isScoreLoading,\n focusTermsExpanded,\n isTaActive,\n isLinkActive,\n content: {\n score,\n },\n },\n }} = useStore('');\n\n\n return <>\n { (!focusTermsExpanded && (!isTaActive && !isLinkActive)) ? \n \n \n {t('content-score')} \n \n \n \n\n \n \n\n : \n \n {!isScoreLoading ? (score ?? '-') : '-'}} />\n \n \n {t('content-score')} \n \n \n \n \n \n }\n ;\n});\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst MiniTitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n\nconst MiniContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n height: 50px;\n`;\n\nconst ScoreAndWordCount = styled.div`\n display: flex;\n`;\nconst RightSection = styled.div`\n margin-left: 10px;\n`;\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < termsForInsertion?.length; i++) {\n if (!termsAssistantSuggestions?.find(item => item.termIncluded?.includes(termsForInsertion[i].name))) {\n prepArr.push(termsForInsertion[i].name);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(termsForInsertion ?? []), ...(termsAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} terms` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\ninterface SingleTermProps {\n term: any;\n}\n\nexport const SingleTerm = observer(({term}: SingleTermProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n stagingTaSuggestions,\n setTaActiveTerm,\n taActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n const [dots, setDots] = useState({\n total: 0,\n saved: 0,\n dismissed: 0,\n });\n\n useEffect(() => {\n const savedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'accepted');\n const dismissedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'dismissed');\n\n setDots(() => {\n return {\n total: term.placements,\n saved: savedPlacements?.length ?? 0,\n dismissed: dismissedPlacements?.length ?? 0,\n };\n });\n }, [...stagingTaSuggestions]);\n\n\n const generatePlacmenetsInfo = dots => {\n if (dots.saved == 0 && dots.dismissed == 0) return `${dots.total} available placements`;\n\n let response = '';\n if ((dots.total - dots.dismissed - dots.saved) > 0) response = ` ‧ ${dots.total} available`;\n if (dots.dismissed) response = `${dots.dismissed} dismissed ${response}`;\n if (dots.saved) response = `${dots.saved} accepted ${dots.dismissed > 0 ? ` ‧ ` : ``} ${response}`;\n return response;\n };\n\n const onTermClickHandler = curTerm => {\n if (!taActiveTerm?.term || taActiveTerm.term !== curTerm.name) {\n setTaActiveTerm({\n class: curTerm.name.replaceAll(' ', '-'),\n term: curTerm.name,\n order: 0,\n });\n } else {\n const totalOccurances = document.getElementsByClassName(taActiveTerm.class)?.length;\n\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: taActiveTerm.order < totalOccurances - 1 ? taActiveTerm.order + 1 : 0,\n };\n\n setTaActiveTerm(updatedValues);\n }\n };\n\n return onTermClickHandler(term)} className={taActiveTerm?.term == term.name ? 'isActive' : ''}>\n \n {term.name}
\n \n \n {generatePlacmenetsInfo(dots)}\n \n \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name))?.sort(item => item.status == 'accepted' ? -1 : item.status == 'default' ? 0 : 1)?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return ;\n if (suggestion.status == 'dismissed') return ;\n if (suggestion.status == 'accepted') return ;\n })}\n \n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: ${opaqueColor('#4E5156', 30)};\n border-radius: 10px;\n cursor: pointer;\n transition: background .3s ease-in;\n display: flex;\n\n .termName { \n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n`;\n\nconst Data = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst PlacementsInfo = styled.div`\n font-size: 12px;\n color: #A3A4A4 !important;\n`;\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 28%;\n margin-left: 2%;\n margin-top: auto;\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\n\nexport const TermsList = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n\n useEffect(() => {\n setFinalTermsList([]);\n if (termsAssistantSuggestions?.length) {\n for (let i = 0; i < termsForInsertion.length; i++) {\n const termOccurances = termsAssistantSuggestions.filter(suggestion => suggestion.termIncluded?.includes(termsForInsertion[i].name));\n if (termOccurances?.length) {\n setFinalTermsList(cur => [...cur, {...termsForInsertion[i], placements: termOccurances?.length}]);\n }\n }\n }\n }, [...(termsAssistantSuggestions ?? []), ...(termsForInsertion ?? 0)]);\n\n return \n {finalTermsList?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {CommonInput} from '@/components/common-components';\nimport {Button, Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCaretDown, faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover, Spin, Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const TermsSelectionDropdown = observer(() => {\n const [selectedTerms, setSelectedTerms] = useState([]);\n const [popoverVisible, setPopoverVisible] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n const [showLimitError, setShowLimitEror] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n fetchTaSuggestions,\n termsForInsertion,\n analytics,\n taSuggestionsLoading,\n },\n }, settings: {\n customer: {getCustomerQuota},\n }} = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}}}} = useStore('');\n\n const antIcon = \n \n \n onTermsSearchHandler(e.target.value)}/>\n \n \n \n {`AI Quota: ${quotaUtilization?.ca?.allowedAiContentGeneration?.consumed}/${quotaUtilization?.ca?.allowedAiContentGeneration?.total}`}\n \n \n \n\n \n onBulkSelectTop20Handler()}>Select top 20 terms \n onUncheckAllClickHandler()}>Uncheck all \n \n {showLimitError ?\n Please select less than 50 topical terms. :\n null}\n \n {[\n ...(analytics?.includeMoreTerms ?? []),\n ...(analytics?.includedTerms ?? []),\n ...(analytics?.includeLessTerms ?? []),\n ].filter(term => term.name.includes(searchQuery))?.map((term, idx) => {\n return \n item.name).includes(term.name)}\n onChange={e => handleCheckboxClick(e, term)}\n disabled={term.status == 'include-less'}>\n {term.name} \n \n \n \n Current usage:\n {term.usedCount}\n \n \n Recommended usage:\n {term.requiredCountMin}\n \n \n Maximum usage:\n {term.requiredCountMax}\n \n }>\n {`${term.usedCount}/${term.requiredCountMin}`} \n \n ;\n })}\n \n \n setPopoverVisible(false)}>Cancel \n \n \n \n );\n\n\n return \n onTriggerClickHandler()}>\n {`Select terms ${selectedTerms?.length}`}\n \n ;\n});\nconst Trigger = styled.div`\n color: #34aef3 !important;\n font-size: 12px;\n cursor: pointer;\n`;\nconst Wrapper = styled.div`\n\n`;\nconst HeadingSection = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\nconst SearchBox = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst QuotaInfo = styled.div`\n color: #4E5156;\n margin-bottom: 12px;\n`;\nconst CommonInputStyled = styled(CommonInput)`\n border: 0px solid transparent;\n height: 30px;\n\n &:active {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n &:hover {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n\n &::placeholder {\n color: #A3A4A4;\n font-weight: 400;\n font-size: 15px;\n }\n`;\nconst ControllsBar = styled.div`\n display: flex;\n justify-content: space-between;\n color: #2D6CCA;\n font-size: 12px;\n background: #F9F9FB;\n box-shadow: 0px 1px 0px #E8E8E8, 0px -1px 0px #E8E8E8;\n margin-left: -15px;\n margin-right: -15px;\n padding: 10px 15px\n`;\nconst BulkControllBtn = styled.div`\n cursor: pointer;\n`;\n\nconst TermsList = styled.div`\n max-height: 300px;\n overflow-y: scroll;\n margin-right: -15px;\n padding-right: 15px;\n margin-top: 10px;\n\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.12) ;\n scrollbar-track-color: rgba(138,138,138,0.32);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.4);\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n }\n`;\nconst SingleTermRow = styled.div<{opaque: boolean}>`\n display: flex;\n\n opacity: ${p => p.opaque ? '.4' : 1};\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n display: flex;\n width: 100%;\n\n .ant-checkbox-wrapper {\n width: 100%;\n }\n\n .ant-checkbox-inner {\n border-radius: 4px !important;\n }\n .ant-checkbox-checked .ant-checkbox-inner {\n background-color: #2D6CCA !important;\n border-color: #2D6CCA !important;\n border-radius: 4px !important;\n }\n`;\n\nconst TermName = styled.div`\n cursor: default;\n margin-left: 10px;\n color: #4E5156;\n`;\nconst TermUsage = styled.div`\n cursor: default;\n margin-left: auto;\n color: #4E5156;\n`;\nconst BtnsContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding-top: 10px;\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Divider, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {TermsList} from './TermsList';\nimport {TermsSelectionDropdown} from './TermsSelectionDropdown';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const TermsAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n editContent,\n stagingTaSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n },\n }} = useStore('');\n\n const antIcon =
'));\n }\n\n if (stagingTaSuggestions[i].isSuggestion) {\n if (stagingTaSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n \n \n Terms Assistant \n \n \n Go through the suggestions for inserting terms to see how they look like in your article. Accept or dismiss individual ones.\n
\n
\n * Save changes to update your article.\n \n \n \n item.status !== 'default')}\n color='green'\n style={{marginBottom: 10, width: '-webkit-fill-available', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n {updatingTa ? 'Updating Article...' : 'Save & Update Article'}\n {updatingTa ? onCancelClickHandler()}>\n Cancel\n \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 50px);\n padding-bottom: 20px;\n`;\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #e8e8e8;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {getProgressColor} from '@/utils/colors';\nimport {numberWithCommas} from '@/utils/number';\nimport {Progress, Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n competitor: SingleCompetitorType;\n loading: boolean;\n}\n\nexport const SingleCompetitor = observer(({competitor, loading}: Props) => {\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n {competitor.url && addDefaultSrc(e)}\n height={20}\n width={20}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor.url}`} />} \n \n {competitor?.url}}>\n {competitor?.title}\n \n\n \n\n \n {`#${competitor?.position}`}\n \n\n {`-`}\n\n \n \n {competitor?.contentScore}\n }\n className={styles.progress}\n />\n \n \n\n {`-`}\n\n \n \n {`${numberWithCommas(competitor?.wordCount) || 0} words`}\n \n \n \n {/* {competitor?.url && urlValidationRegex.test(competitor?.url) ?\n {competitor?.url} : null} */}\n\n {/* {competitor?.metaDesc && competitor?.metaDesc.length > 90 ? competitor?.metaDesc.substring(0, 90) + '...' : competitor?.metaDesc} */}\n \n ;\n});\n","import {useEffect} from 'react';\nimport {SingleCompetitor} from './SingleCompetitor/SingleCompetitor';\nimport styles from './style.module.scss';\nimport css from '../../index.module.scss';\nimport {Typography, Spin, Select, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const TopRankingCompetitors = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {Option} = Select;\n const {Title} = Typography;\n const antIcon = \n Top Ranking Competitors {currentPage?.isAnalyzing && <Spin indicator={antIcon} style={{marginRight: '20px'}}/>}\n \n currentPage.openCompetingFocusTermsDrawer()}>\n Analyse Content\n \n \n\n {currentPage?.analytics?.competitorsData?.length ? \n \n handleOnSortChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n {currentPage?.analytics?.competitorsData?.filter(item => item.keyword === currentPage?.topRankingCompetitorActiveKw)[0]?.competitors?.map(competitor => {\n return competitor?.title && ;\n })}\n \n :\n !currentPage?.content?.targetKeywords?.length ? \n {/* \n {\n updatedButtonConf().map((item, idx) => {\n return \n {\n if (anyButtonClicked || item.disabled) return;\n item.callback();\n }} disabled={item.disabled}>\n {item.loading ? : \n ;\n })\n }\n ;\n});\n\nconst Wrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n`;\nconst SingleItem = styled.div<{hoverColor: string; anyButtonClicked?: boolean; disabled?: boolean}>`\n width: calc(50% - 5px);\n margin-bottom: 10px;\n transition: background-color .3s ease;\n background-color: #323539;\n cursor: ${p => p.anyButtonClicked || p.disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n padding: 5px;\n border-radius: 6px;\n font-size: 13px;\n opacity: ${p => p.disabled ? .4 : 1};\n\n &:hover {\n background-color: ${p => !p.anyButtonClicked && p.hoverColor};\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {FocusTermsTabs} from './FocusTermsAndQuestions/FocusTermsTabs';\nimport {HeaderSection} from './HeaderSection';\nimport {TermsAssistantRightSidebar} from './TermsAssistant/RightSidebar';\nimport {TopRankingCompetitors} from './TopRankingCompetitors/TopRankingCompetitors';\nimport {DrawersTriggers} from './DrawersTriggers';\nimport {useState} from 'react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Analytics = observer(({changeView}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const [viewSuggestionsOption, setViewSuggestionsOption] = useState(false);\n const [linksDropDownFromSuggestion, setLinksDropDownFromSuggestion] = useState<'links' | 'terms'>('links');\n\n return \n {!currentPage?.isLinkActive && }\n {currentPage?.isTaActive ? \n \n \n {!currentPage.focusTermsExpanded ? }\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst ContentContainer = styled.div`\n overflow-y: auto;\n height: 100%;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n\n","import React from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n isSubscriber: boolean;\n isCompetitorsTable: boolean;\n setFilteredCompetitorsData: React.Dispatch>;\n setCompetitors: React.Dispatch>;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n}\n\nexport const KeywordSelector = observer(({isSubscriber, isCompetitorsTable, setFilteredCompetitorsData, setActiveKw, setCompetitors, activeKw}: Props) => {\n const {Option} = Select;\n const {contentOptimizer: {currentPage}} = useStore('');\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n if (isCompetitorsTable) {\n setFilteredCompetitorsData(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n }\n };\n\n return \n \n Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ ;\n});\n\nconst KeywordDropdownWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {Progress, Tooltip, Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {Table} from '@/components/common-components/components/index';\nimport styles from './style.module.scss';\nimport {numberWithCommas} from '@/utils/number';\nimport {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {KeywordSelector} from './KeywordSelector';\nimport {useStore} from '@/store/root-store';\nimport {NextImg} from '@/utils/nextImg';\n\n\ninterface Props {\n store: CurrentPageStore;\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsTable = observer(({\n store,\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n allSchemasCount,\n nullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n }}} = useStore('');\n const [isSmallScreen, setIsSmallScreen] = useState(true);\n const [allowScroll, setAllowScroll] = useState(false);\n\n const onWindowResize = () => {\n setIsSmallScreen(window.innerWidth < 1441);\n setAllowScroll(window.innerWidth < 768);\n };\n\n useEffect(() => {\n onWindowResize();\n window.addEventListener('resize', onWindowResize);\n return () => {\n window.removeEventListener('resize', onWindowResize);\n };\n }, []);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const getProgressColor = (value: number, min: number, average: number, max?: number) => {\n if (value <= min) {\n return '#F44343';\n }\n if (value <= average && value > min) {\n return '#FF8536';\n }\n if (value > average) {\n if (max && value < max) {\n return '#BFE15E';\n }\n return '#52D477';\n }\n return '#52D477';\n };\n\n const reFormatSchemaType = value => {\n const outputString = value.replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');\n return outputString;\n };\n\n const handleTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...competitors];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n setCompetitors(data);\n } else {\n setCompetitors(store?.analytics?.competitorsData?.filter(item => item.keyword === activeKw)[0]?.competitors);\n }\n };\n\n useEffect(() => {\n if (selectedSchema?.value == 'all-schemas') {\n setFilteredCompetitorsData(competitors);\n } else if (selectedSchema?.value == 'no-schemas') {\n setFilteredCompetitorsData(competitors?.filter(item => item?.schema?.length == 0 || item?.schema == null));\n } else {\n const selectedSchemaValue = selectedSchema?.value;\n\n const filteredItems = [];\n\n competitors?.forEach(item => {\n if (item?.schema) {\n if (Array.isArray(item?.schema)) {\n item?.schema?.forEach(ele => {\n if (ele?.graph) {\n if (Array.isArray(ele?.graph)) {\n ele?.graph?.forEach(graphItem => {\n if (Array.isArray(graphItem?.type)) {\n if (graphItem?.type?.includes(selectedSchemaValue)) {\n filteredItems.push(item);\n }\n } else if (graphItem?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n } else if (ele?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n }\n });\n\n setFilteredCompetitorsData(filteredItems);\n }\n }, [selectedSchema]);\n\n const columns = [\n {\n title: () => #,\n dataIndex: 'position',\n key: 'position',\n sortField: 'position',\n width: 45,\n fixed: allowScroll ? false : 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return {record?.position};\n },\n },\n {\n title: () => {'PAGE / URL'.toUpperCase()},\n dataIndex: 'title',\n key: 'title',\n sortField: 'title',\n fixed: allowScroll ? false : 'left' as 'left',\n width: isSmallScreen ? 300 : 'auto',\n ellipsis: true,\n align: 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${record?.url}`} /> \n {record?.title}
\n {record?.url}}>\n \n {record?.title}\n {record?.url}\n \n ;\n },\n },\n {\n title: () => {'DR'.toUpperCase()},\n dataIndex: 'dr',\n key: 'dr',\n sortField: 'dr',\n sorter: (a: any, b: any) => a.dr - b.dr,\n align: 'center' as 'center',\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.dr ? record?.dr % 1 === 0 ? record?.dr : parseFloat(record?.dr.toFixed(2)) : 0;\n return \n \n {percent}\n ;\n },\n },\n {\n title: () => {'CS'.toUpperCase()},\n dataIndex: 'contentScore',\n key: 'contentScore',\n sortField: 'contentScore',\n align: 'right' as 'right',\n sorter: (a: any, b: any) => a.contentScore - b.contentScore,\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.contentScore ? record?.contentScore % 1 === 0 ? record?.contentScore : parseFloat(record?.contentScore.toFixed(2)) : 0;\n return \n {percent }}\n />\n ;\n },\n },\n {\n title: () => {'Schema'.toUpperCase()},\n dataIndex: 'schema',\n key: 'schema',\n sortField: 'schema',\n align: 'center' as 'center',\n width: 150,\n render: (_, record: SingleCompetitorType) => {\n let schemaLength = 0;\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaLength += 1 : Array.isArray(item?.graph) && item?.graph?.map(graphItem => graphItem?.type ? schemaLength += 1 : '');\n });\n\n const schemaItemsList = [];\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaItemsList.push(item) : Array.isArray(item?.graph) && item?.graph?.map(graphItem => schemaItemsList.push(graphItem));\n });\n return \n {record?.schema != null && record?.schema != undefined && Array.isArray(record?.schema) && record?.schema?.length != 0 ?\n <>\n \n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, 0, record?.schema[0])}>{reFormatSchemaType(String(record?.schema ? (record?.schema[0]?.graph ? record?.schema[0]?.graph[0]?.type : record?.schema[0]?.type) : '-'))} \n {schemaLength > 1 &&\n <>\n , \n {schemaItemsList?.map((item, idx) =>\n <>\n {idx == 0 ? '' :\n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, idx, item)}\n style={{width: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2D6CCA', cursor: 'pointer', paddingLeft: '20px'}}>\n {reFormatSchemaType(String(item?.type))} \n }\n ,\n )}}>\n +{schemaLength - 1} \n \n }\n \n : '-'\n }\n ;\n },\n },\n {\n title: () => <>{'int'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'internalLinks',\n key: 'internalLinks',\n sortField: 'internalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.internalLinks?.length - b?.internalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.internalLinks?.length == 0 ?\n {numberWithCommas(record?.internalLinks?.length) || '-' } :\n \n {record?.internalLinks?.length > 0 ? record?.internalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.internalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => <>{'ext'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'externalLinks',\n key: 'externalLinks',\n sortField: 'externalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.externalLinks?.length - b?.externalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.externalLinks?.length == 0 ?\n {numberWithCommas(record?.externalLinks?.length) || '-' } :\n \n {record?.externalLinks?.length > 0 ? record?.externalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.externalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => {'h1'.toUpperCase()},\n dataIndex: 'h1Count',\n key: 'h1Count',\n sortField: 'h1Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h1Count - b?.h1Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h1Count) || '-' };\n },\n },\n {\n title: () => {'h2'.toUpperCase()},\n dataIndex: 'h2Count',\n key: 'h2Count',\n sortField: 'h2Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h2Count - b?.h2Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h2Count) || '-' };\n },\n },\n {\n title: () => {'h3'.toUpperCase()},\n dataIndex: 'h3Count',\n key: 'h3Count',\n sortField: 'h3Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h3Count - b?.h3Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h3Count) || '-' };\n },\n },\n {\n title: () => {'Word Count'.toUpperCase()},\n dataIndex: 'wordCount',\n key: 'wordCount',\n sortField: 'wordCount',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.wordCount - b?.wordCount,\n width: 115,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.wordCount) || '-' };\n },\n },\n ];\n\n return \n \n \n \n \n Types of Schema Found: \n \n setSelectedSchema({idx: 'all-schemas', value: 'all-schemas'})}>All schemas | {allSchemasCount} \n setSelectedSchema({idx: 'no-schemas', value: 'no-schemas'})}>No schemas | {nullCount} \n {schemaTypesList?.map((item, idx) => {\n return setSelectedSchema({idx: `${idx}`, value: item?.value})} key={idx}>{reFormatSchemaType(String(item?.value))} | {item?.count} ;\n })}\n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst DRWrapper = styled.div`\n background-color: rgba(45, 108, 202, 0.07);\n display: flex;\n border-radius: 6px;\n align-items: center;\n justify-content: center;\n width: 55px;\n height: 32px;\n padding: 7px 12px 8px 12px;\n`;\n\nconst PageUrlWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst TypesSchemaFilterWrapper = styled.div`\n\n`;\n\nconst SchemaFilterTitle = styled.div`\n color: #4E5156;\n font-size: 14px;\n margin-left: 10px;\n margin-bottom: 10px;\n`;\n\nconst SchemaFilterWrapper = styled.div`\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n margin-left: 10px;\n width: 97%;\n overflow-x: auto;\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n`;\n\nconst SchemaFilter = styled.div<{selectedSchema?: boolean}>`\n min-width: fit-content;\n min-height: 28px;\n border-radius: 14px;\n background: ${p => p?.selectedSchema ? 'linear-gradient(0deg, rgba(127, 78, 173, 0.20) 0%, rgba(127, 78, 173, 0.20) 100%), #FFF' : '#FFFF'};\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n border: ${p => p?.selectedSchema ? '1px solid #7F4EAD' : '1px solid #E8E8E8'};\n display: flex;\n padding: 5px 10px 6px 10px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n\nconst LinksContainer = styled.div`\n max-height: 300px;\n overflow-y: auto;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n\nconst LinkWrapper = styled.div`\n width: auto;\n font-size: 12px;\n line-height: 14px;\n color: rgb(45, 108, 202);\n white-space: pre-line;\n overflow-wrap: anywhere;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 8px;\n`;\n\nconst StyledAnchor = styled.a`\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst BlueTextWithUnderline = styled.div`\n color: #2D6CCA;\n cursor: pointer;\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst ULStyled = styled.ul`\n padding-left: 0px;\n max-height: 160px;\n overflow-y: auto;\n padding: 5px;\n margin-bottom: 0;\n width: 200px;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n","import styled from 'styled-components';\nimport {faArrowLeft} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {urlValidationRegex2} from '@/constants/regex';\nimport moment from 'moment';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const CompetitorsDetail = observer(() => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n competitorSchemaObject,\n competitorTitle,\n competitorUrl,\n competitorSchemaGraphIdx,\n }}} = useStore('');\n\n const formats = [\n moment.ISO_8601,\n 'MM/DD/YYYY :) HH*mm*ss',\n ];\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const renderSchemaData = dataObj => {\n return <>\n \n {mainLebel && mainLebel != '0' ? mainLebel == 'type' ? `@${mainLebel}` : mainLebel : ''} \n {typeof mainValue !== 'object' ? {typeof mainValue == 'boolean' ? `${mainValue ? 'Yes' : 'No'}` : (\n urlValidationRegex2?.test(String(mainValue)) ? {String(mainValue)} : (\n moment(mainValue, formats, true)?.isValid() || mainLebel?.includes('date') ? moment(mainValue)?.utc()?.format('DD MMM YYYY') : `${mainValue}`\n )\n )} :\n renderSchemaData(mainValue)}\n ;\n })}\n \n \n ;\n };\n\n return <>\n setShowCompetitorTermsTableDetail(false)\n }>\n \n \n \n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitorUrl}`} />\n \n \n {competitorTitle}\n {competitorUrl}\n \n \n \n @context \n {competitorSchemaObject?.context ?? '-'} \n @graph \n {renderSchemaData(competitorSchemaObject?.graph ? competitorSchemaObject?.graph[competitorSchemaGraphIdx] : competitorSchemaObject)}\n \n \n ;\n});\n\nconst BackArrowContainer = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-left: 33px;\n margin-top: 37px;\n width: max-content;\n`;\n\nconst SchemaContainer = styled.div`\n width: 95%;\n margin-left: 30px;\n margin-top: 27px;\n min-height: 630px;\n background-color: white;\n border-radius: 14px;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n`;\n\nconst SchemaLabel = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 8px;\n`;\n\nconst SchemaValue = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n`;\n\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\n\nconst URL = styled.a`\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst SchemaHeader = styled.div`\n display: flex;\n align-items: center;\n margin-left: 30px;\n margin-top: 20px;\n`;\n\nconst SchemaPageTitle = styled.div`\n\n`;\n","import {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction} from 'react';\nimport {CompetitorsTable} from './CompetitorsTable';\nimport {useStore} from '@/store/root-store';\nimport {CompetitorsDetail} from './CompetitorsDetail';\n\ninterface Props {\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsDrawerTab = observer(({\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n setSchemaTypesList,\n allSchemasCount,\n setAllSchemasCount,\n nullCount,\n setNullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer: {\n currentPage: {\n showCompetitorTermsTableDetail,\n }}} = useStore('');\n\n return showCompetitorTermsTableDetail ? ranking : not ranking }\n {`for `}\n {keyword}\n \n {/* used {keyword} {score} times */}\n \n \n);\nconst focusTermsTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n);\nexport const CompetingFocusTermsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n const {contentOptimizer: {currentPage: {analytics, isCompetingFocusTermsDrawerOpen, closeCompetingFocusTermsDrawer, isOpeningKwSuggestionsFromContentResearch, setIsOpeningKwSuggestionFromContentResearch}}} = useStore('');\n const [selectedKeyword, setSelectedKeyword] = useState('');\n const [selectedCompTabKw, setSelectedCompTabKw] = useState('');\n const [isHovered, setIsHovered] = useState(false);\n const [maxElemHeight, setMaxElemHeight] = useState(0);\n const allRef = useRef(null);\n const keywordSuggestionsRef = useRef(null);\n const [activeTab, setActiveTab] = useState('1');\n\n const antIcon = {\n setActiveTab('1');\n setIsOpeningKwSuggestionFromContentResearch(false);\n closeCompetingFocusTermsDrawer();\n }}\n closeIcon={Competitor Content Analysis \n onTabChange(key)}>\n Top competitors {currentPage?.isAnalyzing && \n \n Relevant terms grid {currentPage?.isAnalyzing && \n \n \n Competing Focus Terms \n Check what focus terms your competitors are using \n \n \n exportSingleNode(allRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => (\n {i === 0 ? 'YOU' : i} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n \n Created From Scratch\n \n \n );\n }\n return (\n \n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n CONTENT SCORE\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.contentScores?.map((score, i) => (\n {percent}}\n />\n ))}\n \n
\n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item?.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}\n \n \n Keyword suggestions {currentPage?.isAnalyzing && \n \n \n {/* Keywords Suggestions */}\n Check out what keywords your competitors are using \n \n \n exportSingleNode(keywordSuggestionsRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => {\n return (\n \n \n \n {x.url}\n \n \n Content Score: \n {x.contentScore}\n \n \n Word Count: \n {x.wordCount}\n \n \n }\n key={x?.url}\n >\n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n
\n \n \n TARGET KEYWORD\n USAGE\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.keywordSuggestionsUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: score ? '#2AC155' : '#F44343'}}> \n \n ))}\n \n ))}\n \n \n \n \n );\n});\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: 20px;\n color: #121212;\n line-height: 28px;\n`;\n\nconst TitleStyled = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n line-height: normal;\n margin: 0 0 15px 30px;\n`;\n\nconst Subtitle = styled.div`\n font-size: 16px;\n line-height: 24px;\n color: #4E5156;\n`;\n\nconst SectionHeader = styled.div`\n background: #e2e2e5;\n border-radius: 3px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Square = styled.div<{isHovered: boolean}>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\nconst SelectStyled = styled(Select)`\n width: 100%;\n\n .ant-select-arrow {\n color: #121212;\n }\n`;\n\nconst Site = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n width: auto;\n display: block;\n align-items: left;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst IsNotRanking= styled.span`\n padding: 2px 7px;\n background-color: #F44343;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import {useEffect} from 'react';\nimport {Form, Select, Spin} from 'antd';\nimport {\n Button,\n CommonInput,\n} from '@/components/common-components/components';\nimport styles from './style.module.scss';\n\nimport {useState} from 'react';\nimport {languages} from '@/components/dashboard/pages/content-ideas/drawer/languages';\nimport Flag from '@/components/common-components/components/flag';\nimport {formatCountryCode} from '@/components/dashboard/pages/content-ideas/drawer/languageUtil';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport {observer} from 'mobx-react';\nimport {LoadingOutlined} from '@ant-design/icons';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_CONTENT_IDEAS_GENERATE} from '@/constants/events';\nimport {useStore} from '@/store/root-store';\n\ninterface Props {\n store: ContentIdeasStore;\n pageId: any;\n drawerVisible: boolean;\n}\n\nexport const NewContentIdeaForm = observer(({store, pageId, drawerVisible}: Props) => {\n const {\n settings: {\n customer: {\n getCustomerQuota,\n },\n },\n } = useStore('');\n\n\n const usaCode = languages.find(lang => lang.code == 'en');\n\n\n const antIcon = Need some inspiration? Here you can generate unlimited article ideas on any topic you can think of.
\n\n \n \n );\n});\n","import {useState, useEffect} from 'react';\nimport styles from './style.module.scss';\nimport {faDownload} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n Button,\n} from '@/components/common-components/components';\nimport {CopyOutlined} from '@ant-design/icons';\n\nimport {Divider, Tooltip} from 'antd';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {SCA_PAGE_CONTENT_IDEA_COPY, SCA_PAGE_CONTENT_IDEA_DOWNLOAD} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {useTranslation} from 'next-i18next';\nimport parse from 'html-react-parser';\n\ninterface Props {\n idea: string;\n}\n\nexport const SingleContentIdea = ({idea}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [convertedText, setConvertedText] = useState(idea);\n\n const {t} = useTranslation('landing-page-optimizer');\n\n useEffect(() => {\n // Removing the leading space from string\n const newLineIndex = idea?.search('\\n');\n const textWithoutLeadingSpace = idea?.slice(0, newLineIndex + 1) + idea?.slice(newLineIndex + 2);\n const firstTitle = idea?.slice(0, newLineIndex + 1);\n const result = textWithoutLeadingSpace.replace(firstTitle, '' + firstTitle + '');\n\n setConvertedText(result);\n }, [idea]);\n\n\n const downloadFileToTxt = () => {\n const element = document.createElement('a');\n const file = new Blob([idea], {type: 'text/plain'});\n element.href = URL.createObjectURL(file);\n const breakFileName = idea.split(' ').length;\n const fileName = breakFileName > 4 ? idea.split(' ').slice(0, 4).join('-') : idea.split(' ').slice(0, breakFileName).join('-');\n element.download = `${fileName}`;\n document.body.appendChild(element);\n element.click();\n };\n\n return (\n \n \n {convertedText && parse(convertedText.trim())}\n
\n {\n downloadFileToTxt();\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_DOWNLOAD, {\n 'description': 'Content idea downloaded',\n });\n }}/>\n {\n navigator.clipboard.writeText(idea);\n setCopySuccess(true);\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_COPY, {\n 'description': 'Content idea copied',\n });\n }}>\n \n \n \n \n );\n};\n","// import {useState} from 'react';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport CsvDownloader from 'react-csv-downloader';\nimport {Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleContentIdea} from './SingleContentIdea';\nimport {ExportOutlined} from '@ant-design/icons';\nimport {Button} from '@/components/common-components/components';\n\ninterface Props {\n store: ContentIdeasStore;\n}\n\nexport const ContentIdeas = observer(({store}: Props) => {\n const csvModel = store?.wordsArray.map(item => ({\n title: item.split('\\n')[0],\n text: item.split('\\n')[1],\n }));\n\n const csvColumns = [\n {\n id: 'title',\n displayName: 'Title',\n },\n {\n id: 'text',\n displayName: 'Text',\n },\n ];\n return <>\n {store?.wordsArray.length ? \n {`${store?.wordsArray?.length} ideas generated for \"${store?.keyword}\" `}\n \n \n \n
: null}\n {store?.wordsArray && store?.wordsArray.map((idea, idx) => {\n return {\n contentIdeas.clearContentIdeas();\n setDrawerVisible(false);\n currentPage.setIsOpenContentGeneratorDrawer(false);\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={styles.contentIdeasDrawer}\n afterVisibleChange={visible => {\n if (visible) setDrawerVisible(true);\n }}\n >\n \n \n Content Helper\n \n \n \n \n \n \n );\n});\n","import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip, Spin} from 'antd';\nimport styles from './style.module.scss';\nimport {faCheck, faPlus, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport classNames from 'classnames';\n\ninterface Props {\n keyword: string;\n isIncluded?: boolean;\n}\n\nexport const SimilarKeyword = observer(({keyword, isIncluded}: Props) => {\n const {\n OverviewPage: {\n addToLoadingArray,\n loadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}, getCustomerQuota}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n const antIcon = \n {keyword ? keyword : '-'}\n \n \n\n {loadingArray && loadingArray.includes(keyword) ?\n \n \n Remove\n :\n // adding a check to disable button if total target kw limit is reached\n currentPage?.feTargetKeywords?.length < 15 ?\n onAddKeywordFinish()}>\n \n \n \n\n }\n\n \n ;\n});\n","import {useEffect, useState, useCallback} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {\n Drawer,\n Progress,\n Tooltip, Select} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport styled from 'styled-components';\nimport {formatNumber, numberWithCommas} from '@/utils/number';\nimport {Table, BarChartColumn, SkeletonRingLoader, Pagination, SkeletonHorizontalLoaderGray, Button} from '@/components/common-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {EChartOption} from 'echarts';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {getProgressColor} from '@/utils/colors';\nimport {faArrowUp} from '@fortawesome/pro-regular-svg-icons';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport numeral from 'numeral';\nimport Flag from '@/components/common-components/components/flag';\nimport {SimilarKeyword} from './SimilarKeyword';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const ContentResearchDrawer = observer(() => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const {\n countries: {getSpecificCountryByCode},\n OverviewPage: {\n isContentResearchDrawerOpen,\n loading,\n keywordDetail,\n closeContentResearchDrawer,\n getKeywordDetail,\n removeFromLoadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const countryName = getSpecificCountryByCode(keywordDetail?.countryCode);\n\n const [activeKw, setActiveKw] = useState('');\n const [similarKeywordsPageNumber, setSimilarKeywordsPageNumber] = useState(1);\n const [similarKeywordsPageSize] = useState(8);\n const [similarKeywordsData, setSimilarKeywordsData] = useState([]);\n const [similarKeywordsList, setSimilarKeywordsList] = useState([]);\n\n const [topCompetitorsData, setTopCompetitorsData] = useState([]);\n const [rankingPotentialData, setRankingPotentialData] = useState([]);\n\n const {Option} = Select;\n\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n getKeywordDetail(currentPage?.content?.targetKeywords?.filter(item => item.keyword === value)[0]?.id);\n };\n\n\n /* SIMILAR KEYWORDS TABLE UPDATE START */\n const handleFilterRenderData = useCallback((dataArray: any, pageNumber: number, pageSize: number) => {\n const targetKwArray = currentPage?.content?.targetKeywords && currentPage?.content?.targetKeywords.length ? toJS(currentPage.content.targetKeywords).map(item => {\n return JSON.stringify({\n keyword: item.keyword,\n countryCode: item.countryCode,\n locationId: item.locationId,\n location: item.location,\n });\n }) : [];\n\n let similarKeywordsFormattedData = [];\n if (dataArray.length && targetKwArray?.length ) {\n const updatedData = toJS(dataArray).map(item => {\n return {\n ...item,\n isKwIncluded: targetKwArray.includes(JSON.stringify({\n keyword: item.keyword,\n countryCode: currentPage.content.countryCode,\n locationId: currentPage.content.locationId,\n location: currentPage.content.location,\n })),\n };\n });\n\n\n similarKeywordsFormattedData = updatedData;\n } else {\n similarKeywordsFormattedData = dataArray;\n }\n setSimilarKeywordsData(similarKeywordsFormattedData.slice((pageNumber - 1) * pageSize, ((pageNumber - 1) * pageSize) + pageSize));\n }, []);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n const kwArray = [...(currentPage?.content?.targetKeywords ?? [])].map(kw => kw.keyword);\n removeFromLoadingArray(kwArray);\n handleFilterRenderData([...keywordDetail.similarKeywords], similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n }, [[...(currentPage?.content?.targetKeywords ?? [])].length, activeKw, toJS(keywordDetail?.similarKeywords)?.length, handleFilterRenderData, keywordDetail?.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize]);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n setSimilarKeywordsList(keywordDetail.similarKeywords);\n }\n }, [toJS(keywordDetail?.similarKeywords)?.length, toJS(keywordDetail?.similarKeywords), activeKw]);\n\n\n const onPaginationChange = async (pageNumber: number, pageSize: number) => {\n setSimilarKeywordsPageNumber(pageNumber);\n handleFilterRenderData(keywordDetail.similarKeywords, pageNumber, pageSize);\n };\n\n const handleIssueTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...similarKeywordsList];\n\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n handleFilterRenderData(data, similarKeywordsPageNumber, similarKeywordsPageSize);\n } else {\n handleFilterRenderData(keywordDetail.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n };\n /* SIMILAR KEYWORDS TABLE UPDATE END */\n\n /* TOP COMPETITORS TABLE UPDATE START */\n useEffect(() => {\n if (keywordDetail?.competitors?.length > 0) {\n setTopCompetitorsData(keywordDetail.competitors);\n }\n }, [toJS(keywordDetail?.competitors)?.length, activeKw]);\n\n\n const handleTopCompetitorsTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...topCompetitorsData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setTopCompetitorsData(data);\n } else {\n setTopCompetitorsData(keywordDetail?.competitors);\n }\n };\n /* TOP COMPETITORS TABLE UPDATE END */\n\n /* RANKING POTENTIAL TABLE UPDATE START */\n useEffect(() => {\n const relevanceData = [];\n relevanceData?.push({\n competition: keywordDetail?.typicalTop10 && Object.keys(keywordDetail?.typicalTop10)[0],\n contentScore: keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n dr: keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n wordCount: keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n readAbility: keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n });\n\n if (relevanceData.length > 0) {\n setRankingPotentialData(relevanceData);\n }\n }, [\n activeKw, keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n ]);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n\n const handleRankingPotentialTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...rankingPotentialData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setRankingPotentialData(data);\n } else {\n setRankingPotentialData(keywordDetail?.competitors);\n }\n };\n /* RANKING POTENTIAL TABLE UPDATE END */\n\n const columns = [\n {\n title: 'AVERAGE PER COMPETION',\n dataIndex: 'competition',\n key: 'competition',\n width: 180,\n align: 'left' as 'left',\n render: (_, data) => {data?.competition || '-'},\n },\n {\n title: 'CONTENT SCORE',\n dataIndex: 'contentScore',\n sorter: true,\n sortField: 'contentScore',\n width: 100,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sorter: true,\n sortField: 'dr',\n width: 80,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n width: 110,\n align: 'center' as 'center',\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readAbility',\n dataIndex: 'readAbility',\n align: 'center' as 'center',\n width: 110,\n render: (_, data) => {\n return {data?.readAbility ? data?.readAbility : '-'};\n },\n\n },\n ];\n\n const topCompetitorColumns = [\n {\n title: 'SITE / URL',\n dataIndex: 'hostname',\n key: 'hostname',\n width: 300,\n align: 'left' as 'left',\n fixed: 'left' as 'left',\n render: (_, data) => {\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sortField: 'dr',\n sorter: true,\n width: 60,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n align: 'center' as 'center',\n width: 100,\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readability',\n dataIndex: 'readability',\n align: 'center' as 'center',\n width: 170,\n render: (_, data) => {\n return {data?.readability ? data?.readability : '-'};\n },\n\n },\n ];\n\n const squareTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n );\n\n const SimilarKeywordConfig = [\n {\n title: 'KEYWORD',\n dataIndex: 'keyword',\n key: 'keyword',\n align: 'left' as 'left',\n width: 240,\n render: (_, record) => {\n return ();\n },\n },\n {\n title: 'TREND',\n dataIndex: 'histSv',\n align: 'center' as 'center',\n key: 'histSv',\n width: 70,\n render: (series: EChartOption.Series[]) => {\n const formatSeries = {\n data: series,\n itemStyle: {color: '#7f4ead'},\n type: 'bar',\n };\n return {\n closeContentResearchDrawer();\n }}\n closeIcon={\n Content Research\n \n \n \n Based on Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n \n\n {loading ? :\n {keywordDetail?.countryCode ? :\n \n KD: 75 ? '#F44343' : keywordDetail?.kd < 76 && keywordDetail?.kd > 50 ? '#e4a469' : keywordDetail?.kd < 51 && keywordDetail?.kd > 25 ? '#bfe15e' : '#1d754e' : '#696777'}}>•{keywordDetail?.kd || '-'}\n }\n {loading ? : SV: {numeral(keywordDetail?.sv).format('0.[0][a]')}}\n\n {loading ? :\n Total Search Results: {keywordDetail?.totalSearchResults ? numeral(keywordDetail?.totalSearchResults).format('0.[0][a]') : '0'}}\n \n \n \n \n Ranking Potential\n {keywordDetail?.rankingPotential ?\n \n \n {keywordDetail?.rankingPotential}\n : null }\n data.date) : [],\n type: 'category',\n show: true,\n axisLabel: {\n interval: 10,\n formatter: label => {\n const date = moment(label);\n return `{month|${date.format('MMM')}}-{year|${date.format('YY')}}`;\n },\n rich: {\n month: {\n color: '#77757D',\n lineHeight: 15.54,\n },\n year: {\n color: '#77757D',\n fontSize: 12,\n lineHeight: 12.95,\n },\n },\n },\n splitLine: {\n show: false,\n },\n },\n yAxis: {\n type: 'value',\n show: true,\n axisLabel: {\n formatter: label => {\n return `${formatNumber(label)}`;\n },\n },\n splitLine: {\n lineStyle: {\n color: '#E8E8E8',\n type: 'dashed',\n width: 1},\n show: true,\n },\n },\n grid: {\n height: '70%',\n left: '10%',\n top: '9%',\n },\n series: [\n {\n data: keywordDetail?.svTrend?.map(data => data.volume) || [],\n type: 'line',\n areaStyle: {},\n symbolSize: 2,\n symbol: '',\n },\n ],\n }} />\n }\n\n \n \n\n\n \n \n Common Citations\n {loading ? :\n \n {keywordDetail?.commonCitations?.length ? keywordDetail?.commonCitations?.map((citation, index) => {\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc?.length > 70 ?\n \n {citation?.metaDesc.substring(0, 70) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by:\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp?.metaDesc?.length > 70 ? serp?.metaDesc?.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 9 && (\n {`+${citation?.serps?.length - 9}`}\n )}\n \n : null}\n\n \n ;\n }) : No data available}\n {/* return \n \n \n \n \n Top competitor content \n\n \n \n Similar keywords \n\n \n {\n closeContentResearchDrawer();\n currentPage.setIsOpeningKwSuggestionFromContentResearch(true);\n currentPage.openCompetingFocusTermsDrawer();\n }}>View all keywords\n \n\n \n \n\n \n \n Relevant terms used by Competitors \n\n \n {loading ? : <>\n \n COMPETITOR RANK\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n Created From Scratch\n \n );\n }\n return (\n \n \n {/* {x?.hostname} */}\n \n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {keywordDetail && keywordDetail?.termsGrid?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n \n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}}\n \n \n ;\n});\n\nconst PageTitle = styled.div`\n font-weight: 600;\n margin-bottom: 10px;\n margin-left: 40px;\n font-size: 20px;\n`;\nconst Header = styled.div`\n display: flex;\n margin-bottom: 10px;\n padding-left: 40px;\n`;\n\nconst TitleContainer = styled.div`\nheight: 60px;\nbackground: #2D2F34;\npadding: 18px;\nborder-radius: 8px 8px 0px 0px;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n line-height: 22px;\n`;\n\nconst SectionHeader = styled.div`\n background: #F7F7F8;\n border-radius: 3px;\n margin-right: 4px;\n margin-left: 4px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst MiddleContainer = styled.div`\n display: flex;\n padding: 0 40px 30px 40px;\n`;\n\nconst Square = styled.div<{ isHovered: boolean }>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\n\nconst Site = styled.div`\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n font-size: 12px;\n color: #2D6CCA;\n width: 40px;\n display: flex;\n align-items: center;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import KeywordDetailContent from '@/components/dashboard/pages/keyword-researcher-v2/keyword-detail-drawer-content';\nimport {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react-lite';\n\nexport const KeywordsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n\n return {\n // scroll to related keywords table automaticaly\n if (visible) {\n if (currentPage?.isDrawerFromCa) {\n document.getElementById('SuggestedKeywordTableId')?.scrollIntoView({block: 'center'});\n }\n }\n }}\n onClose={() => {\n currentPage.setIsDrawerFromCa(false);\n currentPage.setIsOpenKeywordDrawer(false);\n currentPage.setActiveTargetKw('');\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={'drawerCloseIcon'}\n closeIcon={ changeView()}>\n ;\n};\n\nconst TechnicalsSwitcherContainer = styled.div`\n display: flex;\n margin-bottom: 20px;\n font-size: 12px;\n align-items: center;\n cursor: pointer;\n`;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faRotateRight} from '@fortawesome/pro-regular-svg-icons';\n\nexport const PageSpeedIndex = observer(() => {\n const secondAntIcon = \n \n Page Speed Index:\n {!currentPage?.isWordCountLoading ? <>\n {generateDotWithColor(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.status) }\n {!isNil(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score) ? <>{Math.round(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score * 100)}/100 : null}\n :\n }\n \n\n\n \n Last Fetch: \n {!currentPage?.content?.updatedAt ? : moment(currentPage?.content?.updatedAt).format('DD MMM YYYY')} \n refetchArticle(currentPage?.content?.uuid) }/>\n\n \n ;\n});\n\n\nconst Container = styled.div`\n cursor: default;\n`;\nconst SpeedIndexContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n margin-top: 5px;\n`;\nconst LastFetchContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n`;\nconst SpeedIndexDot = styled.div`\n border-radius: 2px;\n height: 4px;\n margin-left: 8px;\n margin-right: 3px;\n width: 4px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {Progress, Spin, Tooltip} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styled from 'styled-components';\nimport {getProgressColor} from '@/utils/colors';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {PageSpeedIndex} from '../PageSpeedIndex';\nimport {LoadingOutlined} from '@ant-design/icons';\n\n\nexport const TechnicalScore = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {t} = useTranslation('common');\n\n const antIcon = \n {!currentPage.isScoreLoading ? (currentPage?.analysis?.technicalScore ?? '-') : \n \n {t('technical-score')} \n \n \n \n\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n height: 30px;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst TitleAndWordCount = styled.div`\n margin-left: 10px;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {routes} from '@/utils/const';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faFileChartColumn} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Checkbox as AntdCheckbox, Form, Popover, Spin, Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {TechnicalsViewSwitcher} from '../../Common/ViewSwitcher';\nimport {TechnicalScore} from './TechnicalScore';\nimport {Checkbox} from '@/components/common-components/v2';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const HeaderSection = observer(({changeView}: Props) => {\n const [auditLoader, setAuditLoader] = useState(false);\n const [onPageAuditPopoverVisible, setOnPageAuditPopoverVisible] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {contentAuditStore: {loadContentAudit, setNewRecordId}} = useStore('');\n\n const antIconSecond = \n \n \n Select 1 to 3 Target Keywords \n \n ({\n validator(_, value) {\n const existingValues = form.getFieldsValue(true);\n if (!value || !existingValues['target-keywords']?.length) return Promise.reject(new Error('Please select at least 1 Target Keyword.'));\n if (existingValues['target-keywords']?.length && existingValues['target-keywords']?.length > 3) return Promise.reject(new Error('You can use maximum of 3 Target Keywords.'));\n\n return Promise.resolve();\n },\n })]}>\n \n \n {currentPage?.getUniqueKeywords?.map((kw, idx) => {\n return \n {kw}\n ;\n })}\n \n \n \n \n setOnPageAuditPopoverVisible(false)}>Cancel \n \n \n \n \n \n }>\n setOnPageAuditPopoverVisible(!onPageAuditPopoverVisible)} color='neonBlue' variant='ghost' mode='dark'>\n {auditLoader ? Run Complete Onpage Audit \n \n : \n \n {auditLoader ? Run Complete Onpage Audit \n \n }\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TopSeactionContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst RunPageAuditBtn = styled(Button)`\n color: #4881f0 !important;\n cursor: pointer;\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst BtnText = styled.div`\n margin-left: 5px;\n display: inline-block;\n color: #34AEF3 !important;\n font-size: 12px;\n\n // &:hover {\n // text-decoration: underline;\n // }\n`;\n\nconst PopoverWrapper = styled.div`\n\n`;\n\nconst PopoverTitle = styled.div`\n font-weight: 600;\n margin-bottom: 20px;\n`;\nconst PopoverKwContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst FormStyled = styled(Form)`\n .ant-checkbox-wrapper + .ant-checkbox-wrapper {\n margin-left: 0px;\n }\n\n .ant-checkbox-wrapper {\n line-height: 22px !important;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n`;\n\nconst PopoverBtnContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\n","import {CaretUpFilled} from '@ant-design/icons';\nimport {Col, Collapse, Row} from 'antd';\nimport {Pagination, Checkbox, Tooltip} from 'antd';\nimport classNames from 'classnames';\nimport {ReactNode, useEffect, useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport styles from './style.module.scss';\nimport {ChevronDown, ChevronUp} from 'react-feather';\nimport classnames from 'classnames';\nimport {faFilter, faCaretDown, faCaretUp} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {NextImg} from '@/utils/nextImg';\n\nimport {toJS} from 'mobx';\ninterface filters {\n label: string;\n checked: boolean;\n disabled?: boolean;\n disabledTooltip?: string;\n onChange: () => void;\n}\n\ninterface columnTitle {\n title?: string;\n sorter?: boolean;\n sortKey?: string | number;\n}\n\ninterface Props {\n className?: string;\n icon?: ReactNode;\n title?: string;\n description?: string | ReactNode;\n descriptionColor?: string;\n colTitle1?: string;\n colTitle2?: columnTitle;\n colTitle3?: string;\n colTitle4?: string;\n data?: any;\n dataRenderer?: any;\n pageSize?: any;\n footer?: ReactNode;\n isCollapse?: boolean;\n defaultActive?: boolean;\n filters?: filters[];\n plan?: any;\n warningBar?: ReactNode;\n}\n\nexport const AnalyticsCollapseCard = ({\n className,\n icon,\n title,\n description,\n descriptionColor,\n colTitle1,\n colTitle2 = {\n title: null,\n sorter: false,\n sortKey: null,\n },\n colTitle3,\n colTitle4,\n data,\n dataRenderer,\n pageSize,\n footer,\n isCollapse = true,\n defaultActive = false,\n filters,\n plan = true,\n warningBar,\n}: Props) => {\n const [pageNumber, setPageNumber] = useState(1);\n const [checkData, setCheckData] = useState(false);\n const [isFilterOpened, setIsFilterOpened] = useState(false);\n const [sortOrder, setSortOrder] = useState('');\n const [formatData, setFormatData] = useState(null);\n const [activeKey, setActiveKey] = useState(['']);\n const {t} = useTranslation('common');\n\n const getData = () => {\n if (pageSize) {\n return formatData?.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\n }\n return formatData;\n };\n useEffect(() => {\n if (getData()?.length > 0 || formatData === undefined || footer) {\n setCheckData(isCollapse);\n }\n }, [getData]);\n\n useEffect(() => {\n let newData = [];\n if (data) {\n newData = data.map(item => {\n return toJS(item);\n });\n }\n setFormatData(newData);\n }, [JSON.stringify(data)]);\n\n useEffect(() => {\n if (defaultActive) {\n setActiveKey([title]);\n }\n }, [defaultActive]);\n\n const sortData = (sortBy: string | number) => {\n const formatArray = [...data];\n if (sortOrder === '') {\n setSortOrder('desc');\n setFormatData(formatArray.sort((a, b) => {\n if (b[sortBy] < a[sortBy]) return -1;\n }));\n } else if (sortOrder === 'desc') {\n setSortOrder('asc');\n setFormatData(formatArray.sort((a, b) => {\n if (a[sortBy] < b[sortBy]) return -1;\n }));\n } else if (sortOrder === 'asc') {\n setSortOrder('');\n setFormatData(data);\n }\n };\n\n const changeActiveKey = key => {\n setActiveKey(key);\n };\n\n\n return (\n isCollapse ? (\n \n \n {icon}\n {title}\n \n \n {description}\n \n \n }\n >\n \n {warningBar && warningBar}\n {/* if we have 4 columns */}\n {colTitle3 && colTitle4 ?\n \n
:\n \n
\n }\n\n {getData()?.map((x, i) => dataRenderer(x, i))}\n \n {pageSize && (pageSize < data?.length) && (\n <>\n\n setPageNumber(pageNumber)}\n disabled={!plan}\n />\n \n )}\n {filters && filters.length >= 1 ?\n ( setIsFilterOpened(!isFilterOpened)}\n className={styles.filters}>\n {/* }\n \n \n {\n isFilterOpened && (\n e.stopPropagation()}>\n \n {filters.map((filter, idx) => (\n filter.disabled ?\n \n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n :\n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n ))\n }\n \n \n )\n }\n ) : null }\n \n {footer}\n \n \n );\n};\n","import React, {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react-lite';\nimport {Modal} from '@/components/common-components';\nimport {Divider} from 'antd';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n visible: boolean;\n schema: any;\n setShowModal: Dispatch>;\n}\n\nexport const SchemaModal = observer(({visible, schema, setShowModal}: Props) => {\n const dataList = schema ? JSON.parse(schema) : [];\n const data = (typeof (dataList) === 'object' && Object.keys(dataList).length === 0) ? [] : dataList?.find(item => item.graph) || [];\n const [expanded, setExpanded] = useState(false);\n const dataForDisplay = expanded ? data?.graph : data?.graph?.slice(0, 1);\n return (\n setShowModal(false)}\n footer={ setShowModal(false)}>Close }>\n \n\n \n Schema.org \n {<>\n @context \n {data?.context ?? '-'} \n @graph \n {dataForDisplay?.map((item, index) => {\n return <>#{index + 1} \n \n {`${x[0]}`} \n {`${x[0]}` == 'potentialAction' ? '' : (`${x[0]}` == 'url' ? {`${x[1]}`} :\n {`${typeof(x[1])!=='object' ? x[1] : '-'}`} )}\n {`${x[0]}` == 'potentialAction' ? item.potentialAction?.length > 0 && item?.potentialAction?.map((z, id) => {\n return \n {z?.type} \n {z?.queryInput} \n \n ;\n }) : ''}\n ;\n })}\n \n ;\n })}\n {data?.graph?.length > 1 ? \n setExpanded(!expanded)}>\n {expanded ? 'Hide schema' : 'Show full schema'}\n : ''}\n }\n \n \n \n\n );\n});\n\nconst MainContainer = styled.div`\n width: 100%;\n padding: 25px;\n background: #FFFFFF;\n`;\n\nconst Title = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\nconst Subtitle = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 10px;\n word-break: break-word;\n`;\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\nconst URL = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst ModalContentWrapper = styled.div`\n max-height: 70vh;\n overflow-y: auto;\n margin-top: 10px;\n // border: 1px solid #E8E8E8;\n // border-radius: 8px;\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n`;\n","import css from '../../index.module.scss';\nimport {\n Typography,\n Row,\n Col,\n Popover,\n Tooltip,\n} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport {AnalyticsCollapseCard} from '../../Common/AnalyticsCollapseCard';\nimport styles from '../style.module.scss';\nimport {useTranslation} from 'next-i18next';\nimport {getStatusColor} from '@/utils/colors';\nimport {NextImg} from '@/utils/nextImg';\n\nimport classNames from 'classnames';\nimport {Code, ExternalLink, Image,\n List,\n Video} from 'react-feather';\nimport {WarningMiniBar} from '@/components/common-components/components';\nimport {\n ButtonLink,\n} from '@/components/common-components/components';\nimport {Button} from '@/components/common-components/v2';\nimport {useState} from 'react';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {observer} from 'mobx-react-lite';\nimport {SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, SCA_PAGE_IMAGES_SHOW_MISSING_ALT, SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN} from '@/constants/events';\nimport {SchemaModal} from '../SchemaModal';\nimport {toJS} from 'mobx';\nimport {linkgraphDomain} from '@/utils/const';\n\n\nexport const TechnicalsData = observer(() => {\n const [showMissingAltText, setShowMissingAltText] = useState(false);\n const [isActiveInternalBrokenLinks, setIsActiveInternalBrokenLinks] = useState(false);\n const [isActiveExternalBrokenLinks, setIsActiveExternalBrokenLinks] = useState(false);\n const [showSchemaModal, setShowSchemaModal] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const {Title} = Typography;\n const {t} = useTranslation('common');\n\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/icon/broken-image.svg';\n // };\n\n const translateWord = (status: string) => {\n switch (status) {\n case 'Good':\n return t('good');\n case 'Average':\n return t('average');\n case 'Bad':\n return t('bad');\n case 'Missing':\n return t('missing');\n case 'Not Included':\n return 'Not Included';\n default:\n return '';\n }\n };\n\n const internalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveInternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.internal?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveInternalBrokenLinks(!isActiveInternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveInternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken internal links',\n });\n }\n },\n }];\n\n const uiFormatImageSize = (size: string) => {\n if (size) {\n let returnSize = null;\n const sizeArray = size.split('x');\n returnSize = {`x ${sizeArray[0]}`}
{sizeArray[1]};\n return returnSize;\n } else {\n return '-';\n }\n };\n\n const brokenHeaders = {currentPage?.analysis?.brokenHeaders?.map((item, i) => {\n return {item.type}{(i + 1) < currentPage?.analysis?.brokenHeaders?.length && `, `};\n })}{translateWord(currentPage?.analysis?.status?.headers)};\n\n const getMissingAltText = () => {\n if (showMissingAltText && currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '');\n } else if (currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img;\n }\n };\n\n const getMissingAltTotal = () => {\n if (!currentPage?.analysis?.images?.img?.length) return null;\n if (currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length;\n } else {\n return null;\n }\n };\n\n const generateInternalLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getInternalBrokenLinksCount || currentPage?.analysis?.getInternalBrokenLinksCount === 0) {\n const msg = currentPage?.analysis?.getInternalBrokenLinksCount > 1 || currentPage?.analysis?.getInternalBrokenLinksCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getInternalBrokenLinksCount} ${msg}`);\n if (currentPage?.analysis?.getInternalBrokenLinksCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getInternalRedirectsCount || currentPage?.analysis?.getInternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getInternalRedirectsCount > 1 || currentPage?.analysis?.getInternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getInternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.internal?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const imagesFilter = [{\n label: 'Show only missing alt text',\n checked: showMissingAltText,\n disabled: currentPage?.analysis?.images?.img?.filter(image => !image.alt || image.alt === '')?.length == 0,\n onChange: () => {\n setShowMissingAltText(!showMissingAltText);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_IMAGES_SHOW_MISSING_ALT, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for images with missing alt text',\n });\n }\n },\n }];\n\n const externalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveExternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.external?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveExternalBrokenLinks(!isActiveExternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken external links',\n });\n }\n },\n }];\n\n const generateExternallLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getExternalBrokenCount || currentPage?.analysis?.getExternalBrokenCount === 0) {\n const msg = currentPage?.analysis?.getExternalBrokenCount > 1 || currentPage?.analysis?.getExternalBrokenCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getExternalBrokenCount} ${msg}`);\n if (currentPage?.analysis?.getExternalBrokenCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getExternalRedirectsCount || currentPage?.analysis?.getExternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getExternalRedirectsCount > 1 || currentPage?.analysis?.getExternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getExternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.external?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const getExternalLinks = () => {\n if (isActiveExternalBrokenLinks && currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const getInternalLinks = () => {\n if (isActiveInternalBrokenLinks && currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const displayStatusCode = (statusCode: number) => {\n if (statusCode) {\n if (statusCode >= 200 && statusCode < 300) {\n return {statusCode};\n } else if (statusCode >= 300 && statusCode < 400) {\n return {statusCode};\n } else if (statusCode >= 400) {\n if (statusCode === 429) {\n return {statusCode};\n } else {\n return {statusCode};\n }\n }\n } else {\n return 'N/A';\n }\n };\n\n const displayFollowCode = (followCode: string) => {\n if (followCode) {\n if (followCode === 'nofollow') {\n return 'NF';\n } else {\n return DF;\n }\n } else {\n return '-';\n }\n };\n\n return <>\n \n \n \n {t('head')}\n \n {currentPage?.analysis?.metaSummary?.map(meta => {\n return (\n \n {meta.value}\n {meta.suggestion}\n \n )}\n />\n );\n })}\n \n \n {t('rich-media-tags')}\n \n \n {header.values.length && header.values.map((heading, i) => {\n return {`<${header.type}> `}\n {heading}\n {` `};\n })}\n \n }\n >\n \n
\n : \n
: \n
;\n }}\n />\n \n addDefaultSrc(e)}\n />\n \n \n {\n navigator.clipboard.writeText(image.src);\n }}>{image.src}\n \n ) : '-'}\n {image.alt || '-'}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n setShowSchemaModal(true)}>\n {t('view-schema-markups')}\n \n \n ) : (\n \n {t('view-schema-markups')}\n \n )\n }\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n \n {\n navigator.clipboard.writeText(js.src);\n }}>{js.src}\n \n )}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n ;\n});\n","import {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {HeaderSection} from './HeaderSection';\nimport {TechnicalsData} from './TechnicalsData';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Technicals = observer(({changeView}: Props) => {\n return \n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nconst DataContainer = styled.div`\n height: auto;\n overflow-y: auto;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n","import React from 'react';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport classNames from 'classnames';\n\ninterface Props {\n isSubscriber: boolean;\n store: CurrentPageStore;\n setCompetitors: (competitors: any[]) => void;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n compListCollapsed: boolean;\n}\n\nexport const KeywordSelector = ({store, isSubscriber, setActiveKw, setCompetitors, activeKw, compListCollapsed}: Props) => {\n const {Option} = Select;\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(store?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n };\n\n return \n \n {compListCollapsed ? 'Kw' : 'Keyword'}\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '250px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={classNames(styles.selectInput, compListCollapsed && styles.minified)}\n suffixIcon={ ;\n};\n","import {Checkbox} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {faCheck, faPlus} from '@fortawesome/pro-solid-svg-icons';\nimport {faSquareCheck} from '@fortawesome/pro-light-svg-icons';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {EditorState, Modifier, SelectionState, ContentState} from 'draft-js';\nimport {debounce} from 'lodash';\nimport {observer} from 'mobx-react';\nimport {useCallback, useState} from 'react';\nimport styled from 'styled-components';\n// import {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n\ninterface Props {\n activeCompetitor: any;\n htmlToDraft: any;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const HeadingsTree = observer(({\n activeCompetitor,\n htmlToDraft,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedIndexData,\n checkedIndexData}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer:\n {currentPage: {\n setCopiedHeadings,\n }}} = useStore('');\n\n\n const [addedHeadings, setAddedHeadings] = useState([]);\n const [copiedHeading, setCopiedHeading] = useState({\n tag: '',\n text: '',\n });\n\n const [filters, setFilters] = useState([\n {\n tag: 'h1',\n active: true,\n },\n {\n tag: 'h2',\n active: true,\n },\n {\n tag: 'h3',\n active: true,\n },\n {\n tag: 'h4',\n active: true,\n },\n {\n tag: 'h5',\n active: true,\n },\n {\n tag: 'h6',\n active: true,\n },\n ]);\n\n const onCheckboxChecked = (checked: boolean, tag: string) => {\n const curFilters = [...filters];\n\n const updatedFilters = curFilters.map(filter => {\n if (filter.tag == tag) {\n return {\n ...filter,\n active: checked,\n };\n } else {\n return {...filter};\n }\n });\n\n setFilters(updatedFilters);\n };\n\n const checkboxClickHandler = (e, headingContent, headingTag, idx) => {\n if (e?.target?.checked) {\n setCheckedCount(checkedCount + 1);\n const newItem = {'id': idx, 'headingContent': headingContent, 'headingTag': headingTag};\n setCheckedIndexData([...checkedIndexData, newItem]);\n } else {\n setCheckedCount(checkedCount - 1);\n\n const updatedCheckedIndexData = checkedIndexData.filter(item => item?.id !== idx);\n setCheckedIndexData(updatedCheckedIndexData);\n }\n };\n\n const handleCopyClick = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n navigator.clipboard.writeText(updatedCopiedHeadings);\n };\n\n // const [blockskMap, setBlocksMap] = useState([]);\n\n // const mapHeadingsToDraftBlockTypes = {\n // 'h1': 'header-one',\n // 'h2': 'header-twp',\n // 'h3': 'header-three',\n // 'h4': 'header-four',\n // 'h5': 'header-five',\n // 'h6': 'header-six',\n // }\n\n // useEffect(() => {\n // if (!currentPage?.getCurrentEditorState) return;\n\n // const contentState = currentPage.getCurrentEditorState.getCurrentContent();\n\n // const map = convertToRaw(contentState).blocks\n // setBlocksMap(map);\n\n // }, [currentPage?.getCurrentEditorState]);\n\n\n // const checkIfEditorContainsHeading = (text: string, type: string) => {\n // if (!blockskMap || !blockskMap.length) return false;\n\n // const included = blockskMap.find(block => block.type == mapHeadingsToDraftBlockTypes[type] && block.text == text);\n\n // return included;\n // }\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n currentPage.editContent(state, isNewDecorations);\n }, 2000);\n\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const insertText = async (textToAdd: any, headingType?: string, cleanText?: string) => {\n // NEW FLOW start\n const {contentBlocks, entityMap} = htmlToDraft(textToAdd);\n // const contentState = convertHtmlToEditorState(textToAdd);\n\n const selection = currentPage.currentEditorState.getSelection();\n\n const newSelection = new SelectionState({\n anchorKey: selection.getAnchorKey(),\n anchorOffset: selection.getEndOffset(),\n focusKey: selection.getAnchorKey(),\n focusOffset: selection.getEndOffset(),\n });\n\n\n const fragment = ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap();\n // const fragment = contentState.getCurrentContent().getBlockMap();\n\n const nonStyledState = Modifier.replaceWithFragment(\n currentPage.currentEditorState.getCurrentContent(),\n newSelection,\n fragment,\n );\n\n // WE are calculating nodes to toggle blue background on new Ai generated nodes\n let firstNewBlockId: number;\n const currentBlock = selection.getAnchorKey();\n const nextBlock = currentPage.currentEditorState.getCurrentContent().getBlockAfter(selection.getAnchorKey())?.getKey();\n\n const existingNodes = document.querySelectorAll('[data-block=\"true\"]');\n existingNodes?.forEach((elem, id) => {\n if (elem.getAttribute('data-offset-key') && elem.getAttribute('data-offset-key') == `${currentBlock}-0-0`) {\n firstNewBlockId = id + 1;\n }\n });\n\n\n const updatedState = EditorState.push(currentPage.currentEditorState, nonStyledState, 'insert-fragment');\n currentPage.setCurrentEditorState(updatedState);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('[data-block=\"true\"]');\n if (newTextElems.length) {\n for (let i = firstNewBlockId; i <= newTextElems.length; i++) {\n if (newTextElems[i]?.getAttribute('data-offset-key') && newTextElems[i]?.getAttribute('data-offset-key') != `${nextBlock}-0-0` && newTextElems[i]?.getAttribute('data-offset-key') != `${currentBlock}-0-0`) {\n newTextElems[i].classList.add('newTextBlock');\n } else {\n return;\n }\n }\n }\n }, 500);\n\n debouncedUpdate(updatedState, currentPage.analytics?.focusTerms, currentPage.focusTermsClassNames, false);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('.newTextBlock');\n if (newTextElems.length) {\n newTextElems.forEach(elem => {\n elem.classList.remove('newTextBlock');\n });\n }\n }, 3500);\n\n const curAddedHeadings = [...addedHeadings];\n const updatedAddedHeading = [];\n checkedIndexData?.map(item => {\n updatedAddedHeading?.push({type: item?.headingTag, text: item?.headingContent});\n });\n if (headingType && cleanText) {\n setAddedHeadings([\n ...curAddedHeadings,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n } else {\n setAddedHeadings([\n ...curAddedHeadings,\n ...updatedAddedHeading,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n }\n // NEW FLOW END\n };\n\n const addHeadingsHandler = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n insertText(`${updatedCopiedHeadings}`);\n setShowBulkAddContentBtn(true);\n setCheckedCount(0);\n setCheckedIndexData([]);\n };\n\n return \n Page structure\n \n \n {filters.map((filter, idx) => {\n if (activeCompetitor?.headingsHierarchy?.find(heading => heading.tag == filter.tag)) {\n return onCheckboxChecked(e.target.checked, filter.tag)}\n key={idx}>\n {filter.tag}\n ;\n }\n })}\n \n {showBulkAddContentBtn && setShowBulkAddContentBtn(false)}> Bulk Add to Content }\n \n {!showBulkAddContentBtn &&\n \n {\n addHeadingsHandler();\n }}> \n \n Copy to clipboard\n }> {\n handleCopyClick();\n }}> Copy \n {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}> Cancel \n \n }\n \n {activeCompetitor?.headingsHierarchy?.filter(heading => filters.filter(filter => filter.active)?.map(filter => filter.tag)?.includes(heading.tag))?.map((heading, idx) => {\n const isIncluded = [...addedHeadings].filter(item => item.text == heading.content && item.type == heading.tag)?.length > 0;\n return \n {!showBulkAddContentBtn && checkboxClickHandler(e, heading.content, heading.tag, idx)} />\n }\n \n {isIncluded ? \n {heading.content} \n \n \n {copiedHeading.tag == heading.tag && copiedHeading.text == heading.content ? <>\n }>\n {\n navigator.clipboard.writeText(`<${heading.tag}>${heading.content}`);\n setCopiedHeading({tag: heading.tag, text: heading.content});\n }}>\n \n \n insertText(`<${heading.tag}>${heading.content}`, heading.tag, heading.content)}>\n \n \n\n ;\n })}\n \n ;\n});\nconst calculateIndent = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '15px';\n case 'h2':\n return '25px';\n case 'h3':\n return '45px';\n case 'h4':\n return '55px';\n case 'h5':\n return '65px';\n case 'h6':\n return '75px';\n }\n};\nconst getTopMargin = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '20px';\n default:\n return '0px';\n }\n};\nconst calculateFontSize = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '21px';\n case 'h2':\n return '18px';\n case 'h3':\n return '16px';\n case 'h4':\n return '14px';\n case 'h5':\n return '14px';\n case 'h6':\n return '14px';\n }\n};\nconst generateColor = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '#233A61';\n case 'h2':\n return opaqueColor('#233A61', 85);\n case 'h3':\n return opaqueColor('#233A61', 70);\n case 'h4':\n return opaqueColor('#233A61', 55);\n case 'h5':\n return opaqueColor('#233A61', 47);\n case 'h6':\n return opaqueColor('#233A61', 40);\n }\n};\n\nconst Wrapper = styled.div`\n\n`;\n\nconst ActionsWrapper = styled.div`\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 10px;\n`;\n\nconst AddHeadings = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst CopyAction = styled.div`\n font-size: 12px;\n cursor: pointer;\n`;\n\nconst CancelAction = styled.div`\n cursor: pointer;\n color: #F44343;\n`;\n\nconst FiltersWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst BulkAddAction = styled.div`\n margin-top: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst FiltersContainer = styled.div`\n display: flex;\n background: #F9F9FB;\n border: 1px solid #E8E8E8;\n border-radius: 8px;\n padding: 12px 14px;\n margin-bottom: 20px;\n width: fit-content;\n`;\n\nconst FiltersTree = styled.div`\n display: flex;\n flex-direction: column;\n`;\nconst SingleHeading = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; itemId: number; isIncluded?: boolean}>`\n display: flex;\n margin-top: ${p => p.itemId == 0 ? '0px' : getTopMargin(p.type)};\n margin-bottom: 0px;\n border-radius: 8px;\n padding: 6px 10px;\n cursor: pointer;\n align-items: center;\n width: 100%;\n opacity: ${p => p.isIncluded ? .5 : 1};\n\n .copyClass {\n display: none;\n margin-left: auto;\n }\n .copyClass.disabled {\n pointer-events: none;\n color: gray;\n }\n\n &:hover {\n background-color: ${opaqueColor('#2D6CCA', 15)};\n\n .copyClass {\n display: block;\n }\n }\n`;\nconst HeadingTag = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n border-radius: 5px;\n margin-left: ${p => calculateIndent(p.type)};\n background-color: ${p => generateColor(p.type)};\n padding: 2px 7px; \n margin-right: 10px;\n color: #fff;\n height: fit-content;\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n position: relative;\n`;\nconst HeadingText = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n color: #121212;\n font-size: ${p => calculateFontSize(p.type)};\n ${p => (p.type == 'h1' || p.type == 'h2') && 'line-height: 24px'};\n`;\n\nconst Copy = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-right: 20px;\n margin-bottom: auto;\n min-width: 50px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\nconst InsertText = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-left: 20px;\n margin-bottom: auto;\n min-width: 105px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\n\nconst CheckboxStyled = styled(Checkbox)<{tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\ntext-transform: uppercase;\n .ant-checkbox-checked {\n .ant-checkbox-inner {\n background-color: ${p => generateColor(p.tag)} !important;\n border-color: ${p => generateColor(p.tag)} !important;\n }\n }\n`;\n","import {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {KeywordSelector} from './KeywordSelector';\nimport {HeadingsTree} from './HeadingsTree';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faBars, faBarsSort} from '@fortawesome/pro-solid-svg-icons';\nimport {Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {faArrowUpRightFromSquare, faListTree} from '@fortawesome/pro-regular-svg-icons';\nimport {generateHeadingOutline} from '@/utils/blockRenderComponents';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n setCompListCollapsed: (value: boolean) => void;\n compListCollapsed: boolean;\n htmlToDraft: any;\n activeKw: string;\n setActiveKw: (value) => void;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const CompetitorHeadingsDrawerContent = observer(({\n htmlToDraft,\n setCompListCollapsed,\n compListCollapsed,\n activeKw,\n setActiveKw,\n setCheckedIndexData,\n checkedIndexData,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedHeadingsWithTags,\n checkedHeadingsWithTags}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n\n const [competitors, setCompetitors] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors ?? []);\n const [activeCompetitor, setActiveCompetitor] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n\n\n useEffect(() => {\n if (currentPage?.topRankingCompetitorActiveKw && currentPage?.analytics?.competitorsData?.length && currentPage?.analytics?.competitorsData.find(item => item.keyword == currentPage?.topRankingCompetitorActiveKw)) {\n !activeKw && setActiveKw(currentPage?.topRankingCompetitorActiveKw);\n } else if (currentPage?.analytics?.competitorsData && currentPage?.analytics?.competitorsData[0]) {\n !activeKw && setActiveKw(currentPage?.analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n }, [...(currentPage?.analytics?.competitorsData ?? ''), currentPage?.analytics?.competitorsData?.length]);\n\n useEffect(() => {\n if (toJS(currentPage).analytics?.competitorsData) {\n const contentState = currentPage.currentEditorState.getCurrentContent();\n const outline = generateHeadingOutline(contentState);\n const currentArticleOutline = [{\n title: 'Current Article Outline',\n headingsHierarchy: outline,\n isCurrentArticleOutline: true,\n }];\n\n const updatedCompetitors = toJS(currentPage).analytics.competitorsData?.map(value => {\n return {\n ...value,\n competitors: [...currentArticleOutline, ...value.competitors],\n };\n });\n setCompetitors(updatedCompetitors?.find(item => item.keyword == activeKw)?.competitors ?? []);\n if (!activeCompetitor) {\n setActiveCompetitor(toJS(currentPage.analytics?.competitorsData)?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n }\n }\n }, [currentPage.analytics?.competitorsData, activeKw, currentPage.currentEditorState]);\n\n const competitorsChangeHandler = (competitorsList: any[]) => {\n setCompetitors(competitorsList);\n\n setActiveCompetitor(competitorsList[0]);\n };\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n \n \n setCompListCollapsed(!compListCollapsed)} fontSize={20} style={{marginTop: 20, marginRight: 10, cursor: 'pointer'}}/>\n \n \n \n {competitors?.length? competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)?.map((competitor, idx) => {\n return <>\n {competitor?.isCurrentArticleOutline ?\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n :\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n {competitors?.filter(value => value?.headingsHierarchy && value?.headingsHierarchy?.length && value?.isCurrentArticleOutline)?.length ? idx : idx + 1} \n \n \n {competitor.title} \n \n {competitor.url}\n \n : null}>\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor?.url}`} style={{width: 20, height: 20}}/>\n \n \n {!compListCollapsed && \n {competitor.title} \n \n {competitor.url}\n window.open(competitor?.url, '_blank')}/>\n \n }\n \n \n };\n }) : Add atleast one target keyword to view the Heading outlines \n }\n\n \n \n \n \n\n\n ;\n});\n\nconst Wrapper = styled.div`\n padding: 10px 30px 30px;\n display: flex;\n cursor: default;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n align-items: center;\n`;\n\nconst Left = styled.div<{isCollapsed: boolean}>`\n width: ${p => p.isCollapsed ? '105px' : 'auto'};\n background: transparent;\n padding-right: 30px;\n`;\nconst Right = styled.div`\n background-color: #fff;\n width: 100%;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px rgba(0, 0, 0, 0.06);\n border-radius: 14px;\n padding: 20px 30px;\n`;\nconst CompetitorsList = styled.div`\n\n`;\nconst SingleCompetitor = styled.div<{isActive?: boolean}>`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 7px;\n padding: 9px;\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n border-radius: 8px;\n transition: background .3s ease;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n ${p => p.isActive && 'color: #fff;'}\n }\n\n :hover {\n background-color: #233A61;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n color: #fff;\n }\n }\n`;\nconst Order = styled.div`\n color: #121212;\n width: 25px;\n`;\nconst NameLogoUrl = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Logo = styled.div`\n margin-right: 10px;\n`;\nconst NameAndUrl = styled.div`\n text-align: left;\n max-width: 200px;\n`;\nconst Name = styled.div`\n color: #121212;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\nconst Url = styled.a`\n color: #2D6CCA;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n display: flex;\n font-size: 12px;\n align-items: center;\n`;\n\nconst Headingoutlines = styled.p`\n color: red;\n margin-left: 30px;\n margin-top: -9px;\n`;\n\nconst CurrentArticleOutline = styled.div<{isActive?: boolean}>`\n display: flex;\n align-items: center;\n gap: 12px;\n padding-left: 32px;\n margin-bottom: 10px;\n cursor: pointer;\n border-radius: 8px;\n ${p => p.isActive && 'color: #fff;'}\n svg {\n width: 16px;\n height: 13px;\n }\n .text {\n font-family: Inter;\n font-size: 14px;\n font-weight: 400;\n line-height: 16.94px;\n text-align: left;\n color: rgba(18, 18, 18, 1);\n ${p => p.isActive && 'color: #fff;'}\n text-decoration: underline;\n padding: 7px;\n }\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n :hover {\n background-color: #233A61;\n color: #fff;\n\n .text {\n color: #fff;\n }\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {CompetitorHeadingsDrawerContent} from './DrawerContent';\nimport {useState} from 'react';\n\ninterface Props {\n htmlToDraft: any;\n}\n\nexport const CompetitorsHeadingsDrawer = observer(({htmlToDraft}: Props) => {\n const {contentOptimizer: {currentPage: {analytics, topRankingCompetitorActiveKw, isCompetitorsHeadingsDrawerOpen, closeCompetitorsHeadingsDrawer, setCopiedHeadings}}} = useStore('');\n\n const [compListCollapsed, setCompListCollapsed] = useState(false);\n const [activeKw, setActiveKw] = useState('');\n const [showBulkAddContentBtn, setShowBulkAddContentBtn] = useState(true);\n const [checkedCount, setCheckedCount] = useState(0);\n const [checkedHeadingsWithTags, setCheckedHeadingsWithTags] = useState('');\n const [checkedIndexData, setCheckedIndexData] = useState([]);\n\n return (\n {\n closeCompetitorsHeadingsDrawer();\n if (topRankingCompetitorActiveKw && analytics?.competitorsData?.length && analytics?.competitorsData.find(item => item.keyword == topRankingCompetitorActiveKw)) {\n setActiveKw(topRankingCompetitorActiveKw);\n } else if (analytics?.competitorsData && analytics?.competitorsData[0]) {\n setActiveKw(analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}\n closeIcon={ {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }} style={{display: isCompetitorsHeadingsDrawerOpen ? 'block' : 'none'}}/>}\n className={styles.competitorsHeadingsDrawerStyle}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n >\n Headings Outline\n \n \n );\n});\n","import {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Spin} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {Analytics} from './Analytics';\nimport {CompetingFocusTermsDrawer} from './SideDrawers/CompetingFocusTermsDrawer';\nimport {ContentIdeasDrawer} from './SideDrawers/ContentIdeasDrawer';\nimport {ContentResearchDrawer} from './SideDrawers/ContentResearchDrawer/ContentResearchDrawer';\nimport {KeywordsDrawer} from './SideDrawers/KeywordsDrawer';\nimport {Technicals} from './Technicals';\nimport {CompetitorsHeadingsDrawer} from './SideDrawers/CompetitorsHeadingsDrawer';\n\nexport const SidebarContent = observer(() => {\n const [showTechnicals, setShowTechincals] = useState(false);\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const antIconSecond = setShowTechincals(!showTechnicals)}/> : setShowTechincals(!showTechnicals)}/>;\n const currentView = <>\n \n setShowTechincals(!showTechnicals)}/>\n \n \n setShowTechincals(!showTechnicals)}/>\n \n ;\n\n return \n \n \n {currentPage.isInitialPageLoad && \n }\n \n {currentView}\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n position: relative;\n`;\n\nconst TechnicalsContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute; \n width: 100%;\n left: ${p => p.showTechnicals ? 0 : '400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => p.showTechnicals ? 0 : '350px !important'};\n }\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst ContentContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute;\n width: 100%;\n left: ${p => !p.showTechnicals ? 0 : '-400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => !p.showTechnicals ? 0 : '-350px !important'};\n }\n\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst LoadingBannerContainer = styled.div`\n background-color: transparent;\n height: 25px;\n width: 100%;\n`;\nconst LongLoadingBanner = styled.div`\nbackground: rgba(84, 41, 125, 0.5);\nborder-radius: 5px;\nfont-size: 12;\nheight: 25px;\npadding-top: 2px;\nwidth: 100%;\n`;\n","import React, {useEffect, useState, useRef} from 'react';\nimport styles from './index.module.scss';\nimport {Loader} from './Utils/loader';\nimport {Error as ErrorView} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/RightSidebar/v2-sidebar/Utils/error';\nimport {Resizable} from 're-resizable';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\nimport {SidebarContent} from './SidebarContent';\n\ninterface Props {\n style?: string;\n onResizeCallback?: (width: number) => void;\n isHidden?: boolean;\n store?: CurrentPageStore;\n}\n\nexport const RightSidebarV2: React.FC = observer(({onResizeCallback, isHidden = false, store}) => {\n const {contentOptimizer: {currentPage: {isPublic, isEditorScrolled}}} = useStore('');\n const [topPosition, setTopPosition] = useState((window?.innerHeight && window?.innerHeight) > 800 ? 78 : 50);\n\n const sideBarRef = useRef(null);\n\n // This changes the width of the editor according to the with of the right sidebar\n useEffect(() => {\n const sidebarUpdate = () => {\n if (sideBarRef?.current?.clientWidth > 350 && window.innerWidth <= 1400) {\n onResizeCallback(350);\n } else if (sideBarRef?.current?.clientWidth <= 350 && window.innerWidth > 1400) {\n onResizeCallback(400);\n }\n };\n window.addEventListener('resize', sidebarUpdate);\n\n return () => {\n window.removeEventListener('resize', sidebarUpdate);\n };\n }, []);\n\n useEffect(() => {\n if (sideBarRef?.current?.clientWidth) {\n onResizeCallback(sideBarRef?.current?.clientWidth);\n }\n }, [sideBarRef?.current]);\n\n const handleScroll = () => {\n const position = window.pageYOffset;\n if (position > 0) {\n if (position <= 70) {\n setTopPosition(topPosition - position);\n } else {\n setTopPosition(0);\n }\n } else {\n setTopPosition(topPosition);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, {passive: true});\n }, []);\n\n\n return (\n \n {\n onResizeCallback(elRef.offsetWidth);\n }}\n enable={{\n top: false,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n className={styles.resize}>\n {store?.content?.isAnalyzing && !store?.content?.analyzingError && ( \n );\n});\n","import {useEffect} from 'react';\nimport {WarningOutlined} from '@ant-design/icons';\nimport {useRouter} from 'next/router';\nimport {RootStoreType, useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styles from './styles.module.scss';\n// import {Drawer} from 'antd';\nimport {EditorState, SelectionState} from 'draft-js';\nimport {mapFocusTerms, multiWordCountRegex, prepareFinalTerms} from './LeftSide/EditorSection/content-editor/utils';\nimport {decoratedState} from './LeftSide/EditorSection/content-editor/decorators';\nimport firebase from 'firebase/app';\nimport 'firebase/database';\n// import {ContentGenerator} from './ContentGenerator/ContentGenerator';\nimport {LeftSide} from './LeftSide/LeftSide';\n// import {AiOutlineDrawer} from './AiOutlineDrawer';\n// import {CaAiQuotaInfo} from '@/components/common-components/v2/CaAiQuotaInfo';\n// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {RightSidebarV2} from './RightSidebar/v2-sidebar';\nimport {MainLoader} from '@/components/common-components/v2/MainLoader';\nimport {FREDDY_EVENT_SCA_ARTICLE_CREATED, triggerFreddySurvey} from '@/utils/scripts';\nimport {headerStore} from '@/store/storeCompTest';\nexport const PageEditor = observer(\n ({rootStore, isPublic}: { rootStore: RootStoreType; isPublic: boolean }) => {\n const {contentOptimizer, settings} = rootStore;\n const {currentPage, pages, aiOutline: {\n loadAiWriterHistory,\n refetchOneClickDraftResultForArticleCreation,\n }} = contentOptimizer;\n const {\n isUploading,\n isExportingPage,\n isExportingPageLoader,\n setIsPublic,\n // isOpenContentGeneratorDrawer,\n focusTermsClassNames,\n setFocusTermsClassNames,\n // setIsOpenContentGeneratorDrawer,\n setSideBarWidth,\n setViewers,\n viewers,\n isSideBarHidden,\n isInitialEditorStateFetched,\n content,\n editTitle,\n highlights,\n } = currentPage;\n const {aiInProgress} = content;\n const {\n customer: {\n profile: {\n id,\n emailAddress,\n },\n getCustomerQuota,\n },\n } = settings;\n const resultId = contentOptimizer.aiOutline.id;\n\n const {contentOptimizer: {\n currentPage: {\n feTargetKeywords,\n isLinkActive,\n },\n aiMetaData: {\n loadAiMetaData,\n metaData,\n },\n }} = useStore('');\n\n useEffect(() => {\n if (pages?.count === 2) {\n triggerFreddySurvey(id, emailAddress, FREDDY_EVENT_SCA_ARTICLE_CREATED);\n }\n }, [pages?.count]);\n\n // const {setShowOutlinesInDrawer, v2AiOutline, showOutlinesInDrawer} = aiOutline;\n // const [allRef, setAllRef] = useState();\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n query: {uuid, newPage},\n } = useRouter();\n const {t} = useTranslation('common');\n\n\n // const setAllRefToState = element => {\n // setAllRef(element);\n // };\n\n /*\n * CONTENT EDITOR METHODS START\n */\n\n\n // We are settings initial focus terms map so we can use it for initial decoration and highlighting\n\n function moveSelectionToStart(editorState) {\n const content = editorState.getCurrentContent();\n const firstBlock = content.getFirstBlock();\n const firstKey = firstBlock.getKey();\n\n return EditorState.acceptSelection(\n editorState,\n new SelectionState({\n anchorKey: firstKey,\n anchorOffset: 0,\n focusKey: firstKey,\n focusOffset: 0,\n hasFocus: true,\n isBackward: false,\n }),\n );\n }\n\n // This method will put cursor to start of the content\n function moveFocusToStart(editorState) {\n const afterSelectionMove = moveSelectionToStart(editorState);\n return EditorState.forceSelection(\n afterSelectionMove,\n afterSelectionMove.getSelection(),\n );\n }\n\n\n // This method will do the focus terms re-mapping after we update the page content\n const updateFocusTermsState = () => {\n const sortedFocusTerms = currentPage.analytics?.focusTerms?.slice()\n .slice()\n .sort((a, b) => b.name.length - a.name.length);\n\n const internalLinksClusters = currentPage.content?.internalLinkSuggestions?.slice()?.map(item => {\n return {\n name: item.keyword,\n status: 'internal-link-suggestion',\n variations: [],\n };\n });\n\n const finalData = [];\n if (sortedFocusTerms?.length) finalData.push(...sortedFocusTerms);\n if (internalLinksClusters?.length) finalData.push(...internalLinksClusters);\n\n if (sortedFocusTerms) {\n const parts = prepareFinalTerms(sortedFocusTerms);\n const regex = multiWordCountRegex(parts, false);\n\n if (regex == null) {\n return;\n }\n\n setFocusTermsClassNames(mapFocusTerms(finalData));\n }\n };\n\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data + 1)\n .then(() => {\n dbRef.on('value', snapshot => {\n if (snapshot.exists()) {\n const data = snapshot.val();\n setViewers(data);\n }\n });\n });\n }).catch(error => {\n console.error(error);\n });\n }\n\n return () => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().cancel();\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data - 1);\n });\n }\n };\n }, []);\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().set(viewers - 1);\n }\n }, [viewers]);\n\n // useEffect(() => {\n // const newState = currentPage?.content?.formattedEditorState();\n // currentPage.setCurrentEditorState(newState);\n // setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n // }, []);\n\n\n // This useEffect is ment to fire only once initially, after we have contentLoadedAt and uuid set\n // It will do initial content populating + highlighting\n useEffect(() => {\n // this prop is used to allow/dissallow all repolls related to editing a page to happen\n currentPage.setRepollsAllowed(true);\n // we are checking current page uuid from url\n // if the response came in and populated the store they will match and only then we update the state\n // we repeat this both here and in content editor compoenent\n\n if (uuid === currentPage.content.uuid && isInitialEditorStateFetched) {\n const newState = currentPage.content?.formattedEditorState();\n const focusedState = moveFocusToStart(newState);\n currentPage.setCurrentEditorState(focusedState);\n\n // This prop is set to false only after initial editor state has been set because\n // we want to prevent the DraftJs from triggering the onChange event on page mount\n currentPage.setIsInitialEditorStateFetched(true);\n\n // This will re-map focus terms and update the state and will trigger the next useEffect\n // which will use that map to re-decorate the content\n updateFocusTermsState();\n } else {\n const newState = currentPage?.content?.formattedEditorState();\n currentPage.setCurrentEditorState(newState);\n setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentPage.contentLoadedAt, currentPage?.content?.uuid, isInitialEditorStateFetched]);\n\n useEffect(() => {\n currentPage.setRepollsAllowed(true);\n currentPage.setCurrentEditorState(decoratedState(currentPage.currentEditorState, focusTermsClassNames));\n }, [focusTermsClassNames, highlights]);\n\n\n // This is to set initial mapping of the focus terms, which is used for decorating\n useEffect(() => {\n updateFocusTermsState();\n }, [JSON.stringify(currentPage.analytics?.focusTerms?.slice()), JSON.stringify(currentPage.content?.internalLinkSuggestions?.slice())]);\n\n const loadProject = async () => {\n await pages.getAllProjects();\n };\n\n useEffect(() => {\n if (!isPublic) loadProject();\n if (isPublic) {\n setIsPublic(true);\n } else {\n setIsPublic(false);\n }\n }, []);\n\n useEffect(() => {\n if (uuid && !isPublic) {\n loadAiWriterHistory(uuid as string);\n }\n }, []);\n\n useEffect(() => {\n if (resultId) {\n setRefechForBulkArticleCreation();\n }\n }, [resultId, aiInProgress]);\n\n const setRefechForBulkArticleCreation = async () => {\n if (content.aiInProgress && resultId) {\n try {\n const now = new Date().getTime();\n await refetchOneClickDraftResultForArticleCreation(uuid, now);\n } catch (e) {\n Promise.reject(e);\n } finally {\n getCustomerQuota();\n }\n }\n };\n\n useEffect(() => {\n async function load() {\n if (uuid) {\n if (!isPublic) {\n pages.loadPages(false, pages.activeProjectId);\n }\n // this is to check if we are on initial page create screen or are we editing page\n if (!newPage) {\n await currentPage.loadPage(uuid as string);\n const targetKwArr = feTargetKeywords.map(kw => kw.keyword);\n if (content.title?.startsWith('New Document') && targetKwArr?.length) {\n const data = await loadAiMetaData(content.title, targetKwArr);\n if (data) {\n editTitle(data[0]?.metaTitle);\n }\n }\n } else {\n currentPage.initialLoadPage(uuid as string);\n }\n }\n }\n load();\n }, [uuid, currentPage.currentStep, metaData]);\n\n useEffect(() => {\n if (newPage) {\n currentPage.setNewPage(true);\n currentPage.setCurrentStep(1);\n } else {\n currentPage.setNewPage(false);\n }\n }, [newPage]);\n\n useEffect(()=> {\n headerStore.setComponent(null, false, [\n {name: '', spend: 0, total: 0, color: 'green', quotaProps: null},\n ]);\n }, []);\n\n const callBack = (width: number) => {\n if (width <= 400 && width > 0) {\n setSideBarWidth(`${width}px`);\n }\n };\n\n\n return currentPage.loading ? (\n \n {!currentPage.isLinkActive && ((currentPage.newPage && currentPage.currentStep === 1) || <>\n \n {t('error-has-ocurred')}
\n \n )}\n \n \n );\n },\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"notification\":\"styles_notification__OR6ac\",\"contactLink\":\"styles_contactLink__dGgfv\",\"success\":\"styles_success__g7z1D\",\"info\":\"styles_info__efwL4\",\"warning\":\"styles_warning__TRTcI\",\"error\":\"styles_error__PUH5a\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"customInput\":\"style_customInput__xWOlg\",\"customSelect\":\"style_customSelect__5SwsV\",\"individualCustomSelect\":\"style_individualCustomSelect__WX92V\",\"customGeneralSelect\":\"style_customGeneralSelect__OeVke\",\"user\":\"style_user__wmBrz\",\"avatar\":\"style_avatar__mO1Yn\",\"info\":\"style_info__bJG8w\",\"email\":\"style_email__7HMCL\",\"permission\":\"style_permission__eKrIo\",\"shareModal\":\"style_shareModal__tgI8u\",\"icon\":\"style_icon__7Sv9l\",\"back\":\"style_back__XA9rM\",\"header\":\"style_header__P07YH\",\"users\":\"style_users__Xet9k\",\"input\":\"style_input__CbDPX\",\"permissions\":\"style_permissions__1_Cd5\",\"notification\":\"style_notification__69SZ_\",\"checkbox\":\"style_checkbox__HLruZ\",\"inputContainer\":\"style_inputContainer__5l1dT\",\"textarea\":\"style_textarea__lBED_\",\"dropdown\":\"style_dropdown__BLJU4\",\"hideDropdown\":\"style_hideDropdown__EAZwo\",\"cancelModalButton\":\"style_cancelModalButton__0Jn_a\",\"shareModalFooter\":\"style_shareModalFooter__c_I4D\",\"suggestion\":\"style_suggestion__sQOqS\",\"name\":\"style_name__YXf18\",\"subTitle\":\"style_subTitle__hpMvF\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__bvdyc\",\"popoverDivider\":\"style_popoverDivider__7kxDv\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__f7Uga\",\"contentIdeasTitle\":\"style_contentIdeasTitle__NFfEv\",\"descriptionText\":\"style_descriptionText__lFbSB\",\"input\":\"style_input__NVKIY\",\"inputLabel\":\"style_inputLabel__di3As\",\"countrySelector\":\"style_countrySelector__RsNJa\",\"selectInput\":\"style_selectInput__bfqDn\",\"generateIdeasButton\":\"style_generateIdeasButton__wefT5\",\"generatedItemsNumb\":\"style_generatedItemsNumb__oULgy\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__Um6PF\",\"ContentIdea\":\"style_ContentIdea___8T06\",\"controlButtons\":\"style_controlButtons__3DdPK\",\"downloadButton\":\"style_downloadButton__b7Dxj\",\"copyButton\":\"style_copyButton__DS99q\",\"refreshAiOutlineBtn\":\"style_refreshAiOutlineBtn__NfuS_\",\"unsplashContainer\":\"style_unsplashContainer__tKyCE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toolbar\":\"style_toolbar__Vwy8G\",\"leftSection\":\"style_leftSection__N1651\",\"rightSection\":\"style_rightSection__E_CRH\",\"share\":\"style_share__NTvX5\",\"robotIcon\":\"style_robotIcon__d_APK\",\"contentIdeasBtnLabel\":\"style_contentIdeasBtnLabel__4qIOI\",\"shareBtnLabel\":\"style_shareBtnLabel__o5HXJ\",\"undoBtn\":\"style_undoBtn__gR9Ad\",\"redoBtn\":\"style_redoBtn__oFeoL\",\"editor\":\"style_editor__Zg73v\",\"zoom05\":\"style_zoom05__1Dz2Y\",\"zoom075\":\"style_zoom075__JA_q0\",\"zoom09\":\"style_zoom09__pWjeK\",\"zoom1\":\"style_zoom1__2IWB9\",\"zoom12\":\"style_zoom12__O5tgJ\",\"zoom15\":\"style_zoom15__3U5We\",\"zoom2\":\"style_zoom2__RtpNm\",\"expandedEditor\":\"style_expandedEditor__6u5oc\",\"divider\":\"style_divider__Y6Ylq\",\"button\":\"style_button__UOe75\",\"expandBtn\":\"style_expandBtn__eggx8\",\"copyTooltip\":\"style_copyTooltip__S3tye\",\"writeForMeContainer\":\"style_writeForMeContainer__5aagG\",\"writeForMeFeatherIcon\":\"style_writeForMeFeatherIcon__yxu8G\",\"editorTopInfo\":\"style_editorTopInfo__xoncP\",\"leftEditorTopInfo\":\"style_leftEditorTopInfo__L9LlC\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__VSP5g\",\"button\":\"style_button__QUeN9\",\"active\":\"style_active__Fv0RE\",\"urlPopup\":\"style_urlPopup__D9ZJn\",\"inputContainer\":\"style_inputContainer__bm_d7\",\"textLabel\":\"style_textLabel__IaVSL\",\"urlInput\":\"style_urlInput__hn8MM\",\"inputControlls\":\"style_inputControlls__aQiLB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__62ic4\",\"button\":\"style_button__jl08j\",\"active\":\"style_active__7OpW7\",\"urlPopup\":\"style_urlPopup__QdWSN\",\"inputContainer\":\"style_inputContainer__cNQp7\",\"textLabel\":\"style_textLabel__XLCPG\",\"urlInput\":\"style_urlInput__g2XBm\",\"inputControlls\":\"style_inputControlls___Lrie\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__q5NYO\",\"button\":\"style_button__rOfd5\",\"active\":\"style_active__8ok_g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__JEFtz\",\"button\":\"style_button__tWAPP\",\"active\":\"style_active__1Ub_o\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__vN_zL\",\"header-modal\":\"style_header-modal__zaVfr\",\"header-modal__option\":\"style_header-modal__option__uBrLT\",\"header-modal__selected\":\"style_header-modal__selected__HRX68\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__Y7Msi\",\"button\":\"style_button__qE27E\",\"active\":\"style_active__vcuPU\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7_9Fm\",\"button\":\"style_button__I4eBO\",\"active\":\"style_active__vWrUg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__F4Eq3\",\"button\":\"style_button__zXaNR\",\"active\":\"style_active__QB8X9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7hrU8\",\"button\":\"style_button__lBpTe\",\"active\":\"style_active__Vy5N_\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__ngc_6\",\"button\":\"style_button__bwqJh\",\"active\":\"style_active__pcv99\",\"urlPopup\":\"style_urlPopup__MeYFu\",\"inputContainer\":\"style_inputContainer__Yr1Ib\",\"textLabel\":\"style_textLabel__paAwp\",\"urlInput\":\"style_urlInput__u0l_s\",\"inputControlls\":\"style_inputControlls__GUFA1\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"step-one_button__LmGnF\",\"purple\":\"step-one_purple__Dr_VM\",\"teal\":\"step-one_teal__pq6oT\",\"welcome\":\"step-one_welcome__uDuo3\",\"welcomeHeader\":\"step-one_welcomeHeader__qKSL7\",\"welcomeSubHeader\":\"step-one_welcomeSubHeader__yAtvD\",\"welcomeCards\":\"step-one_welcomeCards__lU5iT\",\"welcomeCard\":\"step-one_welcomeCard__K1Ils\",\"welcomeCardHeader\":\"step-one_welcomeCardHeader__YmBsP\",\"welcomeCardSubHeader\":\"step-one_welcomeCardSubHeader__v1GbY\",\"divider\":\"step-one_divider___K9R9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"uploadForm\":\"styles_uploadForm__RQvO_\",\"urlinput\":\"styles_urlinput__NNaUR\",\"uploadBtn\":\"styles_uploadBtn__zNHxo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"keywordContainer\":\"style_keywordContainer__vPXS3\",\"keywordEditIcons\":\"style_keywordEditIcons__3jaVk\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__S1Uen\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__zFqeU\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__5qWYw\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Fg9Sz\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__UBnRt\",\"keywordLocationIcon\":\"style_keywordLocationIcon__uVBJh\",\"showIcons\":\"style_showIcons__gIQdT\",\"keywordDetailsButtonContainer\":\"style_keywordDetailsButtonContainer__nKs7u\",\"keywordDetailsIcon\":\"style_keywordDetailsIcon__6AAJ0\",\"editKwButtonContainer\":\"style_editKwButtonContainer__437ne\",\"editKwButtonIcon\":\"style_editKwButtonIcon__7aEsS\",\"keywordName\":\"style_keywordName__KZoSi\",\"targetKwContainer\":\"style_targetKwContainer__W_edh\",\"keywordMetric\":\"style_keywordMetric__BgvpY\",\"keywordMetricContainer\":\"style_keywordMetricContainer__1Xtmz\",\"expandingContainer\":\"style_expandingContainer__Ty15F\",\"expandBtn\":\"style_expandBtn__bfM2c\",\"keywordsAndSuggestionsContainer\":\"style_keywordsAndSuggestionsContainer__WHZZr\",\"collapsed\":\"style_collapsed___mhNq\",\"targetKeywordsSectionContainer\":\"style_targetKeywordsSectionContainer__MA1nu\",\"expanded\":\"style_expanded__jeR4g\",\"targetKeywordsContainer\":\"style_targetKeywordsContainer__RASzp\",\"locationToggler\":\"style_locationToggler__pes3z\",\"targetKeywordsTitle\":\"style_targetKeywordsTitle__Xiu43\",\"selectRelatedKeywords\":\"style_selectRelatedKeywords__UsR3o\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__iu89Z\",\"suggestedKwSectionTitle\":\"style_suggestedKwSectionTitle__UtMLo\",\"targetKwLoadingMsg\":\"style_targetKwLoadingMsg__vEgdP\",\"kwSuggestionsContainer\":\"style_kwSuggestionsContainer__2wt_G\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__ACSfR\",\"singleSugestedKwInnerContainer\":\"style_singleSugestedKwInnerContainer__b0ror\",\"svAndCpc\":\"style_svAndCpc__c_8wW\",\"controllsBar\":\"style_controllsBar__ALl9x\",\"clickToAdd\":\"style_clickToAdd__xtgcn\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__80skR\",\"suggestedKwTitle\":\"style_suggestedKwTitle__9QaV3\",\"closeSuggestedKW\":\"style_closeSuggestedKW__330Se\",\"secondary-text\":\"style_secondary-text__emnsR\",\"keywords\":\"style_keywords__wjpPt\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__Lm1gP\",\"cpcMetricsProgressBar\":\"style_cpcMetricsProgressBar__LTmQK\",\"focusTermPopover\":\"style_focusTermPopover__pkvY4\",\"popoverTitle\":\"style_popoverTitle__pH9eH\",\"popoverCountrySv\":\"style_popoverCountrySv__3zElP\",\"sv\":\"style_sv__qOMD7\",\"emoji\":\"style_emoji__xv7Ls\",\"popOverTitle\":\"style_popOverTitle__v_wFU\",\"competitors\":\"style_competitors__YGYr0\",\"competitor\":\"style_competitor__GWmTF\",\"popoverDivider\":\"style_popoverDivider__XCRSU\",\"headingsPopover\":\"style_headingsPopover__jTD85\",\"headingTooltipValue\":\"style_headingTooltipValue__dRrjD\",\"countrySelectorPopover\":\"style_countrySelectorPopover__RhvA2\",\"divider\":\"style_divider__0ifEI\",\"columnTitlesRow\":\"style_columnTitlesRow__oKXV2\",\"columnTitle\":\"style_columnTitle__fLfkI\",\"defaultLocationName\":\"style_defaultLocationName__K60S8\",\"locationInfo\":\"style_locationInfo__DGWFc\",\"setAsDefaultText\":\"style_setAsDefaultText__q4qk_\",\"countryReach\":\"style_countryReach__5HPf_\",\"singleCountryRow\":\"style_singleCountryRow__6YTEm\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__lSqDc\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__OhW7Z\",\"newKwFormContainer\":\"style_newKwFormContainer__ysNll\",\"addNewKwBtn\":\"style_addNewKwBtn__aHUY2\",\"addKeywordStyle\":\"style_addKeywordStyle___NjDc\",\"plusIconStyle\":\"style_plusIconStyle__dmf5B\",\"disabledBtn\":\"style_disabledBtn__z9Cbs\",\"addNewKwForm\":\"style_addNewKwForm__5iXKx\",\"newKwInputControllsContainer\":\"style_newKwInputControllsContainer__Hc69J\",\"newKwInputContainer\":\"style_newKwInputContainer__bkNBM\",\"customInputField\":\"style_customInputField__g9Ppg\",\"addNewKwBtnLabel\":\"style_addNewKwBtnLabel__SWOIT\",\"quota\":\"style_quota__MfYRt\",\"quotaValues\":\"style_quotaValues__6t772\",\"plusIcon\":\"style_plusIcon__lL8Wh\",\"newEmphasizedFormStyle\":\"style_newEmphasizedFormStyle__xmFMZ\",\"pulse-purple\":\"style_pulse-purple__P7U1V\",\"newFormStyle\":\"style_newFormStyle__lqdiW\",\"editKwForm\":\"style_editKwForm__Q_jdR\",\"editKwInputContainer\":\"style_editKwInputContainer__WBOeM\",\"editKwControllsContainer\":\"style_editKwControllsContainer__D2l73\",\"populateButton\":\"style_populateButton__aGc27\",\"confirmButton\":\"style_confirmButton__DZXoJ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentOptimizerContainer\":\"bread-crumb_contentOptimizerContainer__rqiMo\",\"divider\":\"bread-crumb_divider__VKsLJ\",\"scrolledEditor\":\"bread-crumb_scrolledEditor__4iLHS\",\"contentOptimizerHeader\":\"bread-crumb_contentOptimizerHeader__mSsmj\",\"title\":\"bread-crumb_title__8VW90\",\"back\":\"bread-crumb_back__VYwHf\",\"share\":\"bread-crumb_share__7_i4v\",\"backWrapper\":\"bread-crumb_backWrapper__XPOW2\",\"headerExtra\":\"bread-crumb_headerExtra__lVFkV\",\"kebab\":\"bread-crumb_kebab__NIs_t\",\"kebabMenu\":\"bread-crumb_kebabMenu__oJYmb\",\"kebabMenuItem\":\"bread-crumb_kebabMenuItem__YYQHl\",\"redText\":\"bread-crumb_redText__WFg6A\",\"exportBtn\":\"bread-crumb_exportBtn__qzHGF\",\"modal\":\"bread-crumb_modal__QLBQN\",\"modalTitle\":\"bread-crumb_modalTitle__0lf8D\",\"websiteLabel\":\"bread-crumb_websiteLabel__uP_MN\",\"editContainer\":\"bread-crumb_editContainer__ok1vS\",\"btn\":\"bread-crumb_btn__lZxTx\",\"exportToPdfButton\":\"bread-crumb_exportToPdfButton__HCYl1\",\"exportToDocsButton\":\"bread-crumb_exportToDocsButton__dtrrC\",\"exportDropdown\":\"bread-crumb_exportDropdown__7llmi\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerKeywords\":\"styles_headerKeywords__xxGL0\",\"popoverDivider\":\"styles_popoverDivider__zaO9y\",\"draftToolkit\":\"styles_draftToolkit__n9jPZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"content-editor_container__QYw4p\",\"left-side\":\"content-editor_left-side__l1TXd\",\"pageEditorError\":\"content-editor_pageEditorError__H_8Vw\",\"headerKeywords\":\"content-editor_headerKeywords__Nu5m7\",\"popoverDivider\":\"content-editor_popoverDivider__m2Vuv\",\"draftToolkit\":\"content-editor_draftToolkit__jDD0p\",\"loaderSpinnerContainer\":\"content-editor_loaderSpinnerContainer__3w2sl\",\"loaderSpinner\":\"content-editor_loaderSpinner__IxzP_\",\"spin\":\"content-editor_spin__6tOJb\",\"selectionTooltip\":\"content-editor_selectionTooltip__Qo0Ri\",\"arrowBottom\":\"content-editor_arrowBottom__3KZVT\",\"textInputNotification\":\"content-editor_textInputNotification__lnemm\",\"contentGeneratorDrawer\":\"content-editor_contentGeneratorDrawer__XXSAo\",\"closeIcons\":\"content-editor_closeIcons__5_3Bw\",\"outlineDrawerBackArrow\":\"content-editor_outlineDrawerBackArrow__GwHmD\",\"contentGeneratorTitle\":\"content-editor_contentGeneratorTitle__Agz_h\",\"selectedTextInfoContainer\":\"content-editor_selectedTextInfoContainer__WRKBY\",\"dataAndIcon\":\"content-editor_dataAndIcon__6OcYR\",\"textAndUrl\":\"content-editor_textAndUrl__XUxuw\",\"text\":\"content-editor_text__21AKd\",\"url\":\"content-editor_url__v_O1a\",\"textUrlControlls\":\"content-editor_textUrlControlls__thYuv\",\"urlPopup\":\"content-editor_urlPopup__gHOHE\",\"inputContainer\":\"content-editor_inputContainer__Mb2tQ\",\"textLabel\":\"content-editor_textLabel__mnezc\",\"urlInput\":\"content-editor_urlInput__2P2Tu\",\"inputControlls\":\"content-editor_inputControlls__qFkMX\",\"linkSuggestionsPopover\":\"content-editor_linkSuggestionsPopover__FFCdv\",\"extensionButton\":\"content-editor_extensionButton__bBbw0\",\"iconButton\":\"content-editor_iconButton__Cfbam\",\"ctaTitle\":\"content-editor_ctaTitle__ssOd0\",\"extensionButtonStyle\":\"content-editor_extensionButtonStyle__PN0ie\",\"closeIcon\":\"content-editor_closeIcon__UKkJM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"modal\":\"style_modal__rZesC\",\"tableOuterClusters\":\"style_tableOuterClusters__qcXJL\",\"roundEdgesTable\":\"style_roundEdgesTable__iZjyo\",\"ant-table-content\":\"style_ant-table-content__S_Fgs\",\"purpleRow\":\"style_purpleRow__bot_O\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"citationsContainer\":\"style_citationsContainer__oVqah\",\"citationsInnerContainer\":\"style_citationsInnerContainer__ZHHEU\",\"singleCitation\":\"style_singleCitation__qbxUz\",\"citationIcon\":\"style_citationIcon___x2Qc\",\"citationInfo\":\"style_citationInfo__tZ76P\",\"citationName\":\"style_citationName__pdvkB\",\"citationUrl\":\"style_citationUrl__RdI_o\",\"citationText\":\"style_citationText__BdN5t\",\"serpUsedByContainer\":\"style_serpUsedByContainer__azyj8\",\"citationSerpsContainer\":\"style_citationSerpsContainer__iipYx\",\"serpIcon\":\"style_serpIcon__w_LvR\",\"metaDescTooltip\":\"style_metaDescTooltip__nuDt4\",\"serpTooltip\":\"style_serpTooltip__QLWro\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__6RNd6\",\"serpTitle\":\"style_serpTitle__RXoga\",\"serpUrl\":\"style_serpUrl__tu4XQ\",\"emptyDataBox\":\"style_emptyDataBox__Mo6mN\",\"emptyImg\":\"style_emptyImg__9U7Nu\",\"emptyDataTitle\":\"style_emptyDataTitle__R5BVL\",\"subTitle\":\"style_subTitle__rYSu7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"questionsContainer\":\"style_questionsContainer__yjLcX\",\"questionsInnerContainer\":\"style_questionsInnerContainer__2asTx\",\"questionsNameAndCopy\":\"style_questionsNameAndCopy__lm2Dj\",\"customQuestionsName\":\"style_customQuestionsName___Vs5R\",\"serpUsedByContainer\":\"style_serpUsedByContainer__AobiD\",\"citationSerpsContainer\":\"style_citationSerpsContainer__jAx_o\",\"serpIcon\":\"style_serpIcon__6QGH4\",\"emptyDataBox\":\"style_emptyDataBox__1nQ8c\",\"emptyImg\":\"style_emptyImg__3_6YA\",\"emptyDataTitle\":\"style_emptyDataTitle__ApBiU\",\"focusTermPopover\":\"style_focusTermPopover__eCy11\",\"popOverTitle\":\"style_popOverTitle__q_bNa\",\"popoverDivider\":\"style_popoverDivider__0eu5_\",\"copyTooltip\":\"style_copyTooltip__kgoSh\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__7gwcB\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__cm2nS\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__RT8Gn\",\"copyIcon\":\"style_copyIcon__j24nu\",\"totalQuestions\":\"style_totalQuestions__2A_bv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__zQsc0\",\"limitedAccess\":\"style_limitedAccess__B2vHw\",\"flexRow\":\"style_flexRow__R2pUv\",\"quota\":\"style_quota__iFHMf\",\"focusTermDropdown\":\"style_focusTermDropdown__L17PC\",\"scoreContainer\":\"style_scoreContainer__stcBp\",\"scoreDescription\":\"style_scoreDescription__QkW_1\",\"scoreDescTitle\":\"style_scoreDescTitle__qa_Kd\",\"scoreDescText\":\"style_scoreDescText__Hprrn\",\"speedIndexContainer\":\"style_speedIndexContainer__Dejs9\",\"speedIndexDot\":\"style_speedIndexDot__ykTus\",\"refecthButtonContainer\":\"style_refecthButtonContainer__NDBTa\",\"popoverInfoContainer\":\"style_popoverInfoContainer__jZwn6\",\"customSpinner\":\"style_customSpinner__I9jMh\",\"keywords\":\"style_keywords__VUAeg\",\"keywordMetric\":\"style_keywordMetric__jFkNF\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__nk_Rf\",\"viewers\":\"style_viewers__3GdID\",\"avatar\":\"style_avatar__nAZ3X\",\"progress\":\"style_progress__Emagh\",\"smallProgress\":\"style_smallProgress__b2LvX\",\"needHelp\":\"style_needHelp__pVjFU\",\"userIcon\":\"style_userIcon__X7Oyb\",\"readabilityLetter\":\"style_readabilityLetter__RlwFP\",\"readabilityAActive\":\"style_readabilityAActive__etxiG\",\"readabilityBActive\":\"style_readabilityBActive__1xJXN\",\"readabilityCActive\":\"style_readabilityCActive__u9Z0Q\",\"readabilityDActive\":\"style_readabilityDActive__xdRpu\",\"readabilityEActive\":\"style_readabilityEActive__VQ8_a\",\"readabilitySecondary\":\"style_readabilitySecondary__2EAQH\",\"focusTermsCollapse\":\"style_focusTermsCollapse__kVGtj\",\"header\":\"style_header__YUb4w\",\"number\":\"style_number__q8kh0\",\"expandedIcon\":\"style_expandedIcon__l8nCj\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin___4hbN\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__ePTwm\",\"focusTermContent\":\"style_focusTermContent__CK3KM\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__DQAwe\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__EA8m7\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__QpYDT\",\"copyIcon\":\"style_copyIcon__3wT4i\",\"focusTermAndTags\":\"style_focusTermAndTags__Kp9wt\",\"icon\":\"style_icon__moQAn\",\"focusTermName\":\"style_focusTermName__Ly6am\",\"foundInElement\":\"style_foundInElement__tEiL_\",\"customFocusTermName\":\"style_customFocusTermName__LzC2O\",\"brandedLabel\":\"style_brandedLabel__6T1gS\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__rwsPG\",\"focusTermUsageCount\":\"style_focusTermUsageCount__1j6I7\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__qBdnF\",\"removeFocusTerms\":\"style_removeFocusTerms__07IkA\",\"removeTermLabel\":\"style_removeTermLabel__VbKWK\",\"removeTermIcon\":\"style_removeTermIcon__cKkeI\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__u3c18\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__SLkEY\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__xzq3T\",\"writingStylePopover\":\"style_writingStylePopover__sHjLJ\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__iCD9H\",\"focusTermPopover\":\"style_focusTermPopover__FKP8t\",\"innerPopover\":\"style_innerPopover__UbNja\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__RFjzG\",\"withArrow\":\"style_withArrow__I_XFV\",\"popoverTitle\":\"style_popoverTitle__lUKZy\",\"popoverCountrySv\":\"style_popoverCountrySv__geNG6\",\"sv\":\"style_sv__kQDDv\",\"emoji\":\"style_emoji__YGsrS\",\"popOverTitle\":\"style_popOverTitle__ahuD1\",\"competitors\":\"style_competitors__hwtcD\",\"competitor\":\"style_competitor__IqYyC\",\"singleCompetitor\":\"style_singleCompetitor__FwGi3\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__4CKN9\",\"snippetsContainer\":\"style_snippetsContainer__ot3Ml\",\"singleSnippet\":\"style_singleSnippet__XCQdn\",\"popoverDivider\":\"style_popoverDivider__chO8P\",\"popOverTermsTitle\":\"style_popOverTermsTitle__NKa1t\",\"headingsPopover\":\"style_headingsPopover__hbinC\",\"headingTooltipValue\":\"style_headingTooltipValue__bTPOI\",\"collapseContainer\":\"style_collapseContainer__TNTaa\",\"collapsableContainer\":\"style_collapsableContainer__HGsnN\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__MGXVA\",\"collapseButton\":\"style_collapseButton__kR3ue\",\"commonPopover\":\"style_commonPopover__kfD05\",\"editKeywordsBtn\":\"style_editKeywordsBtn__IvUg6\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__b8_ix\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__lUYBT\",\"isKeywordRemoving\":\"style_isKeywordRemoving__0Y5Pv\",\"suggestedKwContainer\":\"style_suggestedKwContainer__IrJwP\",\"svAndCpc\":\"style_svAndCpc__eV3Ml\",\"clickToAdd\":\"style_clickToAdd__Rf3jy\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__e16rv\",\"closeSuggestedKW\":\"style_closeSuggestedKW__vmyEL\",\"cancelButton\":\"style_cancelButton__vFlju\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon__hp2tW\",\"keywordContainer\":\"style_keywordContainer__o4y1J\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__HyXGY\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__n0rhQ\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__0GIsE\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Nbr1J\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__C4CXq\",\"keywordLocationIcon\":\"style_keywordLocationIcon__YjZTQ\",\"showIcons\":\"style_showIcons__PKtA1\",\"editKwButtonContainer\":\"style_editKwButtonContainer__5310p\",\"editKwButtonIcon\":\"style_editKwButtonIcon__09bVC\",\"keywordName\":\"style_keywordName__85ap5\",\"keywordMetricContainer\":\"style_keywordMetricContainer__0AxnT\",\"link\":\"style_link__vZDiF\",\"orderContentBtn\":\"style_orderContentBtn__uNKgi\",\"footerText\":\"style_footerText__iKsz1\",\"divider\":\"style_divider__mevUB\",\"viewSchemaBtn\":\"style_viewSchemaBtn__pU_vK\",\"tabs\":\"style_tabs__m6jOQ\",\"truncateText\":\"style_truncateText__hYHYr\",\"darkenTechnical\":\"style_darkenTechnical__gwrKF\",\"importUrlButton\":\"style_importUrlButton__KuVWa\",\"scoreDescHeader\":\"style_scoreDescHeader__hWDqY\",\"popOver\":\"style_popOver__f04Uy\",\"subtitle\":\"style_subtitle__OIvMk\",\"scrollBarSidebar\":\"style_scrollBarSidebar__Br9J8\",\"focusTermsExpanded\":\"style_focusTermsExpanded__6qt2U\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__9vao9\",\"selectContainer\":\"style_selectContainer___uIb5\",\"customSelectInput\":\"style_customSelectInput__eHqgt\",\"globeContainer\":\"style_globeContainer__63VkK\",\"globeIcon\":\"style_globeIcon__jyZcv\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__QGb2A\",\"countryInfo\":\"style_countryInfo__x__GX\",\"countrySearch\":\"style_countrySearch__BmySQ\",\"topDiv\":\"style_topDiv__wvomn\",\"locationArea\":\"style_locationArea__zWDch\",\"addKwBtnContainer\":\"style_addKwBtnContainer__FBfop\",\"tooltipInner\":\"style_tooltipInner___CBL_\",\"writingStyleContainer\":\"style_writingStyleContainer__keOla\",\"singleReadabilityItem\":\"style_singleReadabilityItem__Fe4pT\",\"activeReadabilityItem\":\"style_activeReadabilityItem__UpNZT\",\"prevReadabilityItem\":\"style_prevReadabilityItem__BGp7b\",\"nextReadabilityItem\":\"style_nextReadabilityItem__EGWMl\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__pUSoR\",\"addNewKwForm\":\"style_addNewKwForm__UIbcE\",\"populateButton\":\"style_populateButton__uUxBA\",\"customInputField\":\"style_customInputField__PqCdR\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs__e5i_W\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__ymRtc\",\"questionsTab\":\"style_questionsTab__BzJZ3\",\"countrySelectorPopover\":\"style_countrySelectorPopover__rkd0q\",\"columnTitlesRow\":\"style_columnTitlesRow__gDyYX\",\"columnTitle\":\"style_columnTitle__NsuCR\",\"defaultLocationName\":\"style_defaultLocationName__t5x2F\",\"locationInfo\":\"style_locationInfo__xzAIt\",\"setAsDefaultText\":\"style_setAsDefaultText__URXN3\",\"countryReach\":\"style_countryReach__Vqlx_\",\"singleCountryRow\":\"style_singleCountryRow__pNmS5\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__1cgyK\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__mvCk5\",\"copyTooltip\":\"style_copyTooltip__M8waz\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__RCmbz\",\"miniMetrics\":\"style_miniMetrics__uglSl\",\"miniMetricsLabel\":\"style_miniMetricsLabel__C7fe6\",\"miniMetricsValue\":\"style_miniMetricsValue__lweAH\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__L1MLr\",\"longLoadingBanner\":\"style_longLoadingBanner__n1_Co\",\"customSchemaBtn\":\"style_customSchemaBtn__L967y\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"linkToolTip\":\"style_linkToolTip__bhIce\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsContainer\":\"style_competitorsContainer__SfNOS\",\"competitorsInnerContainer\":\"style_competitorsInnerContainer___TbD7\",\"singleCompetitor\":\"style_singleCompetitor__U87HC\",\"competitorDetailsContainer\":\"style_competitorDetailsContainer__StWBo\",\"competitorPosition\":\"style_competitorPosition__M88ib\",\"competitorContentScore\":\"style_competitorContentScore__KDgTT\",\"competitorWordCount\":\"style_competitorWordCount__GBsaT\",\"splitter\":\"style_splitter__eGmIb\",\"progress\":\"style_progress__2Uzzo\",\"competitorIcon\":\"style_competitorIcon__FaDSp\",\"competitorInfo\":\"style_competitorInfo__V54hG\",\"competitorName\":\"style_competitorName__F92CB\",\"competitorUrl\":\"style_competitorUrl__s2401\",\"competitorText\":\"style_competitorText__Fzphu\",\"emptyDataBox\":\"style_emptyDataBox__4N8UY\",\"emptyImg\":\"style_emptyImg__CYXAU\",\"emptyDataTitle\":\"style_emptyDataTitle__Js1W9\",\"selectInput\":\"style_selectInput___gVgJ\",\"keywordChecked\":\"style_keywordChecked__C87zU\",\"ant-select\":\"style_ant-select__7CoFi\",\"ant-select-disabled\":\"style_ant-select-disabled__ju49Y\",\"ant-select-selector\":\"style_ant-select-selector__r_4up\",\"ant-select-single\":\"style_ant-select-single__R__La\",\"ant-select-customize-input\":\"style_ant-select-customize-input__4fC4G\",\"tooltipOverlay\":\"style_tooltipOverlay__6zcSe\",\"competitorTooltipUrl\":\"style_competitorTooltipUrl__U2ss8\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"analyticsCollapseCard\":\"style_analyticsCollapseCard__sEtSW\",\"expandIcon\":\"style_expandIcon__nKE6c\",\"header\":\"style_header__hnfX_\",\"headerRight\":\"style_headerRight__YroUz\",\"title\":\"style_title__ICalb\",\"divider\":\"style_divider__zJoLJ\",\"colTitle\":\"style_colTitle__nPW60\",\"pageText\":\"style_pageText__eXO_c\",\"analyticsHideArrow\":\"style_analyticsHideArrow__dF_7X\",\"paginationStyle\":\"style_paginationStyle__DHqNy\",\"singlePageBlur\":\"style_singlePageBlur__xKJPI\",\"filters\":\"style_filters__l5Lmi\",\"filtersText\":\"style_filtersText__Ri9O_\",\"filtersItems\":\"style_filtersItems__wtY3s\",\"chevron\":\"style_chevron__PPxCQ\",\"OptionContainer\":\"style_OptionContainer__9w4R7\",\"checkboxLabel\":\"style_checkboxLabel__mF6_s\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__DXBXv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorIcon\":\"style_competitorIcon__77Of4\",\"pageTitleUrl\":\"style_pageTitleUrl__l8xBO\",\"selectInput\":\"style_selectInput__bKQhM\",\"tableOuterPages\":\"style_tableOuterPages__AgusG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__l3WUN\",\"truncate\":\"style_truncate__5_fss\",\"tabsContainer\":\"style_tabsContainer__UYJo0\",\"tooltipContent\":\"style_tooltipContent__yIv6r\",\"title\":\"style_title__vbncV\",\"stat\":\"style_stat__2U44j\",\"label\":\"style_label__oCj7Z\",\"value\":\"style_value__OatCd\",\"competingTermsDrawerStyle\":\"style_competingTermsDrawerStyle__98Cfv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"selectInput\":\"style_selectInput__RDSGZ\",\"minified\":\"style_minified__rLAna\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsHeadingsDrawerStyle\":\"style_competitorsHeadingsDrawerStyle__ejLJA\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__fymKP\",\"popoverDivider\":\"style_popoverDivider__TIZ7J\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__4jpzP\",\"contentIdeasTitle\":\"style_contentIdeasTitle__rDNWa\",\"descriptionText\":\"style_descriptionText__dkTjD\",\"input\":\"style_input__ULYYv\",\"inputLabel\":\"style_inputLabel__ItSkl\",\"countrySelector\":\"style_countrySelector__DElA_\",\"selectInput\":\"style_selectInput__bf__m\",\"generateIdeasButton\":\"style_generateIdeasButton__AqGzy\",\"generatedItemsNumb\":\"style_generatedItemsNumb__iz2UY\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__4mBeR\",\"ContentIdea\":\"style_ContentIdea__2PlUV\",\"controlButtons\":\"style_controlButtons__YpGL7\",\"downloadButton\":\"style_downloadButton__iWffV\",\"copyButton\":\"style_copyButton___gD7q\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"overViewContainer\":\"style_overViewContainer__gRQCk\",\"title\":\"style_title__HNTaD\",\"boldTitle\":\"style_boldTitle__6f4Ii\",\"searchVolume\":\"style_searchVolume__kmSSg\",\"commonCitations\":\"style_commonCitations__g_Ylt\",\"citationScroll\":\"style_citationScroll__spbFE\",\"singleCitation\":\"style_singleCitation__0mNxO\",\"citationIcon\":\"style_citationIcon__UfZKe\",\"citationInfo\":\"style_citationInfo__fh1eJ\",\"citationName\":\"style_citationName__0_jeb\",\"citationUrl\":\"style_citationUrl____8Xs\",\"citationText\":\"style_citationText__j1sAb\",\"serpUsedByContainer\":\"style_serpUsedByContainer__82DwT\",\"citationSerpsContainer\":\"style_citationSerpsContainer__8KMGG\",\"serpIcon\":\"style_serpIcon__2dcxZ\",\"serpTooltip\":\"style_serpTooltip__mFPIs\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__tXyUj\",\"serpTitle\":\"style_serpTitle__KxJsy\",\"serpUrl\":\"style_serpUrl__oCtSk\",\"rankingContainer\":\"style_rankingContainer__V9EQL\",\"statusBar\":\"style_statusBar__qUtAS\",\"barTitle\":\"style_barTitle__yUiCm\",\"barSubTitle\":\"style_barSubTitle__ltuLr\",\"createButton\":\"style_createButton__4IncC\",\"rankingTable\":\"style_rankingTable__hRQEi\",\"firstColumnText\":\"style_firstColumnText__WROJq\",\"progress\":\"style_progress__Ft_pg\",\"dot\":\"style_dot__n0CLC\",\"topCompetitorTable\":\"style_topCompetitorTable__StrGn\",\"td\":\"style_td__vaRRm\",\"th\":\"style_th__e9zfY\",\"similarKeywordsTable\":\"style_similarKeywordsTable__53Snx\",\"paginationContainer\":\"style_paginationContainer__jJX9i\",\"titleText\":\"style_titleText__Z96eD\",\"urlText\":\"style_urlText__Qo1bK\",\"competitorImg\":\"style_competitorImg__Ct7If\",\"topTagsContainer\":\"style_topTagsContainer__30JuF\",\"topTags\":\"style_topTags__lUSuL\",\"addToProjectBtnExpanded\":\"style_addToProjectBtnExpanded___r13i\",\"addToProjectBtn\":\"style_addToProjectBtn__t13df\",\"disabledBtn\":\"style_disabledBtn__iGVvR\",\"addedToProjectBtnExpanded\":\"style_addedToProjectBtnExpanded__y3OYB\",\"iconRemove\":\"style_iconRemove__r5k98\",\"iconAdded\":\"style_iconAdded__KtJk2\",\"addedToProjectBtn\":\"style_addedToProjectBtn__AQ2cX\",\"viewAllKWButton\":\"style_viewAllKWButton__mqQ1f\",\"tooltipOverlay\":\"style_tooltipOverlay__EQTVG\",\"truncate\":\"style_truncate___oeK6\",\"contentResearchDrawerStyle\":\"style_contentResearchDrawerStyle__zXIxG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__V9bN1\",\"limitedAccess\":\"style_limitedAccess__9hmvs\",\"flexRow\":\"style_flexRow__TypB_\",\"quota\":\"style_quota__rhh52\",\"focusTermDropdown\":\"style_focusTermDropdown__AOpQn\",\"scoreContainer\":\"style_scoreContainer__loUPZ\",\"scoreDescription\":\"style_scoreDescription__fydWp\",\"scoreDescTitle\":\"style_scoreDescTitle__N5Fq9\",\"scoreDescText\":\"style_scoreDescText__49I_N\",\"speedIndexContainer\":\"style_speedIndexContainer__hpZ7E\",\"speedIndexDot\":\"style_speedIndexDot__XHb3w\",\"refecthButtonContainer\":\"style_refecthButtonContainer__jX7gt\",\"popoverInfoContainer\":\"style_popoverInfoContainer__zv0v3\",\"customSpinner\":\"style_customSpinner___6GwX\",\"keywords\":\"style_keywords__fho0v\",\"keywordMetric\":\"style_keywordMetric__8JKbU\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__UMcSb\",\"viewers\":\"style_viewers__L2oXV\",\"avatar\":\"style_avatar__fZe_c\",\"progress\":\"style_progress__JMqDz\",\"smallProgress\":\"style_smallProgress__gDgKa\",\"needHelp\":\"style_needHelp__wFCHN\",\"userIcon\":\"style_userIcon__ByzNC\",\"readabilityLetter\":\"style_readabilityLetter__hQD0j\",\"readabilityAActive\":\"style_readabilityAActive__X2_dk\",\"readabilityBActive\":\"style_readabilityBActive__fAWmd\",\"readabilityCActive\":\"style_readabilityCActive__i1lv3\",\"readabilityDActive\":\"style_readabilityDActive__VivCX\",\"readabilityEActive\":\"style_readabilityEActive__H5ftS\",\"readabilitySecondary\":\"style_readabilitySecondary__QWVvd\",\"focusTermsCollapse\":\"style_focusTermsCollapse__UdsfG\",\"header\":\"style_header__PDtnu\",\"number\":\"style_number__G29Vf\",\"expandedIcon\":\"style_expandedIcon__VyaR6\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin__fA2SL\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__PWpsl\",\"focusTermContent\":\"style_focusTermContent__erOS3\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__ih_4n\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__lXX3f\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__uE5uE\",\"copyIcon\":\"style_copyIcon__Yl1p4\",\"focusTermAndTags\":\"style_focusTermAndTags__e71fF\",\"icon\":\"style_icon__SlMha\",\"focusTermName\":\"style_focusTermName__2byG0\",\"foundInElement\":\"style_foundInElement__W0Nx4\",\"customFocusTermName\":\"style_customFocusTermName__Ms_Z_\",\"brandedLabel\":\"style_brandedLabel__RK_ob\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__z9yEJ\",\"focusTermUsageCount\":\"style_focusTermUsageCount__2P6MT\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__pHGc3\",\"removeFocusTerms\":\"style_removeFocusTerms__ERiTh\",\"removeTermLabel\":\"style_removeTermLabel__Hngc_\",\"removeTermIcon\":\"style_removeTermIcon__M1_JE\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__Oa1Mz\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__DyVeh\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__glCbD\",\"writingStylePopover\":\"style_writingStylePopover__C3ut3\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__5vHOV\",\"focusTermPopover\":\"style_focusTermPopover__VnTU3\",\"innerPopover\":\"style_innerPopover__lSYg1\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__24Dg6\",\"withArrow\":\"style_withArrow__5GtWL\",\"popoverTitle\":\"style_popoverTitle__ExoBo\",\"popoverCountrySv\":\"style_popoverCountrySv__XjYX9\",\"sv\":\"style_sv__uUHFn\",\"emoji\":\"style_emoji__YIvMa\",\"popOverTitle\":\"style_popOverTitle__QEfN0\",\"competitors\":\"style_competitors___oTWx\",\"competitor\":\"style_competitor__xaN9N\",\"singleCompetitor\":\"style_singleCompetitor__y4FaW\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__IGy_S\",\"snippetsContainer\":\"style_snippetsContainer__ujuID\",\"singleSnippet\":\"style_singleSnippet__VPWpj\",\"popoverDivider\":\"style_popoverDivider__boUZ7\",\"headingsPopover\":\"style_headingsPopover__y8sGr\",\"headingTooltipValue\":\"style_headingTooltipValue__fgpE6\",\"collapseContainer\":\"style_collapseContainer__pts2d\",\"collapsableContainer\":\"style_collapsableContainer__H44WO\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__88ikQ\",\"collapseButton\":\"style_collapseButton__so3g3\",\"commonPopover\":\"style_commonPopover__GswDO\",\"editKeywordsBtn\":\"style_editKeywordsBtn__u6kSF\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__NVC47\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__PZNMQ\",\"isKeywordRemoving\":\"style_isKeywordRemoving__juQLI\",\"suggestedKwContainer\":\"style_suggestedKwContainer__szYtD\",\"svAndCpc\":\"style_svAndCpc__KtqVX\",\"clickToAdd\":\"style_clickToAdd__GtPlI\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__uAxIa\",\"closeSuggestedKW\":\"style_closeSuggestedKW__g89NG\",\"cancelButton\":\"style_cancelButton__CSqoR\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon___PuoH\",\"keywordContainer\":\"style_keywordContainer__4fdS3\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__2uDTM\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__Num0E\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__Qqz06\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__aT7_s\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__ceI0z\",\"keywordLocationIcon\":\"style_keywordLocationIcon__eF4lH\",\"showIcons\":\"style_showIcons__iTCoZ\",\"editKwButtonContainer\":\"style_editKwButtonContainer__saLfy\",\"editKwButtonIcon\":\"style_editKwButtonIcon__gMi05\",\"keywordName\":\"style_keywordName__q2NAW\",\"keywordMetricContainer\":\"style_keywordMetricContainer___q6X_\",\"link\":\"style_link__01A4S\",\"orderContentBtn\":\"style_orderContentBtn__DE32O\",\"footerText\":\"style_footerText__s81Rx\",\"divider\":\"style_divider__kuakJ\",\"viewSchemaBtn\":\"style_viewSchemaBtn__4XAB1\",\"tabs\":\"style_tabs__yKF1D\",\"truncateText\":\"style_truncateText__uv_Dk\",\"darkenTechnical\":\"style_darkenTechnical__xbbue\",\"importUrlButton\":\"style_importUrlButton__gFSge\",\"scoreDescHeader\":\"style_scoreDescHeader__jw8OS\",\"popOver\":\"style_popOver__TgfyK\",\"subtitle\":\"style_subtitle__py_8r\",\"scrollBarSidebar\":\"style_scrollBarSidebar__7vCov\",\"focusTermsExpanded\":\"style_focusTermsExpanded__K1IrF\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__gHhKR\",\"selectContainer\":\"style_selectContainer__dc_Qg\",\"customSelectInput\":\"style_customSelectInput__4LY7U\",\"globeContainer\":\"style_globeContainer__wDM6e\",\"globeIcon\":\"style_globeIcon__Grl8C\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__a4Cas\",\"countryInfo\":\"style_countryInfo__fnbn7\",\"countrySearch\":\"style_countrySearch__67Vea\",\"topDiv\":\"style_topDiv__VdAWB\",\"locationArea\":\"style_locationArea__aoXon\",\"addKwBtnContainer\":\"style_addKwBtnContainer__fZ77F\",\"tooltipInner\":\"style_tooltipInner__vtG3X\",\"writingStyleContainer\":\"style_writingStyleContainer___9YQW\",\"singleReadabilityItem\":\"style_singleReadabilityItem__eEjir\",\"activeReadabilityItem\":\"style_activeReadabilityItem__wuJaK\",\"prevReadabilityItem\":\"style_prevReadabilityItem__Tp5ZP\",\"nextReadabilityItem\":\"style_nextReadabilityItem__bvcj1\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__q2__N\",\"addNewKwForm\":\"style_addNewKwForm__RKuU2\",\"populateButton\":\"style_populateButton__GrfTY\",\"customInputField\":\"style_customInputField__zvN4C\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs___0OIs\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__Gd2PJ\",\"questionsTab\":\"style_questionsTab__dppHa\",\"countrySelectorPopover\":\"style_countrySelectorPopover__T8e40\",\"columnTitlesRow\":\"style_columnTitlesRow__NMSYq\",\"columnTitle\":\"style_columnTitle__7VIWu\",\"defaultLocationName\":\"style_defaultLocationName__F5x15\",\"locationInfo\":\"style_locationInfo__NpXoS\",\"setAsDefaultText\":\"style_setAsDefaultText__cnlk2\",\"countryReach\":\"style_countryReach__pE0aL\",\"singleCountryRow\":\"style_singleCountryRow__pUxir\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__3i839\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__qu_SS\",\"copyTooltip\":\"style_copyTooltip__3916s\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__pm0sj\",\"miniMetrics\":\"style_miniMetrics__zV6fP\",\"miniMetricsLabel\":\"style_miniMetricsLabel__EtBkz\",\"miniMetricsValue\":\"style_miniMetricsValue__TOlMK\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__kw3Fc\",\"longLoadingBanner\":\"style_longLoadingBanner__Xqc_5\",\"customSchemaBtn\":\"style_customSchemaBtn__R0sVb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarError\":\"error_sidebarError__2cjOS\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"resize\":\"v2-sidebar_resize__QB3FU\",\"sidebar\":\"v2-sidebar_sidebar__q6cEA\",\"ant-typography\":\"v2-sidebar_ant-typography__ta5hf\",\"title\":\"v2-sidebar_title__OlAx5\",\"subTitle\":\"v2-sidebar_subTitle__LhneY\",\"secondary-text\":\"v2-sidebar_secondary-text__4LWw2\",\"divider\":\"v2-sidebar_divider__9z9OB\",\"link\":\"v2-sidebar_link___z0EU\",\"fullWidth\":\"v2-sidebar_fullWidth__k3Ujx\",\"back\":\"v2-sidebar_back__FYZmn\",\"close\":\"v2-sidebar_close__0lvVI\",\"edit\":\"v2-sidebar_edit__YifNd\",\"green\":\"v2-sidebar_green__KFjaa\",\"orange\":\"v2-sidebar_orange__cSWrx\",\"red\":\"v2-sidebar_red__JmlMA\",\"disable\":\"v2-sidebar_disable__nfA52\",\"upgradeCard\":\"v2-sidebar_upgradeCard__c27O9\",\"upgradeCardTitle\":\"v2-sidebar_upgradeCardTitle__HzPcb\",\"fullAccess\":\"v2-sidebar_fullAccess__tvMBu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__NBfKV\",\"left-side\":\"styles_left-side__LpfI5\",\"pageEditorError\":\"styles_pageEditorError__I7i3p\",\"headerKeywords\":\"styles_headerKeywords__2WBVR\",\"popoverDivider\":\"styles_popoverDivider__1cFJJ\",\"draftToolkit\":\"styles_draftToolkit__UgO6K\",\"loaderSpinnerContainer\":\"styles_loaderSpinnerContainer__unc8w\",\"loaderSpinner\":\"styles_loaderSpinner__qi_LK\",\"spin\":\"styles_spin__YiR1L\",\"selectionTooltip\":\"styles_selectionTooltip__DsvgJ\",\"arrowBottom\":\"styles_arrowBottom__usbcz\",\"textInputNotification\":\"styles_textInputNotification__5FRSY\",\"contentGeneratorDrawer\":\"styles_contentGeneratorDrawer__T7pXe\",\"closeIcons\":\"styles_closeIcons__8uuC5\",\"outlineDrawerBackArrow\":\"styles_outlineDrawerBackArrow__mEByX\",\"contentGeneratorTitle\":\"styles_contentGeneratorTitle__fm_kc\",\"selectedTextInfoContainer\":\"styles_selectedTextInfoContainer__lwCTc\",\"dataAndIcon\":\"styles_dataAndIcon__NAyfz\",\"textAndUrl\":\"styles_textAndUrl__cOjPy\",\"text\":\"styles_text__TfrwZ\",\"url\":\"styles_url__p8_St\",\"textUrlControlls\":\"styles_textUrlControlls__L9_rW\",\"urlPopup\":\"styles_urlPopup__3ZEur\",\"inputContainer\":\"styles_inputContainer__ACZFh\",\"textLabel\":\"styles_textLabel__yKZPz\",\"urlInput\":\"styles_urlInput__DVTni\",\"inputControlls\":\"styles_inputControlls__Ynfjt\",\"linkSuggestionsPopover\":\"styles_linkSuggestionsPopover__2c_Jo\"};"],"names":["notificationType","Notification","type","text","showContactSupportLink","param","settings","customer","isGHLAccount","useStore","openLiveChat","chatBtn","document","querySelector","click","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","div","className","classnames","styles","jsx","NextImg","src","span","onClick","CaAiQuotaInfo","observer","quotaUtilization","mode","size","customLabel","isMinified","colorSetup","useState","dark","textColor","light","gray","sizeSetup","small","fontSize","normal","profile","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","Wrapper","Label","ca","allowedAiContentGeneration","consumed","total","styled","_templateObject","p","_templateObject1","VideoPlayerModal","iconPath","title","subTitle","button1","videoLink","button2","FontAwesomeIcon","icon","faCheck","style","marginRight","buttonMinimize","onClickButton1","onClickButton2","button3","onClickButton3","home","videoPlayerModal","setVideoPlayerModal","minimized","setMinimized","Fragment","ModalStyled","destroyOnClose","width","display","alignSelf","visible","onClose","maskStyle","background","justifyContent","marginBottom","TitleText","SubTitleText","Button","color","variant","faArrowDownLeftAndArrowUpRightToCenter","iframe","height","frameBorder","allow","allowFullScreen","borderRadius","SmallPopupStyled","position","CloseOutlinedStyled","faArrowUpRightAndArrowDownLeftFromCenter","Modal","_templateObject3","_templateObject4","Table","props","block","blockProps","editor","getData","get","target","concat","createPortal","jsx_runtime","EditorBlock","data","tableKey","tableShape","colgroup","isArray","table","borderCollapse","margin","id","dangerouslySetInnerHTML","__html","tbody","map","row","i","tr","cell","j","element","th","border","padding","backgroundColor","textAlign","colSpan","colspan","rowSpan","rowspan","data-position","defaultValue","td","BlockImage","image","useRef","contentState","content","alt","getEntityAt","getEntity","widthImg","includes","heightImg","ref","iframeRegex","test","srcMatch","match","widthMatch","heightMatch","titleMatch","urlPattern","referrerPolicy","getNumberFromEnglishCounting","WriteForMe","htmlToDraft","contentOptimizer","currentPage","contentFragment","getCustomerQuota","isFullBtn","setIsFullBtn","currentEditorState","focusTermsClassNames","isSideBarHidden","antIcon","LoadingOutlined","spin","antIconLarge","useEffect","preventingDefaultMenu","e","stopPropagation","querySelectorAll","forEach","elem","addEventListener","removeEventListener","setTimeout","editorWrapperElem","getElementById","editorElem","clientWidth","offsetWidth","getEditorRealMargin","window","debouncedChange","debounce","state","focusTerms","isNewDecorations","editContent","debouncedUpdate","useCallback","getSelection","editorState","insertText","isBlock","firstNewBlockId","contentBlocks","entityMap","fragment","html","selection","newSelection","SelectionState","anchorKey","getKey","anchorOffset","getText","length","focusKey","focusOffset","getAnchorKey","getEndOffset","ContentState","createFromBlockArray","getBlockMap","nonStyledState","Modifier","replaceWithFragment","getCurrentContent","currentBlock","nextBlock","getBlockAfter","existingNodes","getAttribute","updatedState","EditorState","push","setCurrentEditorState","setAiTooltip","show","newTextElems","classList","add","analytics","remove","getParams","currentContent","fetchAndInsertText","action","selectedText","start","getAnchorOffset","getFocusOffset","end","getBlockForKey","isCollapsed","slice","fetchFragment","aiTooltip","Promise","reject","isTextSelected","isEmptyContent","Container","Tooltip","WriteForMeStyled","cursor","fragmentLoading","Spin","marginTop","indicator","faFeather","WriteForMeMiniStyled","BasedOn","isSelection","UsedQuota","used","_templateObject2","CustomBlock","blockRef","Option","Select","isOpen","setIsOpen","require","typesMap","hotKeysLabelMap","blockType","getType","dropdownRef","handleClickOutside","event","current","contains","onEditorChange","prevSelection","prevEditorState","forceSelection","BlockContainer","blockHeight","offsetHeight","topOffset","writeForMeTopOffset","isScaPublicPage","DropdownContainer","onContextMenu","currentValue","open","onChange","value","hasFocus","isBackward","newEditorState","RichUtils","toggleBlockType","dropdownStyle","dropdownMatchSelectWidth","suffixIcon","faCaretDown","Object","keys","idx","CustomBlock_templateObject","CustomBlock_templateObject1","Input","CommonInput","UploadFromUrlForm","store","form","Form","useForm","t","useTranslation","onUploadHandler","url","setIsCreateFromUrl","uploadFromUrl","updateContentLoadedAt","setCurrentStep","initialValues","onFinish","Item","name","rules","required","message","validator","_","isURL","require_protocol","resolve","inputType","placeholder","buttonType","loading","isUploading","Step1","setIsCreateFromScratch","setIsFirstArticleEdit","router","useRouter","onStartFromScratchClick","setIsFetchingTargetKw","analysis","clearUrl","createWithContent","createFromText","routes","landingPageOptimizer","query","uuid","undefined","shallow","br","Welcome","currentStep","styleMap","ContentEditor","getEditorState","showAiBanner","editorContainer","heroSection","lastScrollPosition","setLastScrollPosition","addHeroImageLoading","setAddHeroImageLoading","localStorage","setItem","aiOutline","aiMetaData","pages","getHeroImageById","clearFocusTermsClusters","getCurrentEditorState","zoomLevel","newPage","clearFeTargetKeywords","clearTargetKeywords","isInitialEditorStateFetched","setIsEditorScrolled","isEditorScrolled","setFocusTermsSorter","resetRepollCounters","clearAllTaData","setIsUnspashDrawerOpen","updateHeroImage","isHeroImageLoading","setContentType","clearAiOutline","isOpenAiOutlineDrawer","setIsOpenAiOutlineDrawer","clearV2AiOutline","setIsOpenAiContentToolsDrawer","clearTemplateOutlines","clearTemplates","setIsOpenAiWriterDrawer","clearOneClickIdea","clearOneClickOutlines","setAiWriter","aiWriterController","setAiTemplate","aiTemplatesController","clearMetaData","navBar","setIsDockedSider","heroImage","aiInProgress","setHeroImage","heroImageAltText","antIconOrange","windowHeight","innerHeight","showForm","label","key","removeSizeDataFromBlock","delete","set","blockMap","handleTabInTable","direction","collapsed","targetKey","targetBlock","getBlockBefore","merge","getLength","splitBlock","getLastBlock","createEmpty","setBlockType","isTargetTable","endOffset","setSelectionIfNone","getHasFocus","moveSelectionToStart","toggleInlineStyle","inlineStyle","customStyleMap","existingMatch","getCurrentInlineStyle","filter","split","toList","kebabCase","endsWith","rexp","RegExp","newString","replace","toggleListType","listType","getCurrentBlockType","handleDeleteKey","startBlock","getStartKey","endBlock","getEndKey","handleKeypressWhenSelectionNotCollapsed","toggleBlockData","newData","selectionState","newContentState","setBlockData","setIndent","listMax","indentMax","setDepth","adjustment","startKey","endKey","blocks","toSeq","skipUntil","k","takeUntil","depth","getDepth","maxDepth","newDepth","Math","max","min","selectionBefore","selectionAfter","isEditorFocus","focus","setIsEditorFocus","oneClick","getSingleUrlParam","writeWithAi","onEditorBlockTypeChange","getCurrentBlock","blockKey","currentSelection","handleChangeBlockType","keysMap","curPressKeys","checkKey","preventDefault","keyCode","multipleExist","keysArray","every","clearPressKeysArr","checkTitle","titleArray","handleAddHeroImage","targetKeywordsCount","cleanedHtml","res","loadPage","notification","error","warning","scrollTo","top","addHtmlToDocument","newHtml","hasText","reset","convertHtmlToEditorState","newBlockMap","newContent","currentEditor","blur","chars","prevBlock","firstCell","getStartOffset","firstTableKey","lastCell","lastTableKey","sameTable","startOffset","v","toOrderedMap","has","genKey","ContentBlock","Map","firstBlock","removeRange","first","butLast","subSelection","notLastTable","notFirstTable","notTable","separatorBlock","notTableStart","find","selectionKey","handlePastedText","pastedHtml","replaceText","moveFocusToEnd","getFirstBlock","blockRendererFn","contentBlock","component","editable","templateUsed","templateIcon","templateName","templateDesc","isStandaloneTool","toJS","isUseMask","onScroll","scrollTop","classNames","isExportingPage","getZoomLevel","editorHeightOffset","breadcrumbHeight","keywordsHeight","opaqueColor","alignItems","boxShadow","faBrainCircuit","fontWeight","marginLeft","faArrowRight","HeroImageWrapper","SkeletonRingLoader","HeroSection","HeroImage","ButtonsContainer","getPopupContainer","trigger","ButtonWrapper","faArrowsRotate","faICursor","faTrash","AiBanner","shouldPopulatePageHtml","Editor","editorKey","draftEditorState","scrollY","blockStyleFn","handleKeyCommand","command","offset","blockBefore","currentBlockType","acceptSelection","onBackspace","getFocusKey","float","keyBindingFn","KeyBindingUtil","hasCommandModifier","getDefaultKeyBinding","content_editor_templateObject","content_editor_templateObject1","content_editor_templateObject2","img","content_editor_templateObject3","content_editor_templateObject4","_templateObject5","User","avatar","email","isOwner","permission","onPermissionChange","activePermission","setActivePermission","Avatar","CaretDownFilled","share_modal_Option","ShareModal","pagePermissions","shareDialog","setEmail","setPermission","globalPermission","setGlobalPermission","isEditableByAnyone","handleGlobalPermissionsUpdate","location","existingPermission","existingViewPermission","isViewableByAnyone","navigator","clipboard","writeText","href","success","editPagePermissions","closeDialog","MixPanel","track","SCA_PAGE_SHARED","handleInviteUser","closeAfterSubmit","emails","warn","closable","closeIcon","faXmark","bodyStyle","Title","Head","InputContainer","V2Button","disabled","emailReg","EmailError","Body","ul","li","createdByUser","users","sort","user","toLowerCase","Divider","Footer","GrayButton","paddingBottom","paddingTop","share_modal_templateObject1","share_modal_templateObject2","share_modal_templateObject3","share_modal_templateObject4","share_modal_templateObject5","_templateObject6","_templateObject7","AiTooltip","activeOption","setActiveOption","urlCopy","setUrlCopy","setIsCopy","onLinkRemove","updatedSelection","toggleLink","sendTextToEditor","insertLinkToText","decorator","createCompositeDecorators","formatUrl","urlValue","entityKey","newContentWithEntity","createEntity","getLastCreatedEntityKey","newNewContent","textValue","withLinkText","withProperCursor","getSelectionAfter","isLinkEdit","bottom","left","onMouseDown","flexDirection","ButtonV2","paddingLeft","faEarthAmerica","faPen","isLink","faLinkSimpleSlash","word","faCopy","internalLinkSuggestions","link","keyword","trim","Popover","placement","overlayClassName","overlayStyle","SuggestionsContainerTitle","faCircleInfo","SuggestionsTitle","results","suggestion","SingleLinkContainer","Left","Link","Right","isUsed","SuggestionsMenuItem","faLink","faAngleRight","AiTooltip_templateObject","AiTooltip_templateObject1","AiTooltip_templateObject2","AiTooltip_templateObject3","AiTooltip_templateObject4","AiTooltip_templateObject5","AiTooltip_templateObject6","a","AiTooltip_templateObject7","Unsplash","contentType","UNSPLASH_ACCESS_KEY","UnsplashReact","namedExports","searchInput","onAddImage","imageUrl","onImageUpload","insertImage","accessKey","Uploader","withDefaultProps","InsertIntoApplicationUploader","onFinishedUploading","FreeStockTab","gap","Radio","RadioStyled","ImageComponent","setImagesList","historyCopyStatus","setShowSelectedHistoryImage","setShowHistoryImage","rootElement","setImagesAddedCount","imagesAddedCount","elemIdx","setElemIdx","imagesLoadedCount","setImagesLoadedCount","setShowAddHeroCheck","setShowAddToArticleCheck","setShowCopiedCheck","showAddHeroCheck","showAddToArticleCheck","showCopiedCheck","templatesHistory","currentElement","IntersectionObserver","entries","entry","intersectionRatio","unobserve","imagesLoading","item","imageList","images","root","threshold","observe","handleHistoryImageCopyClick","execCommand","result","inputs","fieldValue","selectedHistoryImageAdd","index","imgOnLoad","onMouseLeave","Col","onMouseOver","ColCardContainer","hide","ColCardImage","String","onLoad","button","copyIconWhite","viewImageCheck2","imageComponent_templateObject","imageComponent_templateObject1","ImageListComponent","buttonTitle","dummyImages","imagesDummy","setImagesDummy","imagesList","Row","gutter","overflow","maxHeight","val","CardStyle","load","Card","AICreateImagesTab","activeTab","isUnsplashDrawerOpen","setHistoryCopyStatus","aspectRatio","setAspectRatio","imagesAspectRatio","setImagesAspectRatio","isRealistic","setIsRealistic","loadAiTemplateOutlinesHistory","loadAiGeneratedImage","setDummyImages","setImageGenerateInputValue","imageGenerateInputValue","historyLoading","setCopyStatus","projects","setShowScaTopUpModal","isWhitelabel","isAllowedAiContentGenerationQuotaLimitReached","plans","showSidebarPaymentDrawer","setButtonTitle","showError","setShowError","showSelectedHistoryImage","showHistoryImage","selectSuffixIcon","filteredObj","projectId","defaultAiSettings","onGenerateBtnClick","subtitle","QuotaWrapper","QuotaInfoDetail","consumedData","totalData","heading","description","ctaLabel","showCta","customCta","isCenter","InputWrapper","CommonInputStyled","onFocus","whiteSpace","SettingContainer","SelectContainer","OptionLabel","SelectStyled","grayBackground","aspectRatioOptions","Checkbox","autoFocus","defaultChecked","checked","ModalImage","centered","footer","onOk","onCancel","ai_create_images_tab_templateObject","ai_create_images_tab_templateObject1","ai_create_images_tab_templateObject4","ai_create_images_tab_templateObject5","ai_create_images_tab_templateObject6","AddImageDrawer","checkTab","setActiveTab","handleClose","URL","queryParams","URLSearchParams","search","newURL","origin","pathname","toString","hash","history","pushState","path","Drawer","mask","maskClosable","TabsStyled","Tabs","tabBarGutter","activeKey","copyAndModifyQueryParams","TabPane","tab","AddImageDrawer_templateObject","EditorSection","isCopy","setEditorHeightOffset","setShowAiBanner","showEditAltModal","setShowEditAltModal","altText","setAltText","setElement","modalEditorStates","setModalEditorStates","hideButton","setHideButton","noFirstVisit","getItem","handleModalOpen","currentAlt","handleUpdateAlt","tagkey","attributes","blockList","next","newEntity","entity","mergeEntityData","promptForLink","pageX","pageY","closeContextMenu","headerKeywordsRef","updateKeywordsRef","isNil","isManualUpdate","debouncedHighlightingChange","decorated","changeType","acceptedTypes","decoratedState","debouncedHighlighting","errorMessage","isImportError","isCreatedFromScratch","prevOffset","blockWithLinkAtBeginning","linkKey","characterList","getCharacterList","initialSelectedText","generateSelectedText","lastWasEnd","selectedBlocks","blockArray","selectedTextFromBlocks","join","xSelection","x","prevChar","nextChar","prevEntity","nextEntity","finalPrevOffset","finalNextOffset","char","blockLength","finalAnchorOffset","rangeCount","getRangeAt","getBoundingClientRect","noEntityCase","noSelectionLeft","noSelectionTop","noSelectionBottom","tempX","clientY","clientX","linkInstance","startsWith","getLastChangeType","lastChangedBlockKey","lastChangedBlock","lastChangedBlockType","addCrossIcon","isExtensionInstalled","handleShowNotification","checkDate","getCount","date1","hoursDifference","Number","diffInMs","abs","date2","now","Date","maxWidth","checkCount","CloseOutlined","rel","transform","zIndex","InputTitle","InputStyled","ButtonsWrapper","CancelButton","ButtonStyled","EditorSection_templateObject","EditorSection_templateObject1","EditorSection_templateObject3","EditorSection_templateObject5","Header_Option","Header","blockTypeEnhancement","CaretDownOutlined","pointerEvents","UnorderedList","UnorderedListOutlined","Bold","inlineStyleEnhancement","BoldOutlined","Italic","ItalicOutlined","Underline","UnderlineOutlined","OrderedList","OrderedListOutlined","Code","CodeOutlined","Anchor","updateText","showNewUrlEditor","setShowNewUrlEditor","editorValues","setEditorValues","selectionRange","setSelectionRange","customSelection","dateRef","onkeydown","ctrlKey","shiftKey","metaKey","iconClicked","LinkOutlined","AnchorRemove","entityTypeEnhancement","removeLink","faUnlink","AddImage","openDrawer","faImage","Dragger","Upload","BrowseImage","loader","setLoader","isError","setIsError","altValue","parentElement","setImgFile","setImage","contentStateWithEntity","AtomicBlockUtils","insertAtomicBlock","formData","FormData","append","imgFile","CONTENT_ASSISTANT_API","uploadImage","ele","which","handleImageChange","selectedFile","reader","FileReader","onloadend","readAsDataURL","RequiredFileType","faTrashXmark","StyleDragger","multiple","showUploadList","customRequest","file","onDrop","getFile","dataTransfer","files","faCloudArrowUp","InputWraper","AtributeWrapper","Pwrapper","CancelBtn","AddBtn","browseFile_templateObject","browseFile_templateObject1","browseFile_templateObject2","UploadURL","imgRegex","imageFormat","urlUpload_templateObject","urlUpload_templateObject1","urlUpload_templateObject2","UploadImage","FileBtn","faFileImage","Popup","StyledInputContainer","StyledTabs","defaultActiveKey","UploadImage_templateObject2","UploadImage_templateObject3","InsertIframe","showIframeEditor","setShowIframeEditor","setUrl","contentData","iframeUrl","faRectangleCode","LargeBadge","alpha","StyledPopup","StyledUrlContainer","InsertButton","insertIframe_templateObject1","Textarea","Toolkit","isTaActive","setIsSideBarHidden","setZoomLevel","isPublic","updatingFolder","isLinkgraph","newState","undo","UndoOutlined","redo","RedoOutlined","faWandMagicSparkles","arrowPointAtCenter","faChevronRight","transition","useClickedOnPageHandler","callback","SingleKeywordDataCard","getSpecificCountryByCode","kw","keywordsFormProps","countries","Text","Typography","updateKeyword","useWatch","keywordResearcherV2","postNewKeywords","keywordDetails","loadKeywordDetailList","loadKeywordDetails","setDetailsRepolling","isKwNameEdit","setIsKwNameEdit","showLocationSelector","setShowLocationSelector","isEditDefaultLocation","setIsEditDefaultLocation","popRef","showKwErrorMsg","setShowKwErrorMsg","showMessage","r","removeTargetKeywords","err","payload","keywordsArray","feTargetKeywords","feKw","updateFeTargetKeywords","locationId","countryCode","editKeywords","response","status","allowedFocusTerms","isEmpty","setFieldsValue","postAndGetData","keywords","kwClickHandler","targetKeywords","setIsDrawerFromCa","setActiveTargetKw","setIsOpenKeywordDrawer","values","formKeyword","formatArray","preparedKeyword","kwArray","locationSelected","reach","updatelocationData","keywordForFrontendArray","JSON","stringify","SCA_PAGE_UPDATE_KEYWORD_LOCATION","locationDebouncerChange","country","updateCountriesList","openLocationSelector","searchForLocation","shouldUpdate","resetFields","faTimes","toUpperCase","overlayInnerStyle","faLocationDot","mouseLeaveDelay","mouseEnterDelay","openClassName","faArrowLeft","faSearch","faInfoCircle","faGlobe","formatNumber","faMapMarkerAlt","serpTaskStatus","Flag","code","searchVolumeFormatter","sv","Globe","globalSv","svTopCountries","indx","_countryCode","searchVolume","Progress","showInfo","strokeWidth","percent","round","trailColor","strokeColor","getProgressColor","SkeletonHorizontalLoaderGray","lightLoader","skeletonHeight","skeletonMarginTop","kd","getInverseProgressColor","costPerClickFormatter","cpc","TargetKeywords","expanded","isAddingNewKw","setIsAddingNewKw","newKwValue","setNewKwValue","kwLengthErr","setKwLengthErr","targetrKeywordsContainer","addHorizontalScroll","topScroll","leftScroll","scrollX","onscroll","deltaY","scrollLeft","newKwLocation","setNewKwLocation","popoverRef","onAddKeywordFinish","format","faPlus","numberWithCommas","textOverflow","faExclamationTriangle","SCA_PAGE_ADD_KEYWORD","SuggestedKeywordCard","isRemoving","setIsRemoving","addSuggestedKwToTargetKw","passedKw","stagedForAddingKw","SCA_PAGE_ADD_KEYWORD_SUGGESTION","removeTargetKeyword","removeSuggestedKeyword","strong","KeywordSuggestions","keywordSuggestionsContainer","showAllSuggestionsHandler","kwSuggestions","isFetchingSuggestedKw","editorText","TargetKeywordsAndSuggestions","isExpanded","setIsExpanded","containerRef","parentRef","ChevronDown","faChevronDown","faChevronsDown","faChevronUp","MetaIdeasList","metaIdeas","onIdeaUse","metaCopied","setMetaCopied","copyMetaHandler","desc","IdeasContainer","idea","SingleIdeaContainer","MetaTitle","metaTitle","MetaDesc","metaDesc","MetaIdeasList_templateObject","MetaIdeasList_templateObject1","MetaIdeasList_templateObject2","MetaIdeasList_templateObject3","MetaTagGenerator","updateMetaData","setIsExternalTitleEdit","isMetaUpdating","editTitle","setLoading","loadAiMetaData","metaData","showMetaDataModal","setShowMetaDataModal","customMetaTitle","setCustomMetaTitle","customMetaDesc","setCustomMetaDesc","showAiMetaResults","setShowAiMetaResults","antdIcon","updateMetadata","meta_title","meta_desc","checkPageTitle","regexp","aiButtonTooltipMsg","msg","generateSingleMetaIcon","metaValue","faHexagonExclamation","metaValueMinLength","metaValueMaxLength","largerThenMax","smallerThanMin","idealSize","missing","largerBy","smallerBy","statusMsg","faTriangleExclamation","faCircleCheck","updateMetaDataHandler","aiMetaDataHandler","targetKwArr","aiSuggestionMsg","metaDataTooltipContent","destroyTooltipOnHide","onVisibleChange","MetaDataBtnStyled","OneClickPublisherV2","extractOptions","wpArray","syncedAt","postStatus","synced","publishedAtUrl","topicalMapName","errorId","setErrorId","smallPageLoad","setUnsavedChanges","unsavedChangesInContent","wpPublish","fetchWpPublishData","postingData","showDataModal","setShowDataModal","publishWpPage","setShowAddSiteModal","isApiError","isShopifyApiError","updateApiError","setShowIndividualPopover","showIndividualPopover","setLoadingData","loadShopifyBlogs","blogs","creatingPage","creatingBlog","createNewShopifyPage","createNewShopifyBlog","getVendorAccounts","vendorAccounts","ottoV2Store","loadIssueTableData","ottoUrls","selectedWpSite","setSelectedWpSite","triggerSites","setTriggerSites","selectedShopifySite","setSelectedShopifySite","showWpVideo","setShowWpVideo","filteredObject","setFilteredObject","selectedUser","setSelectedUser","selectedWpSiteUsers","setSelectedWpSiteUsers","setTrigger","showSynchronizeTypeDropdown","setShowSynchronizeTypeDropdown","synchronizeType","setSynchronizeType","parent","setParent","project","setProject","reloadProjectUuid","refOne","refTwo","newBtnLabelOptions","setNewBtnLabelOptions","currentProject","offerPublishUrl","importedFromUrl","wpPublishedAtUrl","cleanWpArr","getDomain","showWpFormType","setShowWpFormType","syncWp","createNewWp","syncShopify","shopifySynced","createNewShopify","wpPostCategories","wpPostStatus","wpPostType","wpPublishedAtWebsiteId","defaultWpPostCategories","defaultWpPostStatus","defaultWpPostType","defaultWpWebsiteId","shopifyContentType","wpPostParent","shopDomain","wpWebsite","wpPostCategory","account_id","accountId","postParent","wpNewPostCategory","author","wpPostAuthorId","selectedWPsiteData","articles","updatedArticles","setShopifyInitialValues","newBtnLabel","setNewBtnLabel","syncBtnLabel","setSyncBtnLabel","Group","antdIconLarge","wpPostMetaDesc","getTopLinkUrl","getTopLinkId","publishWpPageHandler","notificationV2","topicalMapObject","obj","issueType","params","issue_type","page_size","pageSize","page","is_loading","pageId","pageUrl","postType","postAuthor","postCategories","selectedVendor","shopifySite","shop_domain","shopifyPayload","blog_title","ca_page_id","post_type","tags","new_post","permalink","getSyncedPill","SyncedPill","faCircleXmark","setFields","errors","categories","options","category","children","wpPublisherSyncSection","WpUpdatePostSection","isActive","CustomRadioButton","VideoTutorialBtn","InputsContainer","wpSyncedAt","shopifySyncedAt","wpSynced","shopifyContentUrl","WpLastSyncLeft","moment","WpSyncedPostDetails","sanitizeUrl","faUpRightFromSquare","InputLabelWrapper","FormLabel","initialValue","PurpleRadioButton","blueColor","getFieldValue","StyledFormItem","blog","on","userEmail","itemsArray","areCategoriesSame","Array","PublishButton","htmlType","wpPublisherNewPostSection","WpNewPostSection","borderRadiusTop","wpSite","OptionalTag","pattern","wordCount","wpPublishTooltipContent","WpPublishTooltipContentWrapper","ErrorNotificationContainer","ErrorNotification","textDecoration","onClickShopify","alignConfig","points","handleClick","shopifyBlogId","shopifyBlogTitle","shopifyPostType","shopifyAuthor","shopifyAccountId","shopifyTags","Dropdown","overlay","DropdownContentContainer","align","SynchronizeType","isCleanedHtmlUpdated","_content_wpPostAuthorId","faWordpressSimple","faCaretRight","isShopifyCustomer","faShopify","SynchronizeBtn","faRotate","OneClickPublisherV2_templateObject","OneClickPublisherV2_templateObject1","OneClickPublisherV2_templateObject2","OneClickPublisherV2_templateObject3","OneClickPublisherV2_templateObject4","OneClickPublisherV2_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject19","TitleEditor","languages","contentLoadedAt","isAnalyzing","isExternalTitleEdit","viewers","setShowQuickSyncModal","showQuickSyncModal","userAiSettings","updateUserAiSettings","getUserAiSettings","titleLeft","setTitleLeft","setTitle","modalUrl","setModalUrl","editPageUrl","setEditPageUrl","isCloseClicked","setIsCloseClicked","showDownloadConfirmationModal","setShowDownloadConfirmationModal","submitDisabled","setSubmitDisabled","renderWithbrowser","setRenderWithBrowser","keepContentModal","setKeepContentModal","titleContainerWidth","setTitleContainerWidth","calculateWidth","collapsedViewers","setCollapsedViewers","titleRef","getTitleLeft","urlInput","debouncedChangeFocusOut","URL_PATTERN","popupRef","language","setLanguage","defaultLanguage","onLanguageChangeHandler","option","selectSufixIcon","onEditUrlSubmit","updateUrlHandler","shouldOverwriteContent","renderWIthBrowser","SCA_PAGE_URL_UPDATE","titleWidth","ctx","createElement","getContext","measureText","formatedTitleWidth","WpInstructionsModal","WpAddSiteModal","CommonModal","EditUrlModalTitle","EditUrlModalSub","EditUrlLink","EditUrlModalButtons","CheckboxStyled","input","onBlur","readOnly","ScaArticleStatusSelectorV2","articleUuid","articleStatus","ProjectsSelector","projectName","pageUuid","minifiedVersion","EditUrlContainer","valuePropName","Loader","faArrowDownToBracket","faArrowUpFromBracket","opacity","StyledSelect","showSearch","filterOption","indexOf","onMouseEnter","lang","formatCountryCode","title_editor_templateObject","title_editor_templateObject2","title_editor_templateObject3","title_editor_templateObject4","title_editor_templateObject5","dropdownColors","grey","listItemsBackgroundColor","borderColor","BreadCrumb","headerTopRef","isKebabOpen","setIsKebabOpen","isModalOpen","setIsModalOpen","exportToDocsLoading","setExportToDocsLoading","briefAntIcon","copySuccess","setCopySuccess","clearAnalytics","isExporting","isSaving","exportToGoogledoc","deleteDialog","incrementInTotalArticle","setPageRemovedFromEditor","isAllowedPagesQuotaLimitReached","clientHeight","createPage","PAGES_API","SCA_CREATE_PAGE","exportToGoogleDocs","exportPageToGoogleDocs","PageHeader","onBack","login","backIcon","extra","ShareButton","openDialog","faShareNodes","ExportButton","faFileArrowDown","faEllipsisV","ButtonComponent","googledocLink","SCA_PAGE_EXPORT_TO_DOCS","GoogleOutlined","resp","exportArticleAsHtml","setAttribute","encodeURIComponent","body","appendChild","removeChild","allowedPages","DeleteModal","removeFromEditorCallback","h1","Btn","TopSection","minWidth","DraftToolkit","TextSuggestions","setIsTaActive","setFocusTermsForInsertion","stagingTaSuggestions","taActiveTerm","setTaActiveTerm","setStagingTaSuggestions","highlightedNodeId","setHighlightedNodeId","showOriginalBlockId","setShowOriginalBlockId","updatingTa","totalOccurances","setTotalOccurances","getElementsByClassName","class","onArrowClickHandler","updatedValues","term","order","nodesWithTerm","_higlightedNode_dataset","higlightedNode","dataset","blockIndex","elemOffset","offsetTop","Heading","blocksRenderer","blocksArray","domNode","attribs","typeDettector","onBlockStatusChange","prepDataArr","itemIndex","onDotClickHandler","updateImageStyle","replaceAll","TextContainer","regExp","isSuggestion","SingleBlockWithSuggestion","showingOriginalBlock","currNodeId","data-block-index","termIncluded","right","textTransform","parse","faRotateLeft","BlockWrapper","Controller","DotsContainer","Dot","Arrow","faArrowUp","faArrowDown","checkCurBlockStatus","highlightedNode","elementStatus","_highlightedNode_dataset","TextSuggestions_templateObject","TextSuggestions_templateObject1","TextSuggestions_templateObject2","TextSuggestions_templateObject3","TextSuggestions_templateObject4","TextSuggestions_templateObject5","TextSuggestions_templateObject6","TextSuggestions_templateObject7","TextSuggestions_templateObject8","TextSuggestions_templateObject9","TextSuggestions_templateObject10","TextSuggestions_templateObject11","TextSuggestions_templateObject12","MissingPlacementsBanner","setShow","termsWithNoSuggestions","setTermsWithNoSuggestions","getlinksForInsertion","linksAssistantSuggestions","prepArr","linksIncluded","noPlacementsTermsCount","autoAdjustOverflow","MissingPlacementsBanner_templateObject","SingleTerm","finalTermsList","setFinalTermsList","setVisible","kwUpdate","termIndex","setTermIndex","getstagingLinkSuggestions","setStagingLinkSuggestions","setLinkActiveTerm","linkActiveTerm","onTermClickHandler","curTerm","newClass","incDec","cardClick","scrollTerms","acceptedStatus","dismissedStatus","CardTitle","isTerm","faCircleX","faCircleDashed","StatusTitle","isVal","DividerLine","SuggestionCard","newItems","updateTerm","SingleTerm_templateObject","SingleTerm_templateObject1","SingleTerm_templateObject2","SingleTerm_templateObject3","SingleTerm_templateObject4","SingleTerm_templateObject6","LinksList","taLinkSuggestionLoading","setFilter","loadLinksData","expectedData","outerArray","linksData","innerArray","uniqueData","seenSet","Set","array","stringRepresentation","suggestionList","allLinks","arrayToObject","givenValue","expectedValue","internalLinkSuggestionsV2","getTerms","elements","DOMParser","parseFromString","innerText","formattedArray","arr","arrTwo","indexx","filteredValue","addData","firstTerm","LinkAssistantRightSidebar","inputValue","activeKeywordsList","setIsLinkActive","setLinksForInsertion","stagingLinkSuggestions","setIsTaUpdating","fetchLinkSuggestions","setActiveKeywordsList","updated","setUpdated","setInputValue","anyButtonClicked","setAnyButtonClicked","activeKwArr","active","onCheckboxClicked","elemId","filteredKw","findIndex","onCancelClickHandler","onSubmitHandler","finalHtmlOutput","updatedEditorState","keywordsDropdown","KeywordsDropdownContainer","OverlayTitle","addLink","allLink","urlWithProtocols","links","stringToArray","keywordNewLineReg","popoverContent","CustomTextarea","paddingToNumber","paddingToText","isKeyWordv2","autoSize","minHeight","autoSizeCheck","nativeEvent","LinkSubmitBtns","selectedLink","TaWrapper","TermsMainWrapper","TitleContainer","Description","ActionButtonsContainer","some","linkAssistantRightsideBar_templateObject","linkAssistantRightsideBar_templateObject1","linkAssistantRightsideBar_templateObject3","linkAssistantRightsideBar_templateObject4","linkAssistantRightsideBar_templateObject5","linkAssistantRightsideBar_templateObject7","viewSuggestionsOption","css","blinkAnimation","keyframes","linkAssistantRightsideBar_templateObject9","linkAssistantRightsideBar_templateObject10","linkAssistantRightsideBar_templateObject11","linkAssistantRightsideBar_templateObject12","TextSuggestionsLinks","isLinkActive","doc","TextSuggestionsLinks_templateObject","TextSuggestionsLinks_templateObject1","TextSuggestionsLinks_templateObject2","TextSuggestionsLinks_templateObject3","TextSuggestionsLinks_templateObject4","TextSuggestionsLinks_templateObject5","LeftSide","sideBarWidth","LeftSideContainer","isLinkSuggestionActive","isNewPage","LeftSide_templateObject","Error","WarningOutlined","h3","SingleCluster","SORT_DIRECTION","removingTerms","cluster","isClusterRemoving","tableData","setTableData","sortField","setSortField","sortDirection","setSortDirecion","removeClusterHandler","isBulkRemovingCluster","bulkRemoveTerms","setTerms","dataFiltered","filterDataInMemory","handleTableChange","pagination","filters","sorter","column","sortFieldName","dataSource","loadingRows","columns","dataIndex","render","record","foundIn","FoundInLabel","isBranded","formatLargeNumber","defaultSortOrder","usedCount","idealCountMax","RemoveClusterBtn","rowKey","SingleCluster_templateObject","SingleCluster_templateObject1","BulkRemoveTermsModal","clusteredTerms","setClusteredTerms","clusterToRemove","setClusterToRemove","clusterTerms","clusters","tempArr","focusTermsSorter","tempCluster","b","clusterTitle","termsArr","ModalTitle","CollapseStyled","expandIconPosition","Collapse","Panel","header","ClusterHeader","ClusterName","ClusterDesc","clusterSv","BulkRemoveTermsModal_templateObject","BulkRemoveTermsModal_templateObject1","BulkRemoveTermsModal_templateObject2","BulkRemoveTermsModal_templateObject3","BulkRemoveTermsModal_templateObject5","TermsDropdownController","onViewChange","currentView","onChangeIncludeBranded","includeBranded","onTermsFilter","onSortTerms","showExportModal","setShowExportModal","showBulkRemoveTermsModal","setShowBulkRemoveTermsModal","getTermsCount","termsFiltersSetup","setTermsFiltersSetup","handleOnSortChange","downloadFileToTxt","pageTitle","articleUrl","imagesCount","count","videosCount","videos","iframesCount","iframes","internalLinksCount","internal","externallLinksCount","external","socialCount","social","javascriptCount","js","headersSum","headers","headersCount","pageTechnicalsString","includedFocusterms","notIncludedFocusTerms","ft","requiredCountMin","questionsSting","questions","q","convertedText","Blob","createObjectURL","download","getXlsExportLink","token","getTokenFromCookies","baseUrl","getApiUrl","BaseApi","CA_ENDPOINT","termsFilterHandler","updatedTermsSetup","updatedFilteredTermsArr","tooltipStyle","isNotPublic","viewChangeDropdown","TermsViewDropdownContainer","CheckboxStyledHighlights","highlights","setHighlights","PTag","BulkRemoveTermsBtn","TermsContainer","ExportModalTitle","ExportModalDesc","ExportModalButtonsContainer","faFileSpreadsheet","faFileLines","faGoogle","TermsFilterContainer","customBackground","GroupTermsContainer","Menu","sorters","Sort","faArrowUpArrowDown","SortTxt","isRemovingFocusTerms","AddButton","setShowAddFocusTermModal","ExportBtn","AdjustBtnContainer","GearIcon","faSliders","TermsDropdownController_templateObject","TermsDropdownController_templateObject1","TermsDropdownController_templateObject2","TermsDropdownController_templateObject4","TermsDropdownController_templateObject5","TermsDropdownController_templateObject7","TermsDropdownController_templateObject9","TermsDropdownController_templateObject10","TermsDropdownController_templateObject11","TermsDropdownController_templateObject12","TermsDropdownController_templateObject13","TermsDropdownController_templateObject14","TermsDropdownController_templateObject15","TermsDropdownController_templateObject16","TermsDropdownController_templateObject17","TermsDataController","onFilter","isClustersExpanded","setIsClustersExpanded","termsSearchQuery","setTermsSearchQuery","termsSearchInputValue","setTermsSearchInputValue","secondAntIcon","handleOnClusterClick","filteredSearch","clusterName","termSearchHandler","formatInput","trimmedArr","SearchAndSort","prefix","faMagnifyingGlass","ClustersWrapper","ClustersContainer","expandedClusters","ClusterTooltipSingleRow","ClusterTooltipLabel","ClusterTooltipValue","SingleClusterContainer","activeCluster","TermsDataController_templateObject","TermsDataController_templateObject1","TermsDataController_templateObject2","TermsDataController_templateObject3","TermsDataController_templateObject4","TermsDataController_templateObject5","TermsDataController_templateObject6","TermsDataController_templateObject7","AntdInput","focusTerm","removeTermHandler","removeTerms","termContainerSetup","hoverBackground","fitTermInQuota","quote","startIndex","h5","targetKewyordsOnlyArr","getTwoGreenPercentageColor","percentage","requiredCountMax","competitors","competitor","getSiteName","hostname","snippets","snippet","normalizedScore","source","LowerSection","isAnyFocusTermLink","wikipediaLink","wikidataLink","knowledgeGraphLink","crunchbaseLink","ReferencesWrapper","ReferencesTitle","LinksWrapper","SingleLink","faWikipediaW","TermContainer","TermName","BrandedLabel","CopyIcon","FocusTermsTab_SingleTerm_templateObject","FocusTermsTab_SingleTerm_templateObject1","FocusTermsTab_SingleTerm_templateObject2","FocusTermsTab_SingleTerm_templateObject3","FocusTermsTab_SingleTerm_templateObject4","FocusTermsTab_SingleTerm_templateObject5","FocusTermsTab_SingleTerm_templateObject6","SingleTerm_templateObject7","SingleTerm_templateObject8","SingleTerm_templateObject9","SingleTerm_templateObject10","SingleTerm_templateObject11","TermsDropdowns","includedBranded","setIncludeBranded","setQuery","termsToShow","setTermsToShow","isCopied","setIsCopied","standardTerms","setStandardTerms","queryParam","prepTermsArr","filteredTerms","termsToShowParam","TopicalTermsContainer","focusMode","focusTermsExpanded","CopyButton","TermsDropdowns_templateObject","TermsDropdowns_templateObject1","TermsDropdowns_templateObject2","FocusTermsTab","includedTerms","includeMoreTerms","includeLessTerms","EmptyDataBox","FocusTermsTab_templateObject","LinkSuggestionsDropdownController","isSynced","setIsSynced","isSyncing","setIsSyncing","onLinksSync","getInternalLinkSuggestionsv2","FocusModeBtn","setFocusTermsExpanded","faDownLeftAndUpRightToCenter","faUpRightAndDownLeftFromCenter","FocusModeLabel","ExportIcon","faFileDownload","RefetrchBtnContainer","faSyncAlt","LinkSuggestionsDropdownController_templateObject","LinkSuggestionsDropdownController_templateObject2","LinkSuggestionsDropdownController_templateObject3","LinkSuggestionsDropdownController_templateObject4","SingleSuggestion","customCallback","isRemovingTerm","setIsRemovingTerm","isBookmarked","setIsBookmarked","removeInternalLinkSuggestion","bookmarkInternalLinkSuggestion","TitleAndStar","faStarSolid","faStar","SingleISugesstion_templateObject","SingleISugesstion_templateObject1","SingleISugesstion_templateObject2","SingleISugesstion_templateObject3","SingleISugesstion_templateObject4","SingleISugesstion_templateObject5","InternalLinksSuggestions","isQueried","DropdownsContainer","InternalLinkSuggestions_templateObject","SingleCitation","citation","addDefaultSrc","onError","substring","serps","serp","CommonCitations","commonCitations","SidebarTooltip","SuggestionsDataController","visibleKeywords","updateKeywords","linksDropDownFromSuggestion","showEditor","setShowEditor","hostnameEditor","EditorContainer","FormStyled","updateHostname","InputStyeld","ButtonContainer","isUpdatingHostname","UpdateButton","topMessage","HostnameContainer","HostnameLink","addProtocolToDomain","HostnameLinkBtnContainer","AddNewUrlBtn","ViewDropdownContainer","viewControlls","ViewControllsContainer","SearchAndSortWraper","SearchContainer","SuggestionsDataController_templateObject","SuggestionsDataController_templateObject1","SuggestionsDataController_templateObject3","SuggestionsDataController_templateObject4","SuggestionsDataController_templateObject5","SuggestionsDataController_templateObject6","SuggestionsDataController_templateObject7","SuggestionsDataController_templateObject9","CommonBtn","SuggestionsDataController_templateObject12","SuggestionsDataController_templateObject17","SuggestionsDataController_templateObject19","_templateObject20","_templateObject21","LinkSuggestionsTab","perc","setCurrentView","searchQuery","setSearchQuery","dataArr","setDataArr","initialDataArr","setInitialDataArr","setIsQueried","selectedOption","setSelectedOption","domain","setDomain","isVisiblePopover","setIsVisiblePopover","updateLoading","setUpdateLoading","urlsError","setUrlsError","isFetchingIntLinksSug","onDataFilter","filterDataHandler","formattedArr","customDataArr","foundLinks","n","filteredSelectedLinks","foundLink","calculateUsagePercentage","postLInkSuggestion","initValues","handleRadioChange","submitUrl","apiError","kwArr","SuggestionsBannerContainer","TooltipTitle","TooltipDescription","exportLinkIcon","Pill","StyledPopover","PopoverContentWrapper","PopoverTitle","providedUrl","AddDomainSection","DomainDetails","AddDomainTitle","AddDomainDesc","AddDomainInput","ProvideUrlsSection","ProvideUrlsDetails","ErrorMessageForURL","Dismiss","Update","onOpenChange","LinkSuggestionsTab_templateObject","LinkSuggestionsTab_templateObject1","LinkSuggestionsTab_templateObject2","LinkSuggestionsTab_templateObject3","LinkSuggestionsTab_templateObject4","LinkSuggestionsTab_templateObject6","LinkSuggestionsTab_templateObject7","LinkSuggestionsTab_templateObject8","LinkSuggestionsTab_templateObject9","LinkSuggestionsTab_templateObject10","LinkSuggestionsTab_templateObject11","LinkSuggestionsTab_templateObject12","LinkSuggestionsTab_templateObject14","LinkSuggestionsTab_templateObject15","LinkSuggestionsTab_templateObject16","LinkSuggestionsTab_templateObject18","SingleQuestion","question","aiCopied","setAiCopied","setCreatingPage","isAiGenerating","setIsAiGenerating","justify","faMessageCheck","faFilePlus","QuestionsTab","level","htmlString","string","copiedText","textContent","htmlContent","plainTextContent","copyToClipboardWithHtmlAndText","AddFocusTermModal","showAddFocusTermModal","terms","addFocusTerms","isFocusTermsLoading","handleAddFocusTerms","StyledModal","Desc","TextArea","AddFocusTermModal_templateObject1","AddFocusTermModal_templateObject2","AddFocusTermModal_templateObject3","AddFocusTermModal_templateObject4","FocusTermsTabs","setActiveKey","onChangeTab","SCA_PAGE_FOCUS_TERMS_TAB_OPEN","SCA_PAGE_QUESTIONS_TAB_OPEN","SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN","CommonTabsStyled","tabBarStyle","editorScrolled","TabTitleContainer","totalUsedTerms","totalUsedQuestions","totalUsedSuggestions","CommonTabs","CommonTabPane","FocusTermsTabs_templateObject2","SingleMetrics","tooltipLabel","showTooltip","headingData","StyledLable","StyledIcon","RangeValues","h2","h2Min","h2Max","h3Min","h3Max","internalLinks","internalLinksMin","internalLinksMax","externalLinks","externalLinksMin","externalLinksMax","isWithinRecomendedRange","SingleMetrics_templateObject","SingleMetrics_templateObject1","SingleMetrics_templateObject2","SingleMetrics_templateObject3","ContentScore","scoreCounts","scoreExtended","internalLinksData","externalLinksData","avg","h1value","h1Min","h1Max","h2value","h3value","setViewSuggestionsOption","setLinksDropDownFromSuggestion","isWordCountLoading","isScoreLoading","score","suggestedWordCountLimits","viewSuggestionHandler","shouldShowTooltip","tooltipMsg","cur","openText","scrollToText","anchorTag","scrollIntoView","behavior","countsSetup","lower","upper","paragraphs","paragraphsMin","paragraphsMax","headings","headingsMin","headingsMax","StyleHeadingsTooltipTitle","internalLinksLength","externalLinksLength","StyledLinksTabs","StyledRecommender","StyledRecomentedValue","StyledSuggestionLink","showAsLink","StyledCurrentValue","StyledFontAwesomeIcon","StyledLinksDiv","StyledLinkItem","faArrowUpRightFromSquare","ReactEcharts","grid","series","axisLine","roundCap","lineStyle","progress","startAngle","radius","endAngle","pointer","offsetCenter","itemStyle","axisTick","splitLine","distance","splitNumber","axisLabel","detail","RightSection","ContentScore_templateObject","ContentScore_templateObject1","ContentScore_templateObject2","ContentScore_templateObject5","ContentScore_templateObject6","ContentScore_templateObject7","ContentScore_templateObject8","ContentScore_templateObject9","ContentScore_templateObject10","WordCount","WordCount_templateObject","WordCount_templateObject1","HeaderSection","MiniContainer","ScoreAndWordCount","ProgressStyled","strokeLinecap","gapDegree","gapPosition","MiniTitleContainer","HeaderSection_templateObject","HeaderSection_templateObject1","HeaderSection_templateObject2","HeaderSection_templateObject3","HeaderSection_templateObject5","HeaderSection_templateObject6","HeaderSection_templateObject7","termsForInsertion","termsAssistantSuggestions","overflowY","TermsAssistant_MissingPlacementsBanner_templateObject","dots","setDots","saved","dismissed","savedPlacements","dismissedPlacements","placements","Data","PlacementsInfo","generatePlacmenetsInfo","TermsList_SingleTerm_templateObject","TermsList_SingleTerm_templateObject1","TermsList_SingleTerm_templateObject2","TermsList_SingleTerm_templateObject3","TermsList_SingleTerm_templateObject4","TermsList","termOccurances","TermsSelectionDropdown","_filter","selectedTerms","setSelectedTerms","popoverVisible","setPopoverVisible","showLimitError","setShowLimitEror","fetchTaSuggestions","taSuggestionsLoading","handleCheckboxClick","updatedList","onTermsSearchHandler","onBulkSelectTop20Handler","addCompleteTerms","prepcCompleteTerms","completeTermsLength","prepIncludeMoreTerms","onUncheckAllClickHandler","onTriggerClickHandler","HeadingSection","SearchBox","QuotaInfo","ControllsBar","BulkControllBtn","SingleTermRow","opaque","TermUsage","BtnsContainer","Trigger","TermsSelectionDropdown_templateObject","TermsSelectionDropdown_templateObject1","TermsSelectionDropdown_templateObject2","TermsSelectionDropdown_templateObject3","TermsSelectionDropdown_templateObject4","TermsSelectionDropdown_templateObject6","TermsSelectionDropdown_templateObject7","TermsSelectionDropdown_templateObject8","TermsSelectionDropdown_templateObject9","TermsSelectionDropdown_templateObject11","TermsSelectionDropdown_templateObject12","TermsSelectionDropdown_templateObject13","TermsAssistantRightSidebar","RightSidebar_templateObject","RightSidebar_templateObject1","RightSidebar_templateObject2","RightSidebar_templateObject3","RightSidebar_templateObject4","RightSidebar_templateObject5","SingleCompetitor","contentScore","TopRankingCompetitors","topRankingCompetitorActiveKw","competitorsData","setTopRankingCompetitorsActiveKw","openCompetingFocusTermsDrawer","onSelect","dropdownClassName","DrawersTriggers","changeView","loadingTaSuggestions","setLoadingTaSuggestions","handleTriggerAssistant","finalPrepArr","buttonsConf","faListTree","hoverColor","openCompetitorsHeadingsDrawer","faMagicWandSparkles","tooltipContent","faWrench","faChartSimple","updatedButtonConf","SingleItem","DrawersTriggers_templateObject","DrawersTriggers_templateObject1","Analytics","ContentContainer","Analytics_templateObject","Analytics_templateObject1","KeywordSelector","isSubscriber","isCompetitorsTable","setFilteredCompetitorsData","setActiveKw","setCompetitors","activeKw","handleOnSelectChange","KeywordDropdownWrapper","KeywordSelector_templateObject","CompetitorsTable","filteredCompetitorsData","schemaTypesList","allSchemasCount","nullCount","selectedSchema","setSelectedSchema","setShowCompetitorTermsTableDetail","isSmallScreen","setIsSmallScreen","allowScroll","setAllowScroll","onWindowResize","innerWidth","average","reFormatSchemaType","schema","selectedSchemaValue","filteredItems","graph","graphItem","fixed","ellipsis","PageUrlWrapper","lineHeight","dr","parseFloat","toFixed","DRWrapper","schemaLength","schemaItemsList","BlueTextWithUnderline","ULStyled","LinksContainer","paddingRight","LinkWrapper","StyledAnchor","h1Count","h2Count","h3Count","TypesSchemaFilterWrapper","SchemaFilterTitle","SchemaFilterWrapper","SchemaFilter","scroll","y","_dir","CompetitorsTable_templateObject","CompetitorsTable_templateObject1","CompetitorsTable_templateObject2","CompetitorsTable_templateObject3","CompetitorsTable_templateObject4","CompetitorsTable_templateObject5","CompetitorsTable_templateObject6","CompetitorsTable_templateObject7","CompetitorsTable_templateObject8","CompetitorsTable_templateObject9","CompetitorsTable_templateObject10","CompetitorsTable_templateObject11","CompetitorsTable_templateObject12","CompetitorsDetail","competitorSchemaObject","competitorTitle","competitorUrl","competitorSchemaGraphIdx","formats","renderSchemaData","dataObj","LargeLine","mainLebel","mainValue","SchemaLabel","SchemaValue","urlValidationRegex2","isValid","utc","BackArrowContainer","SchemaContainer","SchemaHeader","SchemaPageTitle","context","CompetitorsDetail_templateObject","CompetitorsDetail_templateObject1","CompetitorsDetail_templateObject2","CompetitorsDetail_templateObject3","CompetitorsDetail_templateObject4","CompetitorsDetail_templateObject5","CompetitorsDetail_templateObject6","CompetitorsDetail_templateObject7","CompetitorsDrawerTab","setSchemaTypesList","setAllSchemasCount","setNullCount","showCompetitorTermsTableDetail","squareTooltip","IsRanking","IsNotRanking","focusTermsTooltip","CompetingFocusTermsDrawer","isCompetingFocusTermsDrawerOpen","closeCompetingFocusTermsDrawer","isOpeningKwSuggestionsFromContentResearch","setIsOpeningKwSuggestionFromContentResearch","selectedKeyword","setSelectedKeyword","selectedCompTabKw","setSelectedCompTabKw","isHovered","setIsHovered","maxElemHeight","setMaxElemHeight","allRef","keywordSuggestionsRef","elementsArray","elementsWidthArr","exportSingleNode","node","today","date","getFullYear","getMonth","getDate","html2canvas","then","canvas","toDataURL","onTabChange","schemaCountsHandler","competitorsTypes","countOccurrences","inputArray","counts","prototype","hasOwnProperty","call","afterVisibleChange","focusTermsGridData","TitleStyled","tabPosition","overflowX","Subtitle","data-html2canvas-ignore","SectionHeader","sites","Rank","Site","rotate","wrap","contentScores","focusTermUsageBySites","Square","keywordSuggestionsGridData","keywordSuggestionsUsageBySites","CompetingFocusTermsDrawer_templateObject","CompetingFocusTermsDrawer_templateObject1","CompetingFocusTermsDrawer_templateObject2","CompetingFocusTermsDrawer_templateObject3","CompetingFocusTermsDrawer_templateObject4","CompetingFocusTermsDrawer_templateObject5","CompetingFocusTermsDrawer_templateObject6","CompetingFocusTermsDrawer_templateObject7","CompetingFocusTermsDrawer_templateObject9","CompetingFocusTermsDrawer_templateObject10","CompetingFocusTermsDrawer_templateObject11","NewContentIdeaForm","drawerVisible","usaCode","selectedCountry","setSelectedCountry","onFormSubmit","topic","loadContentIdeasData","SCA_PAGE_CONTENT_IDEAS_GENERATE","SingleContentIdea","setConvertedText","newLineIndex","textWithoutLeadingSpace","firstTitle","breakFileName","fileName","faDownload","SCA_PAGE_CONTENT_IDEA_DOWNLOAD","SCA_PAGE_CONTENT_IDEA_COPY","CopyOutlined","ContentIdeas","csvModel","wordsArray","CsvDownloader","datas","filename","displayName","ExportOutlined","ContentIdeasDrawer","contentIdeas","setDrawerVisible","clearContentIdeas","setIsOpenContentGeneratorDrawer","SimilarKeyword","isIncluded","OverviewPage","addToLoadingArray","loadingArray","onRemoveKeywordFinish","ContentResearchDrawer","keywordDetail","isContentResearchDrawerOpen","closeContentResearchDrawer","getKeywordDetail","removeFromLoadingArray","countryName","similarKeywordsPageNumber","setSimilarKeywordsPageNumber","similarKeywordsPageSize","similarKeywordsData","setSimilarKeywordsData","similarKeywordsList","setSimilarKeywordsList","topCompetitorsData","setTopCompetitorsData","rankingPotentialData","setRankingPotentialData","handleFilterRenderData","dataArray","pageNumber","targetKwArray","similarKeywordsFormattedData","isKwIncluded","similarKeywords","onPaginationChange","relevanceData","competition","typicalTop10","averageContentScores","averageDr","averageWordCount","readAbility","averageReadability","SimilarKeywordConfig","BarChartColumn","numeral","PageTitle","skeletonMarginRight","totalSearchResults","rankingPotential","xAxis","svTrend","interval","formatter","rich","month","year","yAxis","volume","areaStyle","symbolSize","symbol","MiddleContainer","readability","Pagination","showSizeChanger","defaultPageSize","showQuickJumper","termsGrid","ContentResearchDrawer_templateObject","ContentResearchDrawer_templateObject1","ContentResearchDrawer_templateObject2","ContentResearchDrawer_templateObject3","ContentResearchDrawer_templateObject4","ContentResearchDrawer_templateObject5","ContentResearchDrawer_templateObject6","ContentResearchDrawer_templateObject7","ContentResearchDrawer_templateObject8","ContentResearchDrawer_templateObject9","ContentResearchDrawer_templateObject10","KeywordsDrawer","isOpenKeywordsDrawer","isDrawerFromCa","KeywordDetailContent","TechnicalsViewSwitcher","TechnicalsSwitcherContainer","ViewSwitcher_templateObject","PageSpeedIndex","refetchArticle","refetchPage","SpeedIndexContainer","psiMetrics","avgSpeedIndex","SpeedIndexDot","LastFetchContainer","updatedAt","faRotateRight","isInitialPageLoad","isTechnicalsDataLoading","PageSpeedIndex_templateObject","PageSpeedIndex_templateObject1","PageSpeedIndex_templateObject2","PageSpeedIndex_templateObject3","TechnicalScore","technicalsMsgColorMap","technicalScore","TitleAndWordCount","TechnicalScore_templateObject","TechnicalScore_templateObject1","TechnicalScore_templateObject2","TechnicalScore_templateObject3","auditLoader","setAuditLoader","onPageAuditPopoverVisible","setOnPageAuditPopoverVisible","contentAuditStore","loadContentAudit","setNewRecordId","antIconSecond","onRunPageAudit","countryCodeToUse","getId","shouldUseHeadlessBrowser","onPageAuditDetails","TopSeactionContainer","PopoverWrapper","getUniqueKeywords","existingValues","getFieldsValue","AntdCheckbox","PopoverKwContainer","PopoverBtnContainer","RunPageAuditBtn","faFileChartColumn","BtnText","Technicals_HeaderSection_templateObject","Technicals_HeaderSection_templateObject1","Technicals_HeaderSection_templateObject3","Technicals_HeaderSection_templateObject4","Technicals_HeaderSection_templateObject5","Technicals_HeaderSection_templateObject6","HeaderSection_templateObject8","AnalyticsCollapseCard","descriptionColor","colTitle1","colTitle2","sortKey","colTitle3","colTitle4","dataRenderer","isCollapse","defaultActive","plan","warningBar","setPageNumber","checkData","setCheckData","isFilterOpened","setIsFilterOpened","sortOrder","setSortOrder","formatData","setFormatData","sortData","sortBy","bordered","expandIcon","CaretUpFilled","faCaretUp","defaultCurrent","faFilter","ChevronUp","disabledTooltip","SchemaModal","setShowModal","dataList","setExpanded","dataForDisplay","ModalContentWrapper","MainContainer","potentialAction","z","wordBreak","queryInput","SchemaModal_templateObject","SchemaModal_templateObject1","SchemaModal_templateObject2","SchemaModal_templateObject3","SchemaModal_templateObject4","SchemaModal_templateObject5","SchemaModal_templateObject6","TechnicalsData","showMissingAltText","setShowMissingAltText","isActiveInternalBrokenLinks","setIsActiveInternalBrokenLinks","isActiveExternalBrokenLinks","setIsActiveExternalBrokenLinks","showSchemaModal","setShowSchemaModal","internalLinksFilters","statusCode","SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN","uiFormatImageSize","sizeArray","brokenHeaders","translateWord","getMissingAltTotal","imagesFilter","SCA_PAGE_IMAGES_SHOW_MISSING_ALT","externalLinksFilters","SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN","displayStatusCode","displayFollowCode","followCode","jsonLd","metaSummary","meta","field","statusColor","suggestionColor","getStatusColor","Image","getMissingAltText","WarningMiniBar","Video","video","visitable","ExternalLink","generateInternalLinksDesc","msgArr","labelColor","getInternalBrokenLinksCount","getInternalRedirectsCount","anchor","generateExternallLinksDesc","getExternalBrokenCount","getExternalRedirectsCount","List","ButtonLink","linkgraphDomain","Technicals","DataContainer","Technicals_templateObject","Technicals_templateObject1","compListCollapsed","HeadingsTree","activeCompetitor","setShowBulkAddContentBtn","showBulkAddContentBtn","setCheckedCount","checkedCount","setCheckedIndexData","checkedIndexData","setCopiedHeadings","addedHeadings","setAddedHeadings","copiedHeading","setCopiedHeading","tag","setFilters","onCheckboxChecked","curFilters","checkboxClickHandler","headingContent","headingTag","handleCopyClick","updatedCopiedHeadings","textToAdd","headingType","cleanText","curAddedHeadings","updatedAddedHeading","addHeadingsHandler","FiltersWrapper","FiltersContainer","headingsHierarchy","BulkAddAction","faSquareCheck","ActionsWrapper","AddHeadings","CopyAction","CancelAction","FiltersTree","SingleHeading","itemId","HeadingTag","HeadingText","Copy","InsertText","calculateIndent","getTopMargin","calculateFontSize","generateColor","HeadingsTree_templateObject","HeadingsTree_templateObject1","HeadingsTree_templateObject2","HeadingsTree_templateObject3","HeadingsTree_templateObject4","HeadingsTree_templateObject5","HeadingsTree_templateObject6","HeadingsTree_templateObject7","HeadingsTree_templateObject8","HeadingsTree_templateObject9","HeadingsTree_templateObject10","HeadingsTree_templateObject11","HeadingsTree_templateObject12","HeadingsTree_templateObject13","CompetitorHeadingsDrawerContent","setCompListCollapsed","setCheckedHeadingsWithTags","checkedHeadingsWithTags","setActiveCompetitor","updatedCompetitors","currentArticleOutline","generateHeadingOutline","getBlocksAsArray","outline","lastIndexOf","isCurrentArticleOutline","faBars","faBarsSort","competitorsList","CompetitorsList","CurrentArticleOutline","Order","NameLogoUrl","Name","Url","Logo","NameAndUrl","Headingoutlines","DrawerContent_templateObject","DrawerContent_templateObject1","DrawerContent_templateObject2","DrawerContent_templateObject3","DrawerContent_templateObject4","DrawerContent_templateObject5","DrawerContent_templateObject6","DrawerContent_templateObject7","DrawerContent_templateObject8","DrawerContent_templateObject9","DrawerContent_templateObject10","DrawerContent_templateObject11","DrawerContent_templateObject12","DrawerContent_templateObject13","CompetitorsHeadingsDrawer","isCompetitorsHeadingsDrawerOpen","closeCompetitorsHeadingsDrawer","SidebarContent","showTechnicals","setShowTechincals","TechnicalsContainer","LoadingBannerContainer","LongLoadingBanner","isFetchingTargetKw","SidebarContent_templateObject","SidebarContent_templateObject1","SidebarContent_templateObject2","SidebarContent_templateObject3","SidebarContent_templateObject4","RightSidebarV2","onResizeCallback","isHidden","topPosition","setTopPosition","sideBarRef","sidebarUpdate","handleScroll","pageYOffset","passive","_document_querySelector","Resizable","onResize","dir","elRef","enable","topRight","bottomRight","bottomLeft","topLeft","analyzingError","ErrorView","PageEditor","rootStore","loadAiWriterHistory","refetchOneClickDraftResultForArticleCreation","isExportingPageLoader","setIsPublic","setFocusTermsClassNames","setSideBarWidth","setViewers","emailAddress","resultId","triggerFreddySurvey","FREDDY_EVENT_SCA_ARTICLE_CREATED","updateFocusTermsState","sortedFocusTerms","internalLinksClusters","variations","finalData","parts","prepareFinalTerms","regex","multiWordCountRegex","mapFocusTerms","dbRef","firebase","database","snapshot","exists","catch","console","onDisconnect","cancel","setRepollsAllowed","focusedState","moveFocusToStart","afterSelectionMove","firstKey","formattedEditorState","setIsInitialEditorStateFetched","loadProject","getAllProjects","setRefechForBulkArticleCreation","getTime","loadPages","activeProjectId","initialLoadPage","setNewPage","headerStore","setComponent","spend","quotaProps","MainLoader","module","exports"],"sourceRoot":""}
')) {\n return 'h5';\n }\n if (text.startsWith('')) {\n return 'h6';\n }\n\n return 'p';\n };\n\n const checkKey = e => {\n e = e || window.event;\n\n if (e.keyCode == '38') {\n // up arrow\n if (linkActiveTerm?.order == 0) return;\n onArrowClickHandler('prev');\n } else if (e.keyCode == '40') {\n // down arrow\n if (linkActiveTerm?.order == (totalOccurances > 0 ? totalOccurances - 1 : 0)) return;\n onArrowClickHandler('next');\n } else if (e.keyCode == '37') {\n // left arrow\n } else if (e.keyCode == '39') {\n // right arrow\n }\n };\n\n document.onkeydown = checkKey;\n\n const onBlockStatusChange = (action: 'accept' | 'dismiss' | 'undo') => {\n let prepDataArr = toJS(getstagingLinkSuggestions);\n prepDataArr = prepDataArr?.map(item => {\n if (item.itemIndex == highlightedNodeId) {\n return {\n ...item,\n ...(action == 'accept' && {status: 'accepted'}),\n ...(action == 'dismiss' && {status: 'dismissed'}),\n ...(action == 'undo' && {status: 'default'}),\n };\n } else {\n return item;\n }\n });\n setStagingLinkSuggestions([...prepDataArr]);\n };\n\n return \n {blocksArray?.map((block, idx) => {\n const regExp = /(<\\/?\\w+(?:(?:\\s+\\w+(?:\\s*=\\s*(?:\".*?\"|'.*?'|[^'\">\\s]+))?)+\\s*|\\s*)\\/?>)/gim;\n const parser = new DOMParser();\n const doc = parser.parseFromString(block.suggestion, 'text/html');\n // Find elements with classname 'hero'\n const elements = doc.querySelectorAll('.linkInsertionChange');\n const suggestionList = [];\n // Extract innerText from each element\n elements.forEach((ele:any)=>{\n suggestionList.push({keyword: ele.innerText, status: 'default'});\n });\n\n if (block.isSuggestion) {\n return (\n <>\n term.keyword?.replaceAll(' ', '-')+`${block?.itemIndex}`)), block.status)}>\n {showOriginalBlockId != null && showOriginalBlockId == block.itemIndex ?\n setShowOriginalBlockId(null)}>\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n\n \n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex ?\n \n \n ORIGINAL\n {block.status !== 'default' && block.status !== 'dismissed' ?\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original : null}\n \n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n \n :\n null}\n \n\n );\n } else {\n return \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n ;\n }\n })}\n\n ;\n };\n\n return \n \n {\n if (updatingTa) return false;\n setIsLinkActive(false);\n clearAllTaData();\n setLinksForInsertion([]);\n }} style={{cursor: 'pointer'}}/>\n {content.title} \n \n \n {blocksRenderer(getstagingLinkSuggestions)}\n ;\n});\n\nconst Wrapper = styled.div`\n position: relative;\n\n &::before {\n background-color: #24262a;\n content: '';\n height: 25px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: 1;\n }\n\n &::after {\n background-color: #fff;\n border-radius: 10px 10px 0 0;\n content: '';\n height: 5px;\n left: 0;\n max-width: 100%;\n position: absolute;\n top: 20px;\n width: 100%;\n z-index: 1;\n }\n padding-top: 25px;\n`;\n\nconst Heading = styled.div`\n display: flex;\n background-color: #fff;\n padding: 19px 30px;\n align-items: center;\n cursor: default;\n`;\nconst Title = styled.div`\n font-size: 20px;\n font-weight: 500;\n color: #121212;\n margin-left: 20px;\n line-height: 20px;\n`;\nconst TextContainer = styled.div`\n padding-top: 45px;\n padding-bottom: 170px;\n width: 65%;\n max-width: 90%;\n text-align: left;\n height: calc(100vh - 170px);\n overflow-y: auto;\n padding-left:10%;\n padding-right:40px;\n color: rgba(0, 0, 0, 0.85);\n border-right: 1px solid lightgray;\n .linkInsertionChange {\n text-decoration: underline;\n }\n p a{\n color: rgba(0, 0, 0, 0.85);\n }\n .default p span a{\n color: #1890ff;\n }\n .accepted{\n span a{\n text-decoration: underline;\n color: #1FAC47 !important;\n text-decoration-color: #1FAC47 !important;\n\n }\n }\n .dismissed{\n span a{\n text-decoration: underline;\n color: #F44343 !important;\n text-decoration-color: #F44343 !important;\n }\n }\n ::-webkit-scrollbar {\n width: 5px;\n }\n\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #4E515680;\n border-radius: 5px;\n }\n\n \n`;\n\nconst SingleBlockWithSuggestion = styled.span<{type: string; status: 'default' | 'accepted' | 'dismissed'; currNodeId: number; showingOriginalBlock: boolean}>`\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n display: block;\n position: relative;\n\n\n &[data-block-index='${p => p.currNodeId}'], &.originalBlock {\n width: calc(100% + 60px) !important;\n padding-left: 40px;\n padding-right: 20px;\n padding-top: 25px;\n padding-bottom: 25px;\n position: relative;\n box-shadow: 1px 4px 4px rgba(211, 83, 119, 0.05);\n background: #fff;\n margin-left: -40px;\n margin-right: -40px;\n\n &::before {\n left: 10px;\n top: 25px;\n }\n\n &::after {\n position: absolute;\n display: block;\n content: '';\n top: 0;\n left:0;\n width: 100%;\n height: 100%;\n \n }\n\n\n .termsAssistantFocusTerm {\n background: ${p => p.status == 'accepted' || p.status == 'default' ? `linear-gradient(89.25deg, ${opaqueColor('#1FAC47', 20)} 2.9%, ${opaqueColor('#1FAC47', 20)} 2.91%, ${opaqueColor('#3FD369', 20)} 96.24%)` : `linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%)`};\n text-decoration: none !important;\n text-decoration-color: ${p => p.status == 'accepted' || p.status == 'default' ? '#1FAC47' : '#F44343'} !important;\n\n }\n }\n &[data-block-index='${p => p.currNodeId}'] {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '16px 16px 0 0' : '16px'};\n border: 1px dashed ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : '#2D6CCA'};\n }\n }\n\n &.originalBlock {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n margin-top: -20px;\n &::after {\n border-radius: ${p => p.showingOriginalBlock ? '0 0 16px 16px' : '16px'};\n border: 1px dashed #2D6CCA;\n }\n }\n\n &::before {\n content: '${p => p.type}';\n position: absolute;\n left: -30px;\n top: 0px;\n font-size: 12px;\n font-weight: 600;\n color: #A3A4A4;\n }\n .termsAssistantFocusTerm {\n color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'};\n text-decoration: ${p => p.status == 'dismissed' ? 'line-through' : 'none'};\n text-decoration-color: ${p => p.status == 'accepted' ? '#1FAC47' : p.status == 'dismissed' ? '#F44343' : 'inherit'} !important;\n }\n`;\n\nconst BlockWrapper = styled.div`\n pointer-events: none;\n img {\n width: 100%;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styles from './content-editor.module.scss';\nimport {EditorSection} from './EditorSection/EditorSection';\n// import {FocusTermsPopups} from './FocusTermsPopups';\nimport {TopSection} from './TopSection/TopSection';\nimport styled from 'styled-components';\nimport {TextSuggestions} from '../RightSidebar/v2-sidebar/Analytics/TermsAssistant/TextSuggestions';\nimport {TextSuggestionsLinks} from '../RightSidebar/v2-sidebar/Analytics/LinkAssistant/TextSuggestionsLinks';\n\n\ninterface Props {\n // allRef: any;\n newPage: any;\n htmlToDraft: any;\n}\n\nexport const LeftSide = observer(({newPage, htmlToDraft}: Props) => {\n const {contentOptimizer} = useStore('');\n const {currentPage} = contentOptimizer;\n const {\n sideBarWidth,\n isSideBarHidden,\n isTaActive,\n isLinkActive,\n } = currentPage;\n\n return \n \n ;\n});\n\n\nconst LeftSideContainer = styled.div<{isNewPage?: boolean; isSideBarHidden?: boolean; sideBarWidth?: string; isLinkSuggestionActive?: boolean}>`\n overflow: hidden;\n text-align: -webkit-center; \n transition: all .3s ease;\n width: 100%;\n max-width: ${p => p.isLinkSuggestionActive ? '100%' : !p.isNewPage ? !p.isSideBarHidden ? `calc(100% - ${p.sideBarWidth} + 15px)` : '100%' : '100%'};\n`;\n","import {WarningOutlined} from '@ant-design/icons';\nimport React from 'react';\nimport styles from './index.module.scss';\n\nexport const Error: React.FC = () => {\n return (\n \n An error has occurred, please try again later.
\n \n );\n};\n","import {FocusTermClusteredType} from '@/store/content-optimizer/currentPage';\nimport {Table} from '@/components/common-components/components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {filterDataInMemory} from '@/utils/filter-data';\nimport styles from './style.module.scss';\nimport {formatLargeNumber} from '@/utils/number';\nimport {ColumnType} from 'antd/es/table';\n\ninterface Props {\n cluster: FocusTermClusteredType;\n isClusterRemoving: boolean;\n}\n\nexport const SingleCluster = observer(({\n cluster,\n isClusterRemoving,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n enum SORT_DIRECTION {\n ascend = 'ascend',\n descend = 'descend'\n }\n\n const [tableData, setTableData] = useState([]);\n const [sortField, setSortField] = useState('requiredCountMin');\n const [sortDirection, setSortDirecion] = useState(SORT_DIRECTION.descend);\n\n\n const removeClusterHandler = (term: string) => {\n if (currentPage.isBulkRemovingCluster) return;\n currentPage.bulkRemoveTerms([term], 'term', cluster.title);\n };\n\n const setTerms = () => {\n const {dataFiltered} = filterDataInMemory(cluster?.focusTerms, '', [], [], 1, cluster?.focusTerms.length, sortField, sortDirection);\n setTableData(dataFiltered);\n };\n\n const handleTableChange = async (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortFieldName} = column || {};\n\n setSortField(sortFieldName);\n setSortDirecion(order);\n if (order) {\n const {dataFiltered} = filterDataInMemory(tableData, '', [], [], 1, tableData.length, sortFieldName, order);\n setTableData(dataFiltered);\n } else {\n setTableData(cluster?.focusTerms);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [cluster]);\n\n type ExtendedColumnsType = ColumnType & {defaultSortOrder?: 'ascend' | 'descend'; sortFieldName?: string};\n\n const tableColumns = (removingTerms: boolean): ExtendedColumnsType[] => {\n return [\n {\n title: 'TOPICAL TERM',\n dataIndex: 'name',\n key: 'name',\n align: 'left' as 'left',\n width: 250,\n render: (_, record) => {\n return \n {record.name}\n {record?.foundIn && record.foundIn.map((item, idx) => {\n return {item} ;\n })}\n {record?.isBranded && {'branded'} }\n ;\n },\n },\n {\n title: 'MSV',\n dataIndex: 'sv',\n key: 'sv',\n align: 'right' as 'right',\n sortFieldName: 'sv',\n width: 60,\n sorter: true,\n render: (_, record) => {\n return {formatLargeNumber(record.sv)};\n },\n },\n {\n title: 'USAGE',\n dataIndex: 'requiredCountMin',\n key: 'requiredCountMin',\n defaultSortOrder: 'descend',\n align: 'right' as 'right',\n width: 60,\n sortFieldName: 'requiredCountMin',\n sorter: true,\n render: (_, record) => {\n return {`${record.usedCount}/${record.idealCountMax}`};\n },\n },\n {\n title: 'REMOVE',\n dataIndex: 'name',\n key: 'name',\n align: 'right' as 'right',\n width: 80,\n render: (_, record) => {\n return removeClusterHandler(record.name)}>\n ;\n },\n },\n\n ];\n };\n\n return \n >;\n}\n\nexport const BulkRemoveTermsModal = observer(({\n isModalOpen,\n setIsModalOpen,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n const [clusteredTerms, setClusteredTerms] = useState([]);\n const [clusterToRemove, setClusterToRemove] = useState('');\n\n const setTerms = () => {\n const clusterTerms = toJS(currentPage?.analytics?.clusters);\n const tempArr = [];\n\n setClusteredTerms(toJS(clusterTerms));\n\n if (currentPage.focusTermsSorter.key) {\n clusterTerms?.forEach((item, id) => {\n let tempCluster = [];\n\n tempCluster = item?.focusTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n\n tempArr.push({\n ...clusterTerms[id],\n focusTerms: tempCluster,\n });\n });\n\n\n setClusteredTerms(tempArr);\n }\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n const removeClusterHandler = async (e, clusterTitle: string) => {\n e.preventDefault();\n e.stopPropagation();\n const clusterToRemove = clusteredTerms?.find(cluster => cluster.title === clusterTitle);\n const termsArr = clusterToRemove?.focusTerms?.map(term => term.name);\n setClusterToRemove(clusterTitle);\n try {\n await currentPage.bulkRemoveTerms(termsArr, 'cluster', clusterTitle);\n } catch (e) {\n setClusterToRemove('');\n } finally {\n setClusterToRemove('');\n }\n };\n\n return Bulk Remove Topical Terms \n \n {clusteredTerms?.filter(cluster => cluster.focusTerms?.length > 0)?.map((cluster, idx) => {\n return \n {cluster.title} \n {`(Terms: ${cluster.focusTerms?.length}, MSV: ${formatLargeNumber(cluster.clusterSv)})`} \n }\n extra={ removeClusterHandler(e, cluster.title)}>\n }>\n \n ;\n })}\n \n setIsModalOpen(false)}>Close \n \n \n\n\n ;\n});\n\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 5px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\n\nconst ClusterHeader = styled.div`\n display: flex;\n align-items: baseline;\n`;\nconst ClusterName = styled.div`\n font-weight: 500;\n color: #121212;\n`;\nconst ClusterDesc = styled.div`\n font-size: 12px;\n color: #4E5156;\n margin-left: 5px;\n`;\n\nconst CollapseStyled = styled(Collapse)`\n // background: #fff;\n border: none;\n max-height: calc(75vh - 185px);\n overflow-y: auto;\n\n .ant-collapse-content {\n border-top: 0px solid transparent;\n background-color: #fff;\n }\n\n .ant-collapse-item {\n border-radius: 10px !important;\n margin-bottom: 10px;\n border: 1px solid #E8E8E8;\n background-color: #fff;\n }\n\n .ant-collapse-content-box {\n padding-top: 0px;\n }\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faArrowUpArrowDown, faSliders} from '@fortawesome/pro-regular-svg-icons';\nimport {faFileArrowDown, faFileLines, faFileSpreadsheet} from '@fortawesome/pro-light-svg-icons';\nimport {faPlus, faTrash} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Dropdown, Radio, Tooltip, Spin, Divider, Menu} from 'antd';\nimport {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport {Modal} from '@/components/common-components';\nimport {faGoogle} from '@fortawesome/free-brands-svg-icons';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport {BulkRemoveTermsModal} from '../BulkRemoveTermsModal/BulkRemoveTermsModal';\nimport {toJS} from 'mobx';\nimport {useStore} from '@/store/root-store';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface TopicalProps {\n onViewChange?: Dispatch>;\n onChangeIncludeBranded?: Dispatch>;\n onTermsFilter?: Dispatch>;\n includeBranded: boolean;\n currentView?: 'clusters' | 'completion';\n store: CurrentPageStore;\n onSortTerms?: () => void;\n}\n\n\nexport const TermsDropdownController = observer(({onViewChange, currentView, store, onChangeIncludeBranded, includeBranded, onTermsFilter, onSortTerms}: TopicalProps) => {\n const {Group} = Radio;\n const antIcon = \n e.stopPropagation()}>\n onViewChange(e.target.value)} style={{display: 'flex', flexDirection: 'column'}}>\n Editor settings: \n currentPage?.setHighlights(e.target.checked)}>Enable Terms Highlighting in the Editor \n Terms recommendations: \n onCheckboxClicked(e.target.checked)}>Include Branded Terms \n\n \n {isNotPublic && setShowBulkRemoveTermsModal(true)}> }\n \n ;\n\n return \n setShowExportModal(false)}>\n Export Content Brief \n Export a brief with the SEO and Content data for this article (Meta Data, Word Count, Focus Terms, questions, Link Suggestions, etc.) \n \n setShowExportModal(false)}>Close \n \n window.open(getXlsExportLink(), '_self')}>\n \n downloadFileToTxt()}>\n \n exportToGoogleDocs()} disabled={exportToDocsLoading}>\n {exportToDocsLoading ? \n \n \n \n \n \n {Object.keys(termsFiltersSetup).map((item, idx) => {\n return \n termsFilterHandler(e.target.checked, item)}>\n {getTermsCount(termsFiltersSetup[item].type)}\n \n ;\n })}\n \n \n \n \n {sorters.map((item, index) => (\n handleOnSortChange(item)} key={index}>{item.label} \n ))}\n \n }>\n \n Sort \n \n \n \n\n {store?.isRemovingFocusTerms && \n currentPage.setShowAddFocusTermModal(true)}>\n \n \n \n\n {isNotPublic && setShowExportModal(true)}>\n }\n\n \n \n \n \n \n \n \n \n ;\n});\n\n// TOPICAL TERMS STYLED COMPONENTES\nconst GearIcon = styled.a`\n height: 14px;\n cursor: pointer;\n margin-top: auto;\n margin-bottom: auto;\n display: block;\n`;\nconst GroupTermsContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 6px;\n`;\n\nconst TermsContainer = styled.div`\n display: flex;\n flex-direction: column;\n background-color: transparent;\n padding: 10px 10px;\n background-color: #2D2F34;\n border-radius: 5px 5px 0 0;\n`;\n\nconst ExportBtn = styled(Button)`\n background: transparent;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: auto;\n margin-right: 0px;\n padding: 7px 10px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst AdjustBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n padding-bottom: 5px;\n cursor: default;\n`;\n\n\nconst TermsViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n padding: 12px 20px;\n border-radius: 17px;\n margin-top: 10px;\n width: 232px;\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n// margin-left: 3px !important;\n display: flex;\n align-items: flex-start;\n font-weight: 500 !important;\n margin-right: 8px;\n\n .ant-checkbox-inner {\n width: 14px;\n height: 14px;\n padding: 7px;\n border-radius: 4px !important;\n ::after {\n top: 47% !important;\n left: 18.5% !important;\n }\n }\n\n .ant-checkbox {\n padding-right: 0px !important;\n padding-left: 0px !important;\n }\n\n span {\n padding-right: 1px;\n padding-left: 1px;\n font-size: 13px;\n }\n`;\n\nconst PTag = styled.p`\nmargin-left: 10px;\nmargin-bottom: 0px !important;\n`;\n\nconst CheckboxStyledHighlights = styled(CheckboxStyled)`\nmargin-bottom: 4px;\n`;\n\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n margin-bottom:5px;\n`;\n\n\nconst ExportModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n\nconst ExportModalDesc = styled.div`\n color: #4E5156;\n`;\n\nconst ExportModalButtonsContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst BulkRemoveTermsBtn = styled.div`\n cursor: pointer;\n margin-top: 6px;\n font-weight: 500;\n`;\nconst TermsFilterContainer = styled.div`\n display: flex;\n justify-content: space-between;\n width: 103%;\n border-radius: 0px 4px 4px 0px;\n margin-left: -10px;\n padding: 0px 9px 10px 15px;\n`;\n\nconst AddButton = styled.div`\n margin-left: 6px;\n cursor: pointer;\n`;\n\nconst Sort = styled.div`\n display: flex;\n align-items: center;\n gap: 4px;\n cursor: pointer;\n`;\n\nconst SortTxt = styled.span`\n color: var(--Text-gray-light, var(--Gray-light, #E8E8E8));\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {formatLargeNumber} from '@/utils/number';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip, Input as AntdInput} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react-lite';\nimport {ChangeEvent, useState} from 'react';\nimport styled from 'styled-components';\nimport {faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\n\ninterface Props {\n store: CurrentPageStore;\n onFilter: (query: string[]) => void;\n}\nexport const TermsDataController = observer(({\n store,\n onFilter,\n}: Props) => {\n const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n\n const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n return \n \n \n \n {store?.isAnalyzing ? : \n {toJS(store.analytics?.clusters)?.map((cluster, id) => {\n return \n \n Terms in cluster: \n {cluster.focusTerms?.length} \n \n \n Monthly Search Volume: \n {formatLargeNumber(cluster.clusterSv)} \n \n }>\n item.trim() === cluster.title).length > 0}\n onClick={() => handleOnClusterClick(cluster.title)}>{`#${cluster.title} - ${cluster.focusTerms?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n \n ;\n});\n\nconst ClusterTooltipSingleRow = styled.div`\n display: flex;\n justify-content: space-between\n`;\nconst ClusterTooltipLabel = styled.div`\n font-size: 12px;\n font-weight: 400;\n color: #E8E8E8;\n`;\n\nconst ClusterTooltipValue = styled.div`\n font-size: 12px;\n font-weight: 500;\n color: #FFFFFF;\n`;\n\nconst Wrapper = styled.div`\n margin-bottom: 15px;\n border-radius: 8px;\n background: #282B2F;\n box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.02);\n padding: 10px;\n`;\nconst SearchAndSort = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\nconst ClustersWrapper = styled.div`\n display: flex;\n`;\nconst ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n display: flex;\n flex-wrap: wrap;\n\n height: ${p => p.expandedClusters ? 'auto' : '25px'};\n overflow: hidden;\n`;\n\nconst SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n border-radius: 60px;\n padding: 3px 8px;\n width: auto;\n height: 20px;\n font-size: 11px;\n margin-right: 6px;\n margin-bottom: 6px;\n cursor: pointer;\n\n &:hover {\n background-color: #4B4D51 !important;\n }\n`;\n\nconst InputStyled = styled(AntdInput)`\n height: 32px;\n margin-bottom: 5px;\n background: #282B2F;\n border-color: transparent !important;\n .ant-input {\n margin-left: 7px;\n background: #282B2F;\n color: white !important;\n color: var(--Text-gray, var(--Gray, #A3A4A4));\n font-family: Inter;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n }\n .ant-input-affix-wrapper {\n border: none !important;\n }\n &:hover{\n box-shadow: none !important;\n border-color: transparent !important;\n }\n &:focus{\n box-shadow: none !important;\n }\n`;\n","import {useState} from 'react';\nimport {faArrowDown, faCheck, faTrash} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport styles from '../../style.module.scss';\nimport {\n costPerClickFormatter,\n searchVolumeFormatter,\n isScaPublicPage,\n} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/LeftSide/EditorSection/content-editor/utils';\nimport {\n Divider,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport {NextImg} from '@/utils/nextImg';\n\nimport {getTwoGreenPercentageColor} from '@/utils/colors';\nimport classNames from 'classnames';\nimport {useTranslation} from 'next-i18next';\nimport {CurrentPageStore, FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {getDomain, getSiteName} from '@/utils/url';\nimport {isNil} from 'lodash';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport styled from 'styled-components';\nimport {faWikipediaW} from '@fortawesome/free-brands-svg-icons';\n\ninterface Props {\n focusTerm: FocusTermModel;\n i: number;\n store: CurrentPageStore;\n}\n\nexport const SingleTerm = observer(({focusTerm, i, store}: Props) => {\n const {t} = useTranslation('landing-page-optimizer');\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemoving, setIsRemoving] = useState(false);\n\n const antIcon = \n Topical term
\n {focusTerm.name}
\n \n {focusTerm.sv !== undefined && focusTerm.sv !== null && {`SV: ${searchVolumeFormatter(focusTerm.sv)}`}}\n {focusTerm.cpc !== undefined && focusTerm.cpc !== null && {`CPC: ${costPerClickFormatter(focusTerm.cpc)}`}}\n \n {focusTerm?.foundIn && focusTerm?.foundIn.length > 0 ?\n \n Used in \n {focusTerm.foundIn.map((item, i)=> {\n if (focusTerm.foundIn.length === 1) {\n return {`<${item}>`};\n } else {\n if (i === focusTerm.foundIn.length - 1) {\n return <>and {`<${item}>`};\n } else if (i === focusTerm.foundIn.length - 2) {\n return {`<${item}>`} ;\n } else {\n return {`<${item}>`}, ;\n }\n }\n })}\n :\n null}\n {'Current / Recommended # of uses'}
\n \n {store?.content?.targetKewyordsOnlyArr?.includes(focusTerm.name) ?
Target keywords do not have any usage limitations. : null}\n {focusTerm.usedCount}\n of {focusTerm.requiredCountMin}\n {`(Max: ${focusTerm.requiredCountMax || 0})`}\n \n {'Competitors using this term'}
\n \n {focusTerm?.competitors?.results?.map((competitor, index) => (\n \n {competitor.title ?? getSiteName(competitor.hostname)}
\n {competitor.url}\n \n {competitor?.snippets?.map((snippet, idx) => {\n return \n \n {/* {snippet.length > 130 ? snippet.substring(0, 130) + '...' : snippet} */}\n
\n {idx !== (competitor?.snippets?.length - 1) && }>\n \n \n // {`${index + 1}. `}{competitor.hostname}\n ))}\n\n \n {(!isNil(focusTerm?.normalizedScore) || focusTerm?.source) ? \n {focusTerm?.source ?\n {`Keyword source: `}{focusTerm?.source?.join(', ')}
: null}\n {!isNil(focusTerm?.normalizedScore) ? <>\n {`Importance score: `}{focusTerm.normalizedScore}
\n : null\n }\n {isAnyFocusTermLink() ?\n \n Entity References \n \n {focusTerm?.crunchbaseLink ?\n window.open(focusTerm?.crunchbaseLink)} style={{display: 'flex'}}>\n \n Crunchbase\n : ''}\n {focusTerm?.knowledgeGraphLink ?\n window.open(focusTerm?.knowledgeGraphLink)} style={{display: 'flex'}}>\n \n Google\n : ''}\n {focusTerm?.wikipediaLink ?\n window.open(focusTerm?.wikipediaLink)} style={{display: 'flex'}}>\n : ''}\n {focusTerm?.wikidataLink ?\n window.open(focusTerm?.wikidataLink)} style={{display: 'flex'}}>\n \n Wikidata\n : ''}\n \n : ''}\n \n \n }\n >\n\n \n \n {focusTerm.name} \n {focusTerm?.isBranded && {'branded'} }\n {focusTerm?.foundIn && focusTerm.foundIn.map((item, idx) => {\n return {item} ;\n })}\n \n \n {termContainerSetup[focusTerm.status].icon}\n {focusTerm.usedCount} / {focusTerm.requiredCountMin}\n\n \n {\n navigator.clipboard.writeText(focusTerm.name);\n setCopySuccess(true);\n }}>\n \n \n \n\n {!isScaPublicPage() ? {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n {(isRemoving && store.isRemovingFocusTerms) ? \n \n );\n});\n\nconst TermContainer = styled.div`\n margin-right: 5px;\n margin-left: 5px;\n margin-bottom: 9px;\n display: flex;\n max-width: 300px;\n cursor: default;\n\n\n .termControllsContainer {\n position: absolute;\n right: -100%;\n width: 100%;\n height: 100%;\n transition: all .3s ease;\n background: #2D2F34;\n opacity: 1;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-right: 10px;\n }\n\n &:hover {\n .termControllsContainer {\n right: 0;\n }\n }\n`;\nconst Left = styled.div<{background: string; hoverBackground: string}>`\n padding: 3px 8px;\n background: ${p => p.background};\n width: 100%;\n border-radius: 36px 0 0 36px;\n display: flex;\n flex-wrap: wrap;\n max-width: 260px;\n align-items: center;\n transition: background .2s ease;\n\n &:hover {\n background: ${p => p.hoverBackground};\n }\n`;\nconst TermName = styled.div`\n font-size: 13px;\n color: #fff;\n line-height: 13px;\n`;\nconst BrandedLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n color: #4ebbab;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\nconst FoundInLabel = styled.span`\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n line-height: 15px;\n margin-left: 5px;\n padding: 0 5px;\n`;\n\nconst Right = styled.div<{border: string}>`\n padding: 5px 7px;\n border: ${p => `2px solid ${p.border}`};\n border-radius: 0 36px 36px 0;\n font-size: 13px;\n display: flex;\n align-items: center;\n line-height: 13px;\n position: relative;\n overflow: hidden;\n min-width: fit-content;\n cursor: pointer;\n \n\n\n`;\n\nconst CopyIcon = styled.div`\n`;\nconst ReferencesTitle = styled.p``;\nconst ReferencesWrapper = styled.div``;\nconst LinksWrapper = styled.div`\ndisplay: flex;\nflex-wrap: wrap;\ngap: 8px;\n`;\nconst SingleLink = styled.div`\ndisplay: flex;\npadding: 3px 6px;\njustify-content: center;\nalign-items: center;\ngap: 4px;\nborder-radius: 6px;\nborder: 1px solid #E8E8E8;\nbackground:#FFF;\ncursor: pointer;\nspan {\n color: #121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 400;\n}\n`;\nconst LowerSection = styled.div`\npadding: 10px 21px;\nbackground: #f9f9fb;\n`;\n","import {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {TermsDropdownController} from '../DropdownController/TermsDropdownController';\nimport styled from 'styled-components';\nimport {toJS} from 'mobx';\nimport {TermsDataController} from '../DropdownController/TermsDataController';\nimport {SingleTerm} from './SingleTerm';\nimport {FocusTermModel} from '@/store/content-optimizer/currentPage';\nimport {Tooltip} from 'antd';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\n\nexport const TermsDropdowns = observer(() => {\n // const [defaultActiveCluster, setDefaultActiveCluster] = useState(['1']);\n const [includedBranded, setIncludeBranded] = useState(true);\n const [query, setQuery] = useState([]);\n const [termsToShow, setTermsToShow] = useState(['include-more', 'included', 'include-less']);\n const [isCopied, setIsCopied] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const [standardTerms, setStandardTerms] = useState([]);\n\n const setTerms = (queryParam?: string[]) => {\n if (queryParam?.length) {\n setQuery(queryParam);\n } else {\n setQuery([]);\n }\n\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (queryParam?.length) {\n for (let i = 0; i < queryParam.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(queryParam[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n if (currentPage.focusTermsSorter.key === 'leastCount') {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (a.usedCount < b.usedCount) return -1;\n });\n } else {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n }\n\n\n filteredTerms = filteredTerms?.filter(term => termsToShow.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n const filterTermsHandler = (termsToShowParam: string[]) => {\n setTermsToShow(termsToShowParam);\n const prepTermsArr = toJS(currentPage?.analytics?.focusTerms);\n let filteredTerms = [];\n\n if (query?.length) {\n for (let i = 0; i < query.length; i++) {\n filteredTerms = [...filteredTerms, ...prepTermsArr.filter(term => term.name.includes(query[i]))];\n }\n } else {\n filteredTerms = prepTermsArr;\n }\n\n if (currentPage.focusTermsSorter.key) {\n filteredTerms = filteredTerms?.sort((a, b) => {\n if (b[currentPage.focusTermsSorter.key] < a[currentPage.focusTermsSorter.key]) return -1;\n });\n }\n\n filteredTerms = filteredTerms?.filter(term => termsToShowParam.includes(term.status));\n\n setStandardTerms(filteredTerms);\n };\n\n useEffect(() => {\n setTerms();\n }, [...(currentPage?.analytics?.focusTerms ?? [])]);\n\n\n return <>\n \n \n \n \n {standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n }).map((term, idx) => {\n return ;\n })}\n \n {\n if (!visible) {\n setTimeout(() => setIsCopied(false), 300);\n }\n }}>\n {\n if (standardTerms?.length) {\n navigator.clipboard.writeText(standardTerms.filter(term => {\n if (!includedBranded) {\n return !term.isBranded;\n } else {\n return term;\n }\n })?.map(i => i?.name).join(', '));\n }\n setIsCopied(true);\n }}\n > \n ;\n});\n\nconst TopicalTermsContainer = styled.div`\nbackground-color: #2D2F34;\n \n`;\n\nconst TermsContainer = styled.div<{focusMode?: boolean}>`\n padding-right: 15px;\n padding-bottom: 16px;\n border-radius: 0 0 8px 8px;\n display: flex;\n flex-wrap: wrap;\n max-height: ${p => !p.focusMode ? '476px' : 'calc(100vh - 440px)'};\n overflow-y: auto;\n \n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst CopyButton = styled.button`\n background-color: transparent;\n border: 0px;\n cursor: pointer;\n margin: 6px;\n color: rgb(52, 174, 243);\n`;\n\n","import {observer} from 'mobx-react-lite';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {TermsDropdowns} from './TermsDropdowns';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const FocusTermsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n return currentPage?.analytics?.includedTerms?.length || currentPage?.analytics?.includeMoreTerms?.length || currentPage?.analytics?.includeLessTerms?.length ? (\n \n {/* ;\n});\n\nconst EmptyDataBox = styled.div`\n background: #2d2f34;\n border-radius: 5px;\n box-shadow: 0 4px 21px rgba(0, 0, 0, 0.02);\n display: flex;\n padding: 12px 15px;\n\n .emptyImg {\n display: flex;\n justify-content: center;\n }\n\n .emptyDataTitle {\n color: #a3a4a4;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n margin-left: 17px;\n }\n`;\n\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button} from '@/components/common-components/v2/Button';\n\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faDownLeftAndUpRightToCenter, faFileDownload, faUpRightAndDownLeftFromCenter} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react';\nimport {faCheck, faSyncAlt} from '@fortawesome/pro-regular-svg-icons';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface Props {\n currentView?: 'links' | 'terms';\n store: CurrentPageStore;\n}\n\n\nexport const LinkSuggestionsDropdownController = observer(({currentView, store}: Props) => {\n const [isSynced, setIsSynced] = useState(false);\n const [isSyncing, setIsSyncing] = useState(false);\n const isNotPublic = !isScaPublicPage();\n\n const onLinksSync = async () => {\n try {\n setIsSyncing(true);\n // await store?.getInternalLinkSuggestions(store?.content?.uuid, true);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setIsSynced(true);\n setTimeout(() => {\n setIsSynced(false);\n }, 3000);\n } catch (e) {\n setIsSyncing(false);\n } finally {\n setIsSyncing(false);\n }\n };\n\n const getXlsExportLink = () => {\n const token = getTokenFromCookies();\n if (store?.content?.uuid) {\n const baseUrl = getApiUrl(BaseApi.CA_ENDPOINT, `/api/pages/${store?.content?.uuid}/export-data-to-xls/`);\n const savedKeywordsUrl=`${baseUrl}?&jwt=${token}`;\n return savedKeywordsUrl;\n }\n };\n\n\n return \n \n store.setFocusTermsExpanded(!store.focusTermsExpanded)}>\n {store?.focusTermsExpanded ? 'Default Mode' : 'Focus Mode'} \n \n \n\n {/* \n {currentView === 'links' ? 'Internal' : 'External links'} \n \n\n {currentView === 'links' ? \n Keywords \n : null} */}\n\n {isNotPublic && (currentView === 'links' ? \n : null)}\n\n\n onLinksSync()}>\n \n \n\n ;\n});\n\nconst Container = styled.div<{current: string}>`\n display: flex;\n align-items: center;\n padding: 10px 15px;\n justify-content: ${p => p.current === 'links' ? 'space-between' : 'flex-start'};\n`;\n\n\nconst FocusModeBtn = styled(Button)`\n background: transparent;\n padding: 4px 0px;\n font-size: 12px !important;\n height: 28px !important;\n margin-left: 0px;\n\n &:focus,\n &:hover {\n background: transparent;\n }\n`;\n\nconst FocusModeLabel = styled.span`\n color: #E8E8E8;\n font-size: 12px;\n margin-bottom: -2px;\n`;\n\nconst ExportIcon = styled.a`\n display: flex;\n align-items: center;\n cursor: pointer;\n background: transparent;\n font-size: 12px !important; \n margin-left: auto;\n margin-right: 0px;\n color: #fff;\n padding: 7px 20px;\n height: 28px !important;\n\n &:focus,\n &:hover {\n background: transparent;\n color: #fff;\n }\n`;\n\n\nconst RefetrchBtnContainer = styled.div`\n display: flex;\n align-items: center;\n font-size: 12px;\n margin-right: 0px;\n`;\n","import {InternalLinkType} from '@/store/content-optimizer/CurrentPageModel';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Spin, Tooltip} from 'antd';\nimport styled from 'styled-components';\nimport {\n faCheck,\n faStar,\n} from '@fortawesome/pro-regular-svg-icons';\nimport {faStar as faStarSolid} from '@fortawesome/pro-solid-svg-icons';\nimport {useEffect, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n link: InternalLinkType;\n customCallback?: () => void;\n}\nexport const SingleSuggestion = observer(({link, customCallback}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [isRemovingTerm, setIsRemovingTerm] = useState(false);\n const [isBookmarked, setIsBookmarked] = useState(link?.isBookmarked);\n const {contentOptimizer: {currentPage: {removeInternalLinkSuggestion, bookmarkInternalLinkSuggestion, content: {uuid}}}} = useStore('');\n\n const antdIcon = \n \n \n \n \n \n \n {link?.title ? link.title : ''}\n \n {isBookmarked ? : null}\n \n\n \n {link?.path}\n \n \n \n \n \n {\n setIsBookmarked(!isBookmarked);\n await bookmarkInternalLinkSuggestion(uuid, link?.url);\n if (typeof customCallback == 'function') customCallback();\n }}>\n \n \n \n \n \n \n \n {\n setIsRemovingTerm(true);\n await removeInternalLinkSuggestion(uuid, link?.url, link?.keywords);\n if (typeof customCallback == 'function') customCallback();\n setIsRemovingTerm(false);\n }}>\n {isRemovingTerm ? : \n \n \n\n ;\n});\n\nconst SingleLinkContainer = styled.div`\n margin-bottom: 12px;\n display: flex;\n justify-content: space-between;\n position: relative;\n\n .actionsMenu {\n display: none;\n font-size: 12px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n cursor: pointer !important;\n position: absolute;\n background: linear-gradient(90deg, #2d2f342b -10.83%, #2d2f34 39.77%);\n padding-left: 30px;\n right: 0;\n }\n\n &:hover {\n .actionsMenu {\n display: flex;\n }\n }\n\n .copyTooltip {\n :global(.ant-tooltip-content) {\n background-color: $color-gray-dark;\n border-radius: 10px !important;\n }\n \n :global(.ant-tooltip-arrow) {\n display: none !important;\n }\n \n :global(.ant-tooltip-inner) {\n border-radius: 10px !important;\n padding-left: 10px !important;\n padding-right: 10px !important;\n }\n }\n`;\nconst Right = styled.div`\n width: 90%;\n margin-right: auto;\n`;\nconst Left = styled.div`\n display: flex;\n width: 10%;\n`;\nconst TitleAndStar = styled.div`\n display: flex;\n justify-content: space-between;\n width: 100%;\n`;\nconst Title = styled.div`\n cursor: pointer;\n color: #e8e8e8 !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 90%;\n`;\nconst Link = styled.a`\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: block;\n color: #34AEF3;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\n\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {SingleSuggestion} from './SingleISugesstion';\nimport styles from '../CommonCitations/style.module.scss';\n\ninterface Props {\n data: any[];\n store?: CurrentPageStore;\n isQueried?: boolean;\n customCallback?: () => void;\n}\n\n\nexport const InternalLinksSuggestions = observer(({data, store, isQueried, customCallback}: Props) => {\n return <>\n \n {data?.length ?\n data?.map((suggestion, id) => (\n \n )) : isQueried ?\n \n No Internal Link Suggestions found that match your search.\n :\n store?.content?.targetKeywords?.length === 0 ?\n \n Please add Target Keywords to get Internal Link Suggestions.\n : \n No Internal Link Suggestions found for these Target Keywords.\n }\n \n\n ;\n});\n\n\nconst DropdownsContainer = styled.div`\n background-color: #2D2F34;\n max-height: 340px;\n overflow-y: auto;\n padding-right: 15px;\n padding-left: 15px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n","\nimport {CommonCitationsType} from '@/store/content-optimizer/CurrentPageModel';\nimport {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n citation: CommonCitationsType;\n}\n\nexport const SingleCitation = observer(({citation}: Props) => {\n const addDefaultSrc = e => {\n e.target.src = '/img/world-wide-web.svg';\n };\n\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)} src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc.length > 90 ?\n \n {citation?.metaDesc.substring(0, 90) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by: \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp.metaDesc.length > 70 ? serp.metaDesc.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 7 && (\n {`+${citation?.serps?.length - 7}`}\n )}\n \n : null}\n\n \n ;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SingleCitation} from './SingleCitation/SingleCitation';\nimport styles from './style.module.scss';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n store: CurrentPageStore;\n}\nexport const CommonCitations = observer(({store}: Props) => {\n return <>\n {store?.analytics?.commonCitations?.length ? \n \n {store?.analytics?.commonCitations.map(citation => {\n return (citation.url || citation.metaDesc) && ;\n })}\n \n :\n !store?.content?.targetKeywords?.length ? \n Please add Target Keywords to get Common Citations.\n : \n No Common Citations found for these Target Keywords.\n }\n ;\n});\n","import {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\n\nexport const SidebarTooltip = observer(props => {\n return \n {props.children}\n ;\n});\n","import {observer} from 'mobx-react';\nimport {ChangeEvent, Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled, {css, keyframes} from 'styled-components';\nimport {Tooltip, Form, Dropdown, Radio} from 'antd';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport Text from 'antd/lib/typography/Text';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {Button as CommonBtn, CommonInput} from '@/components/common-components/components';\nimport {Loader} from '../../../Utils/loader';\nimport {addProtocolToDomain, sanitizeUrl} from '@/utils/url';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faPen, faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {Button} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {Input} from '@/components/common-components/v2';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\n// import {faChevronDown, faChevronUp} from '@fortawesome/pro-regular-svg-icons';\n// import { toJS } from 'mobx';\n// import { LoadingOutlined } from '@ant-design/icons';\n\ninterface Props {\n store: CurrentPageStore;\n currentView?: 'links' | 'terms';\n onViewChange?: Dispatch>;\n visibleKeywords?: any[];\n updateKeywords?: (kwArray) => void;\n onFilter: (query: string[]) => void;\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const SuggestionsDataController = observer(({\n store,\n currentView,\n onViewChange,\n visibleKeywords,\n updateKeywords,\n onFilter,\n viewSuggestionsOption,\n linksDropDownFromSuggestion,\n}: Props) => {\n const [showEditor, setShowEditor] = useState(false);\n const [isCloseClicked, setIsCloseClicked] = useState(false);\n const [form] = Form.useForm();\n const [inputValue, setInputValue] = useState(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n const [submitDisabled, setSubmitDisabled] = useState(true);\n const isNotPublic = !isScaPublicPage();\n\n // const [isClustersExpanded, setIsClustersExpanded] = useState(false);\n const [termsSearchQuery, setTermsSearchQuery] = useState([]);\n const [termsSearchInputValue, setTermsSearchInputValue] = useState('');\n const {Group} = Radio;\n useEffect(() => {\n onViewChange(linksDropDownFromSuggestion);\n }, [linksDropDownFromSuggestion]);\n\n\n // const secondAntIcon = ) => {\n const input = e.target.value;\n setTermsSearchInputValue(input);\n\n const formatInput = input.split(',');\n const trimmedArr: string[] = [];\n for (let i = 0; i < formatInput.length; i++) {\n if (!termsSearchQuery.includes(formatInput[i].trim())) {\n trimmedArr.push(formatInput[i].trim());\n }\n }\n\n setTermsSearchQuery(trimmedArr);\n onFilter(trimmedArr);\n };\n\n const hostnameEditor = \n {\n if (!isCloseClicked) {\n try {\n await store?.updateHostname(inputValue);\n await store?.getInternalLinkSuggestionsv2(store?.content?.uuid, true);\n setShowEditor(false);\n } catch (e) {\n return Promise.reject(e);\n }\n }\n }}\n initialValues={{\n urlInput: inputValue,\n }}>\n {'Page URL'} \n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n {\n setInputValue(e.target.value);\n if (!e.target.value) {\n setSubmitDisabled(true);\n } else {\n setSubmitDisabled(false);\n }\n }\n }\n placeholder={t('enter-url')} />\n\n \n \n {\n e.preventDefault();\n setInputValue(store?.content?.hostname ?? store?.content?.importedFromUrl ?? '');\n setShowEditor(false);\n }}\n disabled={store?.isUpdatingHostname}\n >\n {store?.isUpdatingHostname ? : t('cancel')}\n \n setIsCloseClicked(false)}\n >\n {store?.isUpdatingHostname ? : 'Update'}\n \n \n\n \n ;\n\n const topMessage = \n {hostnameEditor}\n {isNotPublic && (store?.content?.importedFromUrl || store?.content?.hostname ? <>\n \n Suggestions shown for \n \n {sanitizeUrl(store?.content?.hostname ?? store?.content?.importedFromUrl)}\n \n \n \n setShowEditor(!showEditor)} style={{marginLeft: 'auto'}}>\n \n : <>\n To get Link Suggestions setShowEditor(!showEditor)}>specify a Page URL \n )}\n ;\n\n const viewChangeDropdown = \n e.stopPropagation()}>\n onViewChange(e.target.value)}>\n Internal Link Suggestions \n External Link Suggestions \n \n \n ;\n\n const keywordsDropdown = \n Show Internal Link Suggestions for following target keywords: \n e.stopPropagation()}>\n {visibleKeywords?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n \n ;\n\n const viewControlls = \n \n \n {currentView === 'links' ? 'Internal Links' : 'External links'} \n \n \n\n {currentView === 'links' ? \n Keywords {visibleKeywords?.filter(kw => kw.active)?.length} / {visibleKeywords?.length} \n : null}\n\n ;\n\n const SearchAndSort = \n \n termSearchHandler(e)}/>\n \n {/* \n {store?.isAnalyzing ? : \n {toJS(store.content?.internalLinkSuggestions)?.map((cluster, id) => {\n return \n \n Link Suggestions in cluster: \n {cluster.results?.length} \n \n }>\n item.trim() === cluster.keyword).length > 0}\n onClick={() => handleOnClusterClick(cluster.keyword)}>{`#${cluster.keyword} - ${cluster.results?.length}`}\n \n ;\n })}\n }\n setIsClustersExpanded(!isClustersExpanded)}/>\n */}\n ;\n\n return \n {topMessage}\n {viewControlls}\n {SearchAndSort}\n ;\n});\n\nconst Wrapper = styled.div`\n margin-bottom: 10px;\n`;\n\nconst EditorContainer = styled.div<{show: boolean}>`\n display: ${p => p.show ? 'block' : 'none'};\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n border-radius: 5px;\n position: absolute;\n top: 20px;\n right: 0;\n padding: 15px 10px;\n width: 300px;\n z-index: 1;\n `;\nconst FormStyled = styled(Form)`\n .ant-form-item {\n margin-bottom: 10px;\n }\n\n .ant-form-item-explain.ant-form-item-explain-error {\n div {\n color: #ff4d4f;\n }\n }\n `;\n\nconst HostnameContainer = styled.div`\n position: relative;\n display: flex;\n font-size: 12px;\n margin-bottom: 10px;\n`;\nconst HostnameLink = styled.a`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: calc(100% - 150px);\n margin-left: 5px;\n color: #34AEF3;\n`;\nconst HostnameLinkBtnContainer = styled.div`\n width: 14px;\n height: 14px;\n margin-left: 10px;\n cursor: pointer;\n`;\n\nconst ViewControllsContainer = styled.div`\n display: flex;\n`;\nconst AddNewUrlBtn = styled.div`\n font-size: 12px;\n margin-left: 5px;\n color: #40a9ff !important;\n text-decoration: underline;\n cursor: pointer;\n`;\nconst InputStyeld = styled(CommonInput)`\n `;\nconst ButtonContainer = styled(Form.Item)`\n .ant-form-item-control-input-content {\n display: flex;\n justify-content:flex-end;\n }\n `;\n\nconst CancelButton = styled(CommonBtn)`\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n padding: 5px 15px;\n\n span {\n color: #4E5156 !important;\n }\n\n &:hover, &.active, &.focus {\n background-color: #e8e8e8;\n border: 1px solid #e8e8e8;\n }\n `;\nconst UpdateButton = styled(CommonBtn)`\n padding: 5px 15px;\n margin-left: 10px;\n `;\nconst ViewDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 255px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\nconst RadioStyled = styled(Radio)`\n .ant-radio-checked .ant-radio-inner {\n background-color: #7f4ead !important;\n border-color: #7f4ead !important;\n\n &::after {\n background-color: #fff !important;\n }\n }\n`;\nconst blinkAnimation = keyframes`\n 0%, 100% {\n background-color: #2D2F34;\n }\n 50% {\n background-color: #6F7177;\n }\n`;\nconst ButtonStyled = styled(Button)<{viewSuggestionsOption?: boolean}>`\n background-color: #323539;\n border: 1px solid transparent;;\n font-size: 13px;\n padding: 8px 14px;\n margin: 0 9px 0 0 !important;\n\n &:hover, &:focus {\n background-color: transparent !important;\n }\n animation: ${p => p.viewSuggestionsOption ? css`${blinkAnimation} 2s;` : ''}; \n animation-delay: .5s;\n `;\nconst KeywordsDropdownContainer = styled.div`\n background-color: #fff;\n box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.15);\n width: 230px;\n padding: 12px 20px;\n border-radius: 5px;\n`;\n\n\nconst CheckboxStyled = styled(Checkbox)`\n margin-left: 0px !important;\n font-weight: 500 !important;\n`;\n\nconst OverlayTitle = styled.p`\n color: #4E5156;\n font-size: 12px;\n`;\n\n// const ClusterTooltipSingleRow = styled.div`\n// display: flex;\n// justify-content: space-between\n// `;\n// const ClusterTooltipLabel = styled.div`\n// font-size: 12px;\n// font-weight: 400;\n// color: #E8E8E8;\n// `;\n\n// const ClusterTooltipValue = styled.div`\n// font-size: 12px;\n// font-weight: 500;\n// color: #FFFFFF;\n// `;\n\nconst SearchAndSortWraper= styled.div `\n margin-top: 10px;\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n margin-bottom: 10px;\n`;\n\n// const ClustersWrapper = styled.div`\n// display: flex;\n// `;\n// const ClustersContainer = styled.div<{expandedClusters?: boolean}>`\n// display: flex;\n// flex-wrap: wrap;\n\n// height: ${p => p.expandedClusters ? 'auto' : '25px'};\n// overflow: hidden;\n// `;\n\n// const SingleClusterContainer = styled.div<{activeCluster?: boolean}>`\n// background-color: ${p => p.activeCluster ? '#f8a62933' : '#2E3135'};\n// border-radius: 60px;\n// padding: 3px 8px;\n// width: auto;\n// height: 20px;\n// font-size: 11px;\n// margin-right: 6px;\n// margin-bottom: 6px;\n// cursor: pointer;\n\n// &:hover {\n// background-color: #4B4D51 !important;\n// }\n// `;\n\nconst InputStyled = styled(Input)`\n height: 32px;\n`;\n","import {observer} from 'mobx-react';\nimport React, {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {LinkSuggestionsDropdownController} from '../DropdownController/LinkSuggestionsDropdownController';\nimport {InternalLinksSuggestions} from './InternalLinkSuggestions/InternalLinkSuggestions';\nimport {CommonCitations} from './CommonCitations/CommonCitations';\nimport {useStore} from '@/store/root-store';\nimport {SuggestionsDataController} from '../DropdownController/SuggestionsDataController';\nimport {toJS} from 'mobx';\nimport {Button, Input, Popover, Radio, Spin, Tooltip, Form} from 'antd';\nimport {exportLinkIcon} from '@/utils/icons';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import { SmallBadge } from '@/components/common-components/components/badge';\nimport {Pill} from '@/components/layoutV2/user-menu/styles';\nimport isURL from 'validator/lib/isURL';\nimport {useTranslation} from 'next-i18next';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {stringToArray} from '@/utils/arrays';\nimport {keywordNewLineReg} from '@/constants/regex';\nimport {notification} from '@/utils/notification-v2';\nimport {apiError} from '@/utils/api';\n\ninterface LinkSuggestionTabPRops {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\n\nexport const LinkSuggestionsTab = observer(({viewSuggestionsOption, linksDropDownFromSuggestion}: LinkSuggestionTabPRops) => {\n const [currentView, setCurrentView] = useState<'links' | 'terms'>('links');\n const [activeKeywordsList, setActiveKeywordsList] = useState([]);\n const [searchQuery, setSearchQuery] = useState([]);\n const [dataArr, setDataArr] = useState([]);\n const [initialDataArr, setInitialDataArr] = useState([]);\n const [isQueried, setIsQueried] = useState(false);\n const [anyButtonClicked, setAnyButtonClicked] = useState(false);\n const antIcon = ) => {\n if (e?.nativeEvent['data'] == ',') {\n setInputValue(e?.target?.value?.replace(',', '\\n'));\n } else {\n if (e.target.value.length) setUrlsError('');\n setInputValue(e?.target?.value);\n }\n };\n\n const addDomainPopoverContent = () => {\n return \n To continue, provide a source of Internal links \n \n \n \n \n \n \n \n Add a domain \n We’ll scan the domain and provide inlinks recommendations \n {selectedOption === 'domain' &&\n ({\n validator(_, value) {\n if (!value || isURL(value.trim(), {require_protocol: false})) {\n return Promise.resolve();\n }\n return Promise.reject(t('url-not-valid'));\n },\n }),\n ]}\n >\n setDomain(e.target.value)}\n />\n \n }\n \n \n \n \n \n \n \n \n Provide URLs \n Write or paste a list of URLs and we’ll find the best fit for them \n {selectedOption === 'urls' &&\n <>\n \n {urlsError&& {urlsError} }\n \n }\n \n \n \n \n ;\n };\n\n const popoverInnerStyle = {\n width: '500px',\n borderRadius: '10px',\n border: '1px solid #D9D9D9',\n background: 'var(--White, #FFF)',\n boxShadow: '0px 1px 20px 0px rgba(0, 0, 0, 0.19)',\n };\n\n\n return <>\n {\n onDataFilter(kwArr);\n }}\n visibleKeywords={activeKeywordsList}\n onFilter={setLinks}\n viewSuggestionsOption={viewSuggestionsOption}\n />\n \n \n \n \n \n Internal links help search engines understand how your content interrelates.\n \n \n {`Links in of the page: ${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.filter(link => link.isUsed).length ?? 0}/${toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks?.length ?? 0}`}\n \n }>\n \n\n {getMsg(calculateUsagePercentage(toJS(currentPage)?.content?.internalLinkSuggestionsV2?.allLinks))}\n \n \n Add links to content easily with AI
\n {dataArr?.length && (currentView == 'links' || currentView == 'terms') ? {\n (dataArr?.length && (currentView == 'links' || currentView == 'terms')) && postLInkSuggestion(currentView);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
:\n \n \n Launching AI Links Assistant.\n Do not modify your article before this tool is fully loaded\n : ''}>\n {\n setIsVisiblePopover(true);\n }}> {anyButtonClicked ? : exportLinkIcon()} Insert Links Beta
\n \n }\n \n {currentView === 'links' ? a.isBookmarked > b.isBookmarked ? -1 : 1)} store={currentPage}/> : }\n \n ;\n});\n\nconst Wrapper = styled.div`\n background-color: #2d2f34;\n border-radius: 5px;\n padding: 0 0 13px 0;\n`;\nconst SuggestionsBannerContainer = styled.div<{percent?: number}>`\n background-color: ${p => p.percent < 75 ? '#F1AA3E1C' : '#1FAC471C'};\n border-radius: 5px;\n padding: 9px 10px;\n font-size: 12px;\n margin: 10px 6px;\n\n .infoBannerIcon {\n width: 15px;\n color: ${p => p.percent < 75 ? '#F1AA3E' : '#1FAC47'};\n margin-right: 5px;\n }\n`;\n\nconst TooltipTitle = styled.div`\n`;\nconst TooltipDescription = styled.div`\n font-size: 12px;\n color: #a3a4a4;\n`;\n\nconst LinksWrapper = styled.div<{anyButtonClicked?: boolean}>`\n\nbackground-image: linear-gradient(to left, rgb(52 174 243 / 9%), rgba(52, 174, 243, 0.42));\ndisplay: flex;\n// justify-content: space-between;\nheight: 35px;\nalign-items: center;\nmargin: 0 7px 20px 7px;\npadding: 0 15px;\nborder-radius: 5px;\np{ \n margin-bottom: 0;\n font-size: 12px;\n &:last-child{\n align-items: center;\n display: flex;\n justify-content: space-between;\n width: 30%;\n margin-left: 10px;\n color: #34AEF3;\n cursor: ${props => props.anyButtonClicked ? 'not-allowed' : 'pointer'};\n text-decoration: underline;\n }\n}\n`;\n\nconst StyledPopover = styled(Popover)`\n .ant-popover-inner-content {\n padding: 0px !important;\n }\n`;\n\nconst PopoverContentWrapper = styled.div`\n margin: 6px 4px;\n`;\n\nconst PopoverTitle = styled.p`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin-bottom: 15px !important;\n`;\n\nconst AddDomainSection = styled.div`\n display: flex; \n width: 460px;\n min-height: 50px;\n flex-shrink: 0;\n border-radius: 12px 12px 0px 0px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n padding: 12px 16px;\n`;\n\nconst ProvideUrlsSection = styled.div`\n display: flex;\n width: 460px;\n min-height: 58px;\n flex-shrink: 0;\n border-radius: 0px 0px 12px 12px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--Table-row-stripe, #F9F9FB);\n margin-bottom: 15px;\n padding: 12px 16px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 12px;\n`;\n\nconst AddDomainTitle = styled.div`\n color: var(--Black, #121212);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 2px;\n`;\n\nconst AddDomainDesc = styled.div`\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-bottom: 10px;\n`;\n\nconst AddDomainInput = styled(Input)`\n width: 400px;\n height: 32px;\n flex-shrink: 0;\n border-radius: 6px;\n border: 1px solid var(--Gray-light, #E8E8E8);\n background: var(--White, #FFF);\n`;\n\nconst DomainDetails = styled.div`\n .ant-form-item {\n margin-bottom: 0px !important;\n } \n\n`;\n\nconst ProvideUrlsDetails = styled.div`\n \n`;\n\nconst Dismiss = styled.button`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Body-background, #F2F2F5);\n border: none;\n cursor: pointer;\n`;\n\nconst Update = styled(Button)`\n display: inline-flex;\n padding: 5px 15px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 6px;\n background: var(--Blue, #2D6CCA);\n color: white;\n min-width: 120px;\n &:hover {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n &:focus {\n background-color: #2D6CCA !important;\n color: white !important;\n }\n`;\n\nconst ErrorMessageForURL = styled.span`\n color: #ff4d4f;\n font-size: 14px;\n line-height: 1.5715;\n`;\n","import {useCallback, useState} from 'react';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {\n Divider,\n Row,\n Popover,\n Tooltip,\n Spin,\n} from 'antd';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faFilePlus, faMessageCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useTranslation} from 'next-i18next';\nimport {QuestionModel} from '@/store/content-optimizer/CurrentPageModel';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {debounce, isNil} from 'lodash';\nimport {insertText} from '@/utils/editor-scripts';\nimport {EditorState} from 'draft-js';\n\ninterface Props {\n question: QuestionModel;\n i: number | string;\n}\n\n\nexport const SingleQuestion = observer(({question, i}: Props) => {\n const {contentOptimizer: {\n contentFragment,\n },\n } = useStore('');\n const {contentOptimizer: {currentPage, aiOutline}} = useStore('');\n const [copySuccess, setCopySuccess] = useState(false);\n const [aiCopied, setAiCopied] = useState(false);\n const [creatingPage, setCreatingPage] = useState(false);\n const [isAiGenerating, setIsAiGenerating] = useState(false);\n const {t} = useTranslation('common');\n\n const antIcon = \n {t('question')}
\n {question.keyword ? question.keyword : null}
\n \n {question?.sv !== undefined && question?.sv !== null && {`SV: ${searchVolumeFormatter(question.sv)}`}}\n {question?.cpc !== undefined && question?.cpc !== null && {`CPC: ${costPerClickFormatter(question.cpc)}`}}\n \n {t('number-of-uses')}
\n \n {question?.usedCount ?? ''}\n
\n \n }\n >\n \n \n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n }}>\n \n {question?.keyword ?? ''}\n
\n ;\n});\n","\nimport {Typography, Spin, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleQuestion} from './SingleQuestion';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCheck, faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport {copyToClipboardWithHtmlAndText} from '@/utils/clipboard';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const QuestionsTab = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {t} = useTranslation('common');\n\n const {Title} = Typography;\n const antIcon = \n Questions {currentPage?.isAnalyzing ? <Spin indicator={antIcon} style={{marginRight: '20px'}}/> :\n currentPage?.analytics?.questions?.length ? <span className={styles.totalQuestions}>{`${currentPage?.analytics?.questions?.filter(question => question?.usedCount > 0)?.length}/${currentPage?.analytics?.questions?.length}`}</span> : null}\n <Tooltip\n title={copySuccess ? <span><FontAwesomeIcon icon={faCheck} style={{color: '#2AC155'}}/>{` Copied to clipboard`}</span> : t('copy-to-clipboard')}\n placement='top'\n overlayClassName={styles.copyTooltip}\n onVisibleChange={visible => {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n <div style={{cursor: 'pointer', color: '#34AEF3', marginLeft: 'auto'}}\n onClick={() => {\n let htmlString = '<p></p>';\n let string = '';\n currentPage?.analytics?.questions?.map(question => {\n htmlString += (`<p>${question.keyword}?</p>`);\n string += (`${question.keyword}?`);\n });\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlString, 'text/html');\n const copiedText = doc.body.textContent;\n navigator.clipboard.writeText(copiedText);\n\n // Example usage:\n const htmlContent = htmlString;\n const plainTextContent = string;\n\n copyToClipboardWithHtmlAndText(htmlContent, plainTextContent);\n setCopySuccess(true);\n }}>\n <FontAwesomeIcon icon={faCopy} style={{marginRight: 5}}/> Copy all\n </div>\n </Tooltip>\n \n {currentPage?.analytics?.questions?.length ? \n \n {currentPage?.analytics?.questions?.map((question, i) => {\n return ;\n })}\n \n :\n \n {/* ('');\n const {contentOptimizer: {currentPage: {addFocusTerms, isFocusTermsLoading}}} = useStore('');\n\n const onClose = () => {\n setShowAddFocusTermModal(false);\n setTerms('');\n };\n\n const handleTerms = (e: React.ChangeEvent) =>{\n const value = e.target.value;\n setTerms(value.replaceAll(',', '\\n'));\n };\n\n const handleAddFocusTerms = async () => {\n try {\n await addFocusTerms({terms: stringToArray(terms, keywordNewLineReg, ',' )});\n onClose();\n notification.success('', 'Focus terms added successfully');\n } catch (error) {\n const errorMessage = apiError(error) as string;\n notification.error('', errorMessage || 'Something went wrong please try again');\n }\n };\n\n return (\n \n Add focus terms \n Provide your own terms and get usage recommendations to elevate your writing. \n \n \n \n );\n});\n\nexport default AddFocusTermModal;\n\nconst StyledModal = styled(Modal)`\n .ant-modal-content{\n border-radius: 12px;\n background: var(--White, #FFF);\n }\n`;\n\nconst Title = styled.div`\n color: var(--Text-black, var(--Black, #121212));\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n`;\n\nconst Desc = styled.div`\n width: 370px;\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n margin-top: 4px;\n`;\n\nconst TextArea = styled.div`\n margin-top: 22px;\n`;\n\nconst Footer = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 24px;\n\n .cancel-btn {\n color: var(--Gray-dark, #4E5156);\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n background-color: transparent;\n border: none;\n cursor: pointer;\n }\n\n .add-btn {\n display: flex;\n width: 115px;\n height: 44px;\n /* padding: 13px 60px 14px 30px; */\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n border-radius: 6px;\n background: var(--Green, #2AC155);\n color: white;\n color: var(--White, var(--White, #FFF));\n font-family: Inter;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n }\n .ant-btn[disabled] {\n background: #f5f5f5 !important;\n color: rgba(0, 0, 0, 0.25) !important;\n }\n`;\n","import {useEffect, useState} from 'react';\nimport {\n Tabs as CommonTabs,\n TabPane as CommonTabPane,\n} from '@/components/common-components/components';\nimport {\n Spin,\n} from 'antd';\nimport {\n LoadingOutlined,\n} from '@ant-design/icons';\nimport styles from './style.module.scss';\nimport {useTranslation} from 'next-i18next';\n// import {VideoPopOver} from '@/components/common-components/components/popover';\nimport {FocusTermsTab} from './FocusTermsTab/FocusTermsTab';\nimport {observer} from 'mobx-react';\nimport {LinkSuggestionsTab} from './LinkSuggestionsTab/LinkSuggestionsTab';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {QuestionsTab} from './QuestionsTab/QuestionsTab';\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_FOCUS_TERMS_TAB_OPEN, SCA_PAGE_QUESTIONS_TAB_OPEN, SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN} from '@/constants/events';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {isScaPublicPage} from '@/utils/url';\nimport AddFocusTermModal from './DropdownController/AddFocusTermModal';\n\ninterface FocusTermsTabsProps {\n viewSuggestionsOption: boolean;\n linksDropDownFromSuggestion: 'links' | 'terms';\n}\nconst secondAntIcon = onChangeTab(key)}\n >\n \n \n \n {t('topical-terms')}\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedTerms}\n /{currentPage?.analytics?.focusTerms?.length}\n )\n }\n \n \n \n }\n key='1'\n style={{'outline': 'none'}}>\n \n \n \n Questions\n \n \n {\n currentPage?.isAnalyzing ?\n () :\n (\n {currentPage?.analytics?.totalUsedQuestions}\n /{currentPage?.analytics?.questions?.length}\n )\n }\n \n \n \n }\n key='2'\n style={{'outline': 'none'}}>\n {isNotPublic && \n \n \n Link Suggestions\n \n \n {currentPage?.isFetchingIntLinksSug ?\n () :\n (\n {currentPage?.content?.totalUsedSuggestions}\n /{currentPage?.content?.internalLinkSuggestionsV2?.allLinks?.length}\n )\n }\n \n \n \n }\n key='3'\n style={{'outline': 'none'}}>\n \n \n \n \n );\n});\n\nconst CommonTabsStyled = styled(CommonTabs)`\n .rc-tabs-extra-content {\n background-color: transparent !important;\n border: 1px solid $color-gray-dark-medium;\n border-radius: 5px;\n cursor: pointer;\n font-size: $font-size-12;\n height: 25px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n padding: 0 5px;\n transition: all 0.2s ease-in;\n }\n\n .focusTermsTabTitleValue {\n color: $color-gray-light;\n display: block;\n font-size: $font-size-12;\n font-weight: 400;\n margin-left: 5px;\n\n .ant-spin-spinning {\n height: 10px;\n }\n\n .customSpinner {\n font-size: 12px !important;\n }\n }\n\n .rc-tabs-content-holder {\n background-color: transparent !important;\n padding-top: 15px;\n }\n\n .rc-tabs-nav {\n border-bottom: 1px solid #4E5156;\n }\n .rc-tabs-nav-list {\n justify-content: space-between;\n }\n .rc-tabs-nav-operations {\n display: none !important;\n }\n\n .rc-tabs-tab {\n margin-left: 20px !important;\n\n &:first-child {\n margin-left: 0px !important;\n }\n }\n\n @media screen and (max-width: 1400px) {\n .rc-tabs-tab {\n margin-left: 0px !important;\n margin-right: 15px !important;\n }\n \n }\n\n .rc-tabs-tab-btn {\n padding: 5px 0 !important;\n }\n\n .rc-tabs-ink-bar {\n background-color: #F1AA3E !important;\n border-radius: 2px;\n }\n`;\n\nconst TabsStyled = styled(CommonTabPane)<{expanded: boolean; editorScrolled: boolean}>`\n \n .ant-collapse {\n overflow-y: ${p => p.expanded ? 'auto' : 'inherit'};\n height: ${p => p.expanded ? `calc(100vh - ${p.editorScrolled ? 292 : 300}px)` : 'auto'};\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n }\n`;\n\nconst TabTitleContainer = styled.div<{active: boolean}>`\n\n .tabTitle {\n font-weight: 400;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n\n .tabExtraInfo {\n padding-bottom: 8px;\n\n .tabUsageContainer {\n display: flex;\n\n .usageValue {\n font-size: 18px;\n font-weight: 600;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n .totalValue {\n span {\n font-size: 12px;\n color: #A3A4A4;\n }\n }\n }\n }\n\n`;\n","/* eslint-disable max-len */\n\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {ReactNode} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport styles from './style.module.scss';\n\n\ninterface Props {\n label: string;\n value?: number;\n tooltipLabel?: string | ReactNode;\n showTooltip?: boolean;\n loading?: boolean;\n min?: number;\n max?: number;\n headingData?:{\n h1: number;\n h2: number;\n h3: number;\n h1Min: number;\n h1Max: number;\n h2Min: number;\n h2Max: number;\n h3Min: number;\n h3Max: number;\n };\n linksData?:{\n internalLinks: number;\n externalLinks: number;\n internalLinksMin: number;\n internalLinksMax: number;\n externalLinksMin: number;\n externalLinksMax: number;\n };\n}\n\nexport const SingleMetrics = observer(({label, value, tooltipLabel, showTooltip, loading, min, max, headingData, linksData}:Props) => {\n const secondAntIcon = \n {label === 'Headings:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n \n :\n <>\n \n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n \n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n \n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n \n \n :\n }\n :\n label === 'Links:' ?\n <>\n {label} \n {!loading ?\n showTooltip ?\n <>\n \n \n \n linksData.internalLinksMax) ? faArrowDown : faCheck} color={(linksData.internalLinks < linksData.internalLinksMin) || (linksData.internalLinks > linksData.internalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '} Internal: {linksData.internalLinks}\n \n {`${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `/` : '/'} ${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `${linksData.internalLinksMin}-${linksData.internalLinksMax}` : ''}`}\n \n \n \n linksData.externalLinksMax) ? faArrowDown : faCheck} color={(linksData.externalLinks < linksData.externalLinksMin) || (linksData.externalLinks > linksData.externalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '}External: {linksData.externalLinks}\n \n {`${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `/` : ''} ${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `${linksData.externalLinksMin}-${linksData.externalLinksMax}` : ''}`}\n \n \n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n :\n <>\n {label} \n {!loading ?\n showTooltip ?\n \n \n max) ? faArrowDown : faCheck} color={(value < min) || (value > max) ? '#FF8536' : '#1FAC47'}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n \n :\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n :\n }\n \n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n cursor: default;\n height: 18px;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1FAC47' : '#F44343'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 2px;\n margin-right: 3px;\n`;\nconst RangeValues = styled.div`\n color: #A3A4A4 !important;\n font-size: 10px;\n display: inline-flex;\n margin-left: 2px;\n\n @media screen and (max-width: 1400px) {\n font-size: 8px;\n }\n`;\nconst StyledLable = styled.p`\n margin-bottom: 0px;\n width: 72px;\n text-align: end;\n margin-right: 5px;\n color: #E8E8E8;\n`;\nconst StyledIcon = styled(FontAwesomeIcon)`\n width: 12px;\n`;\n","/* eslint-disable no-console */\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {isNil} from 'lodash';\nimport {SingleMetrics} from '../SingleMetrics';\nimport {SkeletonHorizontalLoaderGray} from '@/components/common-components';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck, faArrowUpRightFromSquare} from '@fortawesome/pro-regular-svg-icons';\nimport {useState, Dispatch, SetStateAction} from 'react';\nimport {Tabs, Tooltip} from 'antd';\nimport {TabPane} from 'rc-tabs';\nimport {toJS} from 'mobx';\n\ninterface ContentScoreProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const ContentScore = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: ContentScoreProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n isWordCountLoading,\n feTargetKeywords,\n currentEditorState,\n isScoreLoading,\n isFetchingIntLinksSug,\n analytics,\n content: {\n score,\n scoreExtended,\n wordCount,\n suggestedWordCountLimits,\n scoreCounts,\n internalLinkSuggestionsV2,\n },\n },\n }} = useStore('');\n\n const [activeKey, setActiveKey] = useState('internal');\n\n const chartOption={\n grid: {\n top: '0px',\n bottom: '0px',\n },\n series: [{\n min: 0,\n max: 100,\n type: 'gauge',\n axisLine: {\n roundCap: false,\n lineStyle: {\n width: 10,\n color: [\n [0.33, '#f44343'],\n [0.66, '#f1aa3e'],\n [1, '#1ea745'],\n ],\n },\n },\n progress: {\n show: false,\n },\n startAngle: 180,\n radius: '90%',\n endAngle: 0,\n pointer: {\n width: 4,\n icon: 'roundRect',\n length: '25%',\n offsetCenter: [0, '-80%'],\n itemStyle: {\n color: '#fff',\n },\n },\n axisTick: {\n show: false,\n },\n splitLine: {\n distance: -13,\n length: 15,\n lineStyle: {\n color: '#24262a',\n width: 6,\n },\n },\n splitNumber: 3,\n axisLabel: {\n show: false,\n color: 'auto',\n distance: 40,\n fontSize: 20,\n },\n detail: {\n show: false,\n },\n data: [{\n value: score ?? 0,\n }],\n }],\n };\n\n const viewSuggestionHandler = (key: 'links' | 'terms') => {\n setViewSuggestionsOption(true);\n setLinksDropDownFromSuggestion(key);\n setTimeout(() => {\n setViewSuggestionsOption(false);\n }, 1000);\n };\n const scoreLeftPosition = (score?: number) => {\n if (!score || score === 0) return '31%';\n if (score < 100 ) return '27%';\n if (score === 100 ) return '21%';\n };\n const avgTopLeftPosition = (avg?: number, top?: number) => {\n if (!avg && !top) return '25%';\n return '17%';\n };\n\n const shouldShowTooltip = (min?: number, max?: number) => {\n if (isNil(min) || isNil(max)) {\n return false;\n }\n\n return true;\n };\n\n const tooltipMsg = (key: string, min?: number, max?: number, cur?: number) => {\n let msg = '';\n if (cur <= min) msg = `Try to use more ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= max) msg = `Try to use less ${key}. Ideally you should use ${min}-${max} ${key}`;\n if (cur >= min && cur <= max) msg = `Good job. You're in the optimal range.`;\n return msg;\n };\n\n const setHeadingsTooltip = (h1value: number, h1Min: number, h1Max: number, h2value: number, h2Min: number, h2Max: number, h3value: number, h3Min: number, h3Max: number) => {\n return \n \n H1 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h1value}/{h1Min}-{h1Max}\n \n
\n \n H2 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h2value}/{h2Min}-{h2Max}\n \n
\n \n H3 headings\n \n = 2) ? 'red' : 'green'}/>\n {' '}{h3value}/{h3Min}-{h3Max}\n \n
\n ;\n };\n const onChangeTab = key => {\n setActiveKey(key);\n };\n\n const openText = scrollToText => {\n const anchorTag = document.querySelector('a[href=\"' + scrollToText + '\"]') as HTMLElement;\n if (anchorTag) {\n anchorTag?.classList.add('animateAnchor');\n anchorTag?.scrollIntoView({behavior: 'smooth', block: 'start'});\n setTimeout(() => {\n anchorTag?.classList.remove('animateAnchor');\n }, 3000);\n }\n };\n\n\n const setLinksTooltip = (internalLinksData, externalLinksData) => {\n return \n onChangeTab(key)}\n >\n \n Recommended:\n {internalLinksData.internalLinksMin} - {internalLinksData.internalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? ()=> viewSuggestionHandler('links') : ()=> {}}>\n {!isFetchingIntLinksSug && internalLinkSuggestionsV2?.allLinks?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {internalLinksData.internalLinksLength}\n internalLinksData.internalLinksMax) ?\n faArrowDown : faCheck}\n color={(internalLinksData.internalLinksLength < internalLinksData.internalLinksMin) ?\n 'red' : (internalLinksData.internalLinksLength > internalLinksData.internalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {internalLinksData?.internalLinks?.map((item, index) => openText(item)}>{item} \n window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n Recommended:\n {externalLinksData.externalLinksMin} - {externalLinksData.externalLinksMax}\n 0 ? true : false}\n href='javascript:void(0)'\n onClick={!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? ()=> viewSuggestionHandler('terms') : ()=> {}}>\n {!isFetchingIntLinksSug && analytics?.commonCitations?.length > 0 ? 'View suggestions' : 'No suggestions'}\n \n \n \n Current value:\n {externalLinksData.externalLinksLength}\n externalLinksData.externalLinksMax) ?\n faArrowDown : faCheck}\n color={(externalLinksData.externalLinksLength < externalLinksData.externalLinksMin) ?\n 'red' : (externalLinksData.externalLinksLength > externalLinksData.externalLinksMax) ?\n 'red' : 'green'}/>\n \n \n {externalLinksData?.externalLinks?.map((item, index) => openText(item)}>{item} window.open(item, '_blank')} icon={faArrowUpRightFromSquare} /> \n \n \n ;\n };\n\n const countsSetup = [{\n label: 'Word Count:',\n value: wordCount,\n min: suggestedWordCountLimits?.lower,\n max: suggestedWordCountLimits?.upper,\n tooltipLabel: tooltipMsg('words', suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper, wordCount),\n showTooltip: shouldShowTooltip(suggestedWordCountLimits?.lower, suggestedWordCountLimits?.upper),\n loading: isWordCountLoading,\n },\n {\n label: 'Paragraphs:',\n value: scoreCounts?.paragraphs,\n min: scoreCounts?.paragraphsMin,\n max: scoreCounts?.paragraphsMax,\n tooltipLabel: tooltipMsg('paragraphs', scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax, scoreCounts?.paragraphs),\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n },\n {\n label: 'Headings:',\n value: scoreCounts?.headings,\n min: scoreCounts?.headingsMin,\n max: scoreCounts?.headingsMax,\n // tooltipLabel: tooltipMsg('headings', scoreCounts?.headingsMin, scoreCounts?.headingsMax, scoreCounts?.headings),\n tooltipLabel: setHeadingsTooltip(scoreCounts?.h1, scoreCounts?.h1Min, scoreCounts?.h1Max, scoreCounts?.h2, scoreCounts?.h2Min, scoreCounts?.h2Max, scoreCounts?.h3, scoreCounts?.h3Min, scoreCounts?.h3Max),\n showTooltip: false,\n loading: isWordCountLoading,\n headingData: {\n h1: scoreCounts?.h1,\n h2: scoreCounts?.h2,\n h3: scoreCounts?.h3,\n h1Min: scoreCounts?.h1Min,\n h1Max: scoreCounts?.h1Max,\n h2Min: scoreCounts?.h2Min,\n h2Max: scoreCounts?.h2Max,\n h3Min: scoreCounts?.h3Min,\n h3Max: scoreCounts?.h3Max,\n },\n },\n {\n label: 'Links:',\n value: 30,\n min: 2,\n max: 12,\n showTooltip: shouldShowTooltip(scoreCounts?.paragraphsMin, scoreCounts?.paragraphsMax),\n loading: isWordCountLoading,\n tooltipLabel: setLinksTooltip(\n {\n internalLinks: toJS(scoreCounts?.internalLinks),\n internalLinksLength: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n },\n {\n externalLinks: toJS(scoreCounts?.externalLinks),\n externalLinksLength: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n externalLinksMin: scoreCounts?.externalLinksMin,\n externalLinksMax: scoreCounts?.externalLinksMax,\n },\n ),\n linksData: {\n internalLinks: !scoreCounts?.internalLinks ? '-' : scoreCounts?.internalLinks?.length,\n externalLinks: !scoreCounts?.externalLinks ? '-' : scoreCounts?.externalLinks?.length,\n internalLinksMin: scoreCounts?.internalLinksMin,\n internalLinksMax: scoreCounts?.internalLinksMax,\n externalLinksMax: scoreCounts?.externalLinksMax,\n externalLinksMin: scoreCounts?.externalLinksMin,\n },\n },\n // {\n // label: 'Images:',\n // value: scoreCounts?.images,\n // min: scoreCounts?.imagesMin,\n // max: scoreCounts?.imagesMax,\n // tooltipLabel: tooltipMsg('images', scoreCounts?.imagesMin, scoreCounts?.imagesMax, scoreCounts?.images),\n // showTooltip: shouldShowTooltip(scoreCounts?.imagesMin, scoreCounts?.imagesMax),\n // loading: isWordCountLoading,\n // },\n ];\n\n const contentProgressMessage = value => {\n if ((feTargetKeywords?.length == 0 || !currentEditorState?.getCurrentContent().hasText()) && value == 0) {\n return <>\n {!isScoreLoading ? \n Add Target Keywords and Start Writing to see how your content ranks\n :\n \n \n \n \n {score ?? 0}/100\n \n \n \n {`Avg: ${scoreExtended?.avg ?? '-'}`}\n \n \n {`Top: ${scoreExtended?.top ?? '-'}`}\n \n \n\n \n \n {countsSetup.map((item, idx) => {\n return ;\n })}\n \n\n \n\n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst RightSection = styled.div`\n\n`;\nconst StyleHeadingsTooltipTitle = styled.div``;\nconst StyledLinksTabs = styled(Tabs)`\ncolor: #4E5156;\nfont-size: 12px;\nfont-weight: 400;\n.ant-tabs-nav {\n margin: 0 0 12px 0;\n \n .ant-tabs-nav-wrap {\n .ant-tabs-nav-list{\n .ant-tabs-tab{\n padding: 4px 0px;\n &:hover{\n color: #121212;\n }\n }\n .ant-tabs-tab-active{\n .ant-tabs-tab-btn {\n color: #121212;\n\n }\n }\n .ant-tabs-ink-bar{\n background: #F1AA3E !important;\n height: 5px;\n border-radius: 2px 2px 0px 0px;\n }\n }\n }\n}\n`;\n\nconst TabsStyled = styled(TabPane)``;\nconst StyledLinksDiv = styled.ul`\nmax-height: 200px;\noverflow-y: auto;\nmargin-left: -15px;\n.linkopen{\n margin-left: 5px !important;\n cursor: pointer;\n &:hover{\n color: #2D6CCA !important;\n }\n}\n::-webkit-scrollbar {\n width: 4px;\n}\n::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb {\n background: #3E4144;\n border-radius: 10px;\n}\n::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n`;\n\nconst StyledRecommender = styled.div`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\n`;\nconst StyledRecomentedValue = styled.span`\ncolor: #121212;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 600;\n`;\nconst StyledSuggestionLink = styled.a<{showAsLink}>`\ncolor: ${p=> p.showAsLink ? '#2D6CCA' : '#A3A4A4'};\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\ntext-decoration-line: none;\nmargin-left: 10px;\ncursor: ${p=> p.showAsLink ? 'pointer' : 'default'};\n&:hover{\n color: ${p=> p.showAsLink ? '#5487d4' : '#A3A4A4'};\n text-decoration-line: ${p=> p.showAsLink ? 'underline' : 'none'};\n}\n`;\nconst StyledCurrentValue= styled.p`\ncolor: #4E5156;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-weight: 400;\nmargin-bottom: 2px;\nspan{\n color:#121212;\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 600;\n margin-left: 4px;\n}\n`;\nconst StyledLinkItem = styled.span`\ncolor: #000;\nfont-family: 'Inter', sans-serif;\nfont-size: 12px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 18px;\nmargin-bottom: 2px;\ncursor: pointer !important;\n&:hover{\n text-decoration: underline;\n}\n`;\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\nmargin-left: 6px;\nheight: 10px;\npadding-bottom:1px;\n`;\n\n// const StyledAnchor = styled.a`\n// text-decoration: none;\n// transition: text-decoration 0.2s;\n\n// &:hover {\n// text-decoration: underline;\n// }\n// `;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\n\nexport const WordCount = observer(() => {\n const secondAntIcon = \n Word count:\n {!currentPage?.isWordCountLoading ? <>\n \n = currentPage?.content?.suggestedWordCountLimits?.lower && currentPage?.content?.wordCount <= currentPage?.content?.suggestedWordCountLimits?.upper}/> \n {currentPage?.content?.wordCount} :\n }\n ;\n});\n\n\nconst Container = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8;\n height: 18px;\n cursor: default;\n`;\nconst Dot = styled.div<{isWithinRecomendedRange?: boolean}>`\n width: 4px;\n height: 4px;\n background-color: ${p => p.isWithinRecomendedRange ? '#1aceb3' : '#ff8436'};\n border-radius: 100%;\n display: inline-block;\n margin-bottom: 2px;\n margin-left: 5px;\n margin-right: 5px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {ContentScore} from './ContentScore';\nimport {useTranslation} from 'next-i18next';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {Progress} from 'antd';\nimport {getProgressColor} from '@/utils/colors';\nimport {WordCount} from './WordCount/WordCount';\nimport {SidebarTooltip} from '../../Common/SideBarTooltip/sidebarTooltip';\nimport {Dispatch, SetStateAction} from 'react';\ninterface HeaderSectionProps {\n setViewSuggestionsOption: Dispatch>;\n setLinksDropDownFromSuggestion: Dispatch>;\n}\n\nexport const HeaderSection = observer(({setViewSuggestionsOption, setLinksDropDownFromSuggestion}: HeaderSectionProps) => {\n const {t} = useTranslation('common');\n const {\n contentOptimizer: {\n currentPage: {\n isScoreLoading,\n focusTermsExpanded,\n isTaActive,\n isLinkActive,\n content: {\n score,\n },\n },\n }} = useStore('');\n\n\n return <>\n { (!focusTermsExpanded && (!isTaActive && !isLinkActive)) ? \n \n \n {t('content-score')} \n \n \n \n\n \n \n\n : \n \n {!isScoreLoading ? (score ?? '-') : '-'}} />\n \n \n {t('content-score')} \n \n \n \n \n \n }\n ;\n});\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst MiniTitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n\nconst MiniContainer = styled.div`\n width: 100%;\n display: flex;\n justify-content: space-between;\n height: 50px;\n`;\n\nconst ScoreAndWordCount = styled.div`\n display: flex;\n`;\nconst RightSection = styled.div`\n margin-left: 10px;\n`;\n\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCircleInfo} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const MissingPlacementsBanner = observer(() => {\n const [show, setShow] = useState(true);\n const [termsWithNoSuggestions, setTermsWithNoSuggestions] = useState([]);\n\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n useEffect(() => {\n const prepArr = [];\n for (let i = 0; i < termsForInsertion?.length; i++) {\n if (!termsAssistantSuggestions?.find(item => item.termIncluded?.includes(termsForInsertion[i].name))) {\n prepArr.push(termsForInsertion[i].name);\n }\n }\n\n setTermsWithNoSuggestions(prepArr);\n }, [...(termsForInsertion ?? []), ...(termsAssistantSuggestions ?? [])]);\n\n const noPlacementsTermsCount = () => {\n const content = (\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return {`‧ ${term}`};\n })}\n \n );\n\n\n return \n \n {termsWithNoSuggestions?.length > 1 ? `${termsWithNoSuggestions?.length} terms` : '1 term'}\n \n ;\n };\n\n return (show && termsWithNoSuggestions?.length > 1) ?\n \n \n \n We could not find a placement for\n {noPlacementsTermsCount()}\n \n setShow(false)}>Dismiss\n :\n <>;\n});\n\nconst Wrapper = styled.div`\n width: 100%;\n background-color: ${opaqueColor('#F1AA3E', 15)};\n padding: 9px 12px;\n display: flex;\n cursor: default;\n font-size: 12px;\n display: flex;\n align-items: center;\n border-radius: 8px;\n margin-bottom: 10px;\n display: flex;\n flex-wrap: wrap;\n`;\n","import {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\ninterface SingleTermProps {\n term: any;\n}\n\nexport const SingleTerm = observer(({term}: SingleTermProps) => {\n const {\n contentOptimizer: {\n currentPage: {\n stagingTaSuggestions,\n setTaActiveTerm,\n taActiveTerm,\n highlightedNodeId,\n },\n }} = useStore('');\n\n const [dots, setDots] = useState({\n total: 0,\n saved: 0,\n dismissed: 0,\n });\n\n useEffect(() => {\n const savedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'accepted');\n const dismissedPlacements = stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name) && suggestion.status == 'dismissed');\n\n setDots(() => {\n return {\n total: term.placements,\n saved: savedPlacements?.length ?? 0,\n dismissed: dismissedPlacements?.length ?? 0,\n };\n });\n }, [...stagingTaSuggestions]);\n\n\n const generatePlacmenetsInfo = dots => {\n if (dots.saved == 0 && dots.dismissed == 0) return `${dots.total} available placements`;\n\n let response = '';\n if ((dots.total - dots.dismissed - dots.saved) > 0) response = ` ‧ ${dots.total} available`;\n if (dots.dismissed) response = `${dots.dismissed} dismissed ${response}`;\n if (dots.saved) response = `${dots.saved} accepted ${dots.dismissed > 0 ? ` ‧ ` : ``} ${response}`;\n return response;\n };\n\n const onTermClickHandler = curTerm => {\n if (!taActiveTerm?.term || taActiveTerm.term !== curTerm.name) {\n setTaActiveTerm({\n class: curTerm.name.replaceAll(' ', '-'),\n term: curTerm.name,\n order: 0,\n });\n } else {\n const totalOccurances = document.getElementsByClassName(taActiveTerm.class)?.length;\n\n const updatedValues = {\n class: taActiveTerm.class,\n term: taActiveTerm.term,\n order: taActiveTerm.order < totalOccurances - 1 ? taActiveTerm.order + 1 : 0,\n };\n\n setTaActiveTerm(updatedValues);\n }\n };\n\n return onTermClickHandler(term)} className={taActiveTerm?.term == term.name ? 'isActive' : ''}>\n \n {term.name}
\n \n \n {generatePlacmenetsInfo(dots)}\n \n \n \n \n {stagingTaSuggestions?.filter(suggestion => suggestion.termIncluded?.includes(term.name))?.sort(item => item.status == 'accepted' ? -1 : item.status == 'default' ? 0 : 1)?.map((suggestion, idx) => {\n if (suggestion.status == 'default') return ;\n if (suggestion.status == 'dismissed') return ;\n if (suggestion.status == 'accepted') return ;\n })}\n \n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n padding: 8px 16px;\n margin-top: 4px;\n margin-bottom: 4px;\n background-color: ${opaqueColor('#4E5156', 30)};\n border-radius: 10px;\n cursor: pointer;\n transition: background .3s ease-in;\n display: flex;\n\n .termName { \n margin: 0px;\n }\n\n &.isActive {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n \n &:hover {\n background: linear-gradient(90.16deg, ${opaqueColor('#E15E83', 20)} 2.81%, ${opaqueColor('#F58069', 20)} 96.58%);\n\n .termName {\n background: linear-gradient(90.16deg, #E15E83 2.81%, #F58069 96.58%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n }\n`;\n\nconst Data = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst PlacementsInfo = styled.div`\n font-size: 12px;\n color: #A3A4A4 !important;\n`;\n\nconst DotsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n width: 28%;\n margin-left: 2%;\n margin-top: auto;\n // flex-direction: row-reverse;\n`;\n\nconst Dot = styled.div<{color: string; isActive: boolean}>`\n width: 7px;\n height: 7px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: 100%;\n background-color: ${p => p.color};\n position: relative;\n\n &::after {\n content: '';\n display: ${p => p.isActive ? 'block' : 'none'};\n width: 11px;\n height: 11px;\n border-radius: 100%;\n position: absolute;\n top: -2px;\n left: -2px;\n background-color: transparent;\n border: 1px solid red;\n }\n`;\n\n\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport {SingleTerm} from './SingleTerm';\n\nexport const TermsList = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n termsForInsertion,\n termsAssistantSuggestions,\n },\n }} = useStore('');\n\n const [finalTermsList, setFinalTermsList] = useState([]);\n\n useEffect(() => {\n setFinalTermsList([]);\n if (termsAssistantSuggestions?.length) {\n for (let i = 0; i < termsForInsertion.length; i++) {\n const termOccurances = termsAssistantSuggestions.filter(suggestion => suggestion.termIncluded?.includes(termsForInsertion[i].name));\n if (termOccurances?.length) {\n setFinalTermsList(cur => [...cur, {...termsForInsertion[i], placements: termOccurances?.length}]);\n }\n }\n }\n }, [...(termsAssistantSuggestions ?? []), ...(termsForInsertion ?? 0)]);\n\n return \n {finalTermsList?.map((term, idx) => {\n return ;\n })}\n ;\n});\n","import {CommonInput} from '@/components/common-components';\nimport {Button, Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCaretDown, faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover, Spin, Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const TermsSelectionDropdown = observer(() => {\n const [selectedTerms, setSelectedTerms] = useState([]);\n const [popoverVisible, setPopoverVisible] = useState(false);\n const [searchQuery, setSearchQuery] = useState('');\n const [showLimitError, setShowLimitEror] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n fetchTaSuggestions,\n termsForInsertion,\n analytics,\n taSuggestionsLoading,\n },\n }, settings: {\n customer: {getCustomerQuota},\n }} = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}}}} = useStore('');\n\n const antIcon = \n \n \n onTermsSearchHandler(e.target.value)}/>\n \n \n \n {`AI Quota: ${quotaUtilization?.ca?.allowedAiContentGeneration?.consumed}/${quotaUtilization?.ca?.allowedAiContentGeneration?.total}`}\n \n \n \n\n \n onBulkSelectTop20Handler()}>Select top 20 terms \n onUncheckAllClickHandler()}>Uncheck all \n \n {showLimitError ?\n Please select less than 50 topical terms. :\n null}\n \n {[\n ...(analytics?.includeMoreTerms ?? []),\n ...(analytics?.includedTerms ?? []),\n ...(analytics?.includeLessTerms ?? []),\n ].filter(term => term.name.includes(searchQuery))?.map((term, idx) => {\n return \n item.name).includes(term.name)}\n onChange={e => handleCheckboxClick(e, term)}\n disabled={term.status == 'include-less'}>\n {term.name} \n \n \n \n Current usage:\n {term.usedCount}\n \n \n Recommended usage:\n {term.requiredCountMin}\n \n \n Maximum usage:\n {term.requiredCountMax}\n \n }>\n {`${term.usedCount}/${term.requiredCountMin}`} \n \n ;\n })}\n \n \n setPopoverVisible(false)}>Cancel \n \n \n \n );\n\n\n return \n onTriggerClickHandler()}>\n {`Select terms ${selectedTerms?.length}`}\n \n ;\n});\nconst Trigger = styled.div`\n color: #34aef3 !important;\n font-size: 12px;\n cursor: pointer;\n`;\nconst Wrapper = styled.div`\n\n`;\nconst HeadingSection = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\nconst SearchBox = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n`;\nconst QuotaInfo = styled.div`\n color: #4E5156;\n margin-bottom: 12px;\n`;\nconst CommonInputStyled = styled(CommonInput)`\n border: 0px solid transparent;\n height: 30px;\n\n &:active {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n &:hover {\n border: 0px solid transparent;\n box-shadow: 0px 0px 0px 0px transparent;\n }\n\n &::placeholder {\n color: #A3A4A4;\n font-weight: 400;\n font-size: 15px;\n }\n`;\nconst ControllsBar = styled.div`\n display: flex;\n justify-content: space-between;\n color: #2D6CCA;\n font-size: 12px;\n background: #F9F9FB;\n box-shadow: 0px 1px 0px #E8E8E8, 0px -1px 0px #E8E8E8;\n margin-left: -15px;\n margin-right: -15px;\n padding: 10px 15px\n`;\nconst BulkControllBtn = styled.div`\n cursor: pointer;\n`;\n\nconst TermsList = styled.div`\n max-height: 300px;\n overflow-y: scroll;\n margin-right: -15px;\n padding-right: 15px;\n margin-top: 10px;\n\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.12) ;\n scrollbar-track-color: rgba(138,138,138,0.32);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.4);\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n }\n`;\nconst SingleTermRow = styled.div<{opaque: boolean}>`\n display: flex;\n\n opacity: ${p => p.opaque ? '.4' : 1};\n`;\n\nconst CheckboxStyled = styled(Checkbox)`\n display: flex;\n width: 100%;\n\n .ant-checkbox-wrapper {\n width: 100%;\n }\n\n .ant-checkbox-inner {\n border-radius: 4px !important;\n }\n .ant-checkbox-checked .ant-checkbox-inner {\n background-color: #2D6CCA !important;\n border-color: #2D6CCA !important;\n border-radius: 4px !important;\n }\n`;\n\nconst TermName = styled.div`\n cursor: default;\n margin-left: 10px;\n color: #4E5156;\n`;\nconst TermUsage = styled.div`\n cursor: default;\n margin-left: auto;\n color: #4E5156;\n`;\nconst BtnsContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n padding-top: 10px;\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Divider, Spin} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {MissingPlacementsBanner} from './MissingPlacementsBanner';\nimport {TermsList} from './TermsList';\nimport {TermsSelectionDropdown} from './TermsSelectionDropdown';\nimport {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n// import {NextImg} from '@/utils/nextImg';\n\n\nexport const TermsAssistantRightSidebar = observer(() => {\n const {\n contentOptimizer: {\n currentPage: {\n setIsTaActive,\n setFocusTermsForInsertion,\n editContent,\n stagingTaSuggestions,\n setIsTaUpdating,\n updatingTa,\n clearAllTaData,\n setCurrentEditorState,\n },\n }} = useStore('');\n\n const antIcon =
'));\n }\n\n if (stagingTaSuggestions[i].isSuggestion) {\n if (stagingTaSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('\n \n \n Terms Assistant \n \n \n Go through the suggestions for inserting terms to see how they look like in your article. Accept or dismiss individual ones.\n
\n
\n * Save changes to update your article.\n \n \n \n item.status !== 'default')}\n color='green'\n style={{marginBottom: 10, width: '-webkit-fill-available', justifyContent: 'center', display: 'flex'}}\n onClick={() => onSubmitHandler()}>\n {updatingTa ? 'Updating Article...' : 'Save & Update Article'}\n {updatingTa ? onCancelClickHandler()}>\n Cancel\n \n\n \n ;\n});\n\nconst TaWrapper = styled.div`\n display: flex;\n flex-direction: column;\n height: calc(100% - 50px);\n padding-bottom: 20px;\n`;\nconst TermsMainWrapper = styled.div`\n flex: 1;\n overflow-y: auto;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\nconst ActionButtonsContainer = styled.div`\n background-color: #24262a;\n width: 100%;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n`;\nconst Description = styled.div`\n font-size: 12px;\n color: #e8e8e8;\n line-height: 15px;\n margin-bottom: 20px;\n`;\n","import {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {getProgressColor} from '@/utils/colors';\nimport {numberWithCommas} from '@/utils/number';\nimport {Progress, Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from '../style.module.scss';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n competitor: SingleCompetitorType;\n loading: boolean;\n}\n\nexport const SingleCompetitor = observer(({competitor, loading}: Props) => {\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n {competitor.url && addDefaultSrc(e)}\n height={20}\n width={20}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor.url}`} />} \n \n {competitor?.url}}>\n {competitor?.title}\n \n\n \n\n \n {`#${competitor?.position}`}\n \n\n {`-`}\n\n \n \n {competitor?.contentScore}\n }\n className={styles.progress}\n />\n \n \n\n {`-`}\n\n \n \n {`${numberWithCommas(competitor?.wordCount) || 0} words`}\n \n \n \n {/* {competitor?.url && urlValidationRegex.test(competitor?.url) ?\n {competitor?.url} : null} */}\n\n {/* {competitor?.metaDesc && competitor?.metaDesc.length > 90 ? competitor?.metaDesc.substring(0, 90) + '...' : competitor?.metaDesc} */}\n \n ;\n});\n","import {useEffect} from 'react';\nimport {SingleCompetitor} from './SingleCompetitor/SingleCompetitor';\nimport styles from './style.module.scss';\nimport css from '../../index.module.scss';\nimport {Typography, Spin, Select, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const TopRankingCompetitors = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {Option} = Select;\n const {Title} = Typography;\n const antIcon = \n Top Ranking Competitors {currentPage?.isAnalyzing && <Spin indicator={antIcon} style={{marginRight: '20px'}}/>}\n \n currentPage.openCompetingFocusTermsDrawer()}>\n Analyse Content\n \n \n\n {currentPage?.analytics?.competitorsData?.length ? \n \n handleOnSortChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n {currentPage?.analytics?.competitorsData?.filter(item => item.keyword === currentPage?.topRankingCompetitorActiveKw)[0]?.competitors?.map(competitor => {\n return competitor?.title && ;\n })}\n \n :\n !currentPage?.content?.targetKeywords?.length ? \n {/* \n {\n updatedButtonConf().map((item, idx) => {\n return \n {\n if (anyButtonClicked || item.disabled) return;\n item.callback();\n }} disabled={item.disabled}>\n {item.loading ? : \n ;\n })\n }\n ;\n});\n\nconst Wrapper = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n`;\nconst SingleItem = styled.div<{hoverColor: string; anyButtonClicked?: boolean; disabled?: boolean}>`\n width: calc(50% - 5px);\n margin-bottom: 10px;\n transition: background-color .3s ease;\n background-color: #323539;\n cursor: ${p => p.anyButtonClicked || p.disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n justify-content: center;\n align-items: center;\n color: #fff;\n padding: 5px;\n border-radius: 6px;\n font-size: 13px;\n opacity: ${p => p.disabled ? .4 : 1};\n\n &:hover {\n background-color: ${p => !p.anyButtonClicked && p.hoverColor};\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {FocusTermsTabs} from './FocusTermsAndQuestions/FocusTermsTabs';\nimport {HeaderSection} from './HeaderSection';\nimport {TermsAssistantRightSidebar} from './TermsAssistant/RightSidebar';\nimport {TopRankingCompetitors} from './TopRankingCompetitors/TopRankingCompetitors';\nimport {DrawersTriggers} from './DrawersTriggers';\nimport {useState} from 'react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Analytics = observer(({changeView}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const [viewSuggestionsOption, setViewSuggestionsOption] = useState(false);\n const [linksDropDownFromSuggestion, setLinksDropDownFromSuggestion] = useState<'links' | 'terms'>('links');\n\n return \n {!currentPage?.isLinkActive && }\n {currentPage?.isTaActive ? \n \n \n {!currentPage.focusTermsExpanded ? }\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst ContentContainer = styled.div`\n overflow-y: auto;\n height: 100%;\n padding-right: 5px;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #E8E8E8;\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\n\n","import React from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n isSubscriber: boolean;\n isCompetitorsTable: boolean;\n setFilteredCompetitorsData: React.Dispatch>;\n setCompetitors: React.Dispatch>;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n}\n\nexport const KeywordSelector = observer(({isSubscriber, isCompetitorsTable, setFilteredCompetitorsData, setActiveKw, setCompetitors, activeKw}: Props) => {\n const {Option} = Select;\n const {contentOptimizer: {currentPage}} = useStore('');\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n if (isCompetitorsTable) {\n setFilteredCompetitorsData(toJS(currentPage?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n }\n };\n\n return \n \n Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ ;\n});\n\nconst KeywordDropdownWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`;\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {Progress, Tooltip, Popover} from 'antd';\nimport {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {Table} from '@/components/common-components/components/index';\nimport styles from './style.module.scss';\nimport {numberWithCommas} from '@/utils/number';\nimport {SingleCompetitorType} from '@/store/content-optimizer/CurrentPageModel';\nimport {KeywordSelector} from './KeywordSelector';\nimport {useStore} from '@/store/root-store';\nimport {NextImg} from '@/utils/nextImg';\n\n\ninterface Props {\n store: CurrentPageStore;\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsTable = observer(({\n store,\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n allSchemasCount,\n nullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n }}} = useStore('');\n const [isSmallScreen, setIsSmallScreen] = useState(true);\n const [allowScroll, setAllowScroll] = useState(false);\n\n const onWindowResize = () => {\n setIsSmallScreen(window.innerWidth < 1441);\n setAllowScroll(window.innerWidth < 768);\n };\n\n useEffect(() => {\n onWindowResize();\n window.addEventListener('resize', onWindowResize);\n return () => {\n window.removeEventListener('resize', onWindowResize);\n };\n }, []);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const getProgressColor = (value: number, min: number, average: number, max?: number) => {\n if (value <= min) {\n return '#F44343';\n }\n if (value <= average && value > min) {\n return '#FF8536';\n }\n if (value > average) {\n if (max && value < max) {\n return '#BFE15E';\n }\n return '#52D477';\n }\n return '#52D477';\n };\n\n const reFormatSchemaType = value => {\n const outputString = value.replace(/([a-z])([A-Z])/g, '$1 $2')\n .replace(/([A-Z])([A-Z][a-z])/g, '$1 $2');\n return outputString;\n };\n\n const handleTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...competitors];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n setCompetitors(data);\n } else {\n setCompetitors(store?.analytics?.competitorsData?.filter(item => item.keyword === activeKw)[0]?.competitors);\n }\n };\n\n useEffect(() => {\n if (selectedSchema?.value == 'all-schemas') {\n setFilteredCompetitorsData(competitors);\n } else if (selectedSchema?.value == 'no-schemas') {\n setFilteredCompetitorsData(competitors?.filter(item => item?.schema?.length == 0 || item?.schema == null));\n } else {\n const selectedSchemaValue = selectedSchema?.value;\n\n const filteredItems = [];\n\n competitors?.forEach(item => {\n if (item?.schema) {\n if (Array.isArray(item?.schema)) {\n item?.schema?.forEach(ele => {\n if (ele?.graph) {\n if (Array.isArray(ele?.graph)) {\n ele?.graph?.forEach(graphItem => {\n if (Array.isArray(graphItem?.type)) {\n if (graphItem?.type?.includes(selectedSchemaValue)) {\n filteredItems.push(item);\n }\n } else if (graphItem?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n } else if (ele?.type === selectedSchemaValue) {\n filteredItems.push(item);\n }\n });\n }\n }\n });\n\n setFilteredCompetitorsData(filteredItems);\n }\n }, [selectedSchema]);\n\n const columns = [\n {\n title: () => #,\n dataIndex: 'position',\n key: 'position',\n sortField: 'position',\n width: 45,\n fixed: allowScroll ? false : 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return {record?.position};\n },\n },\n {\n title: () => {'PAGE / URL'.toUpperCase()},\n dataIndex: 'title',\n key: 'title',\n sortField: 'title',\n fixed: allowScroll ? false : 'left' as 'left',\n width: isSmallScreen ? 300 : 'auto',\n ellipsis: true,\n align: 'left' as 'left',\n render: (_, record: SingleCompetitorType) => {\n return \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${record?.url}`} /> \n {record?.title}
\n {record?.url}}>\n \n {record?.title}\n {record?.url}\n \n ;\n },\n },\n {\n title: () => {'DR'.toUpperCase()},\n dataIndex: 'dr',\n key: 'dr',\n sortField: 'dr',\n sorter: (a: any, b: any) => a.dr - b.dr,\n align: 'center' as 'center',\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.dr ? record?.dr % 1 === 0 ? record?.dr : parseFloat(record?.dr.toFixed(2)) : 0;\n return \n \n {percent}\n ;\n },\n },\n {\n title: () => {'CS'.toUpperCase()},\n dataIndex: 'contentScore',\n key: 'contentScore',\n sortField: 'contentScore',\n align: 'right' as 'right',\n sorter: (a: any, b: any) => a.contentScore - b.contentScore,\n width: 60,\n render: (_, record: SingleCompetitorType) => {\n const percent = record?.contentScore ? record?.contentScore % 1 === 0 ? record?.contentScore : parseFloat(record?.contentScore.toFixed(2)) : 0;\n return \n {percent }}\n />\n ;\n },\n },\n {\n title: () => {'Schema'.toUpperCase()},\n dataIndex: 'schema',\n key: 'schema',\n sortField: 'schema',\n align: 'center' as 'center',\n width: 150,\n render: (_, record: SingleCompetitorType) => {\n let schemaLength = 0;\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaLength += 1 : Array.isArray(item?.graph) && item?.graph?.map(graphItem => graphItem?.type ? schemaLength += 1 : '');\n });\n\n const schemaItemsList = [];\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaItemsList.push(item) : Array.isArray(item?.graph) && item?.graph?.map(graphItem => schemaItemsList.push(graphItem));\n });\n return \n {record?.schema != null && record?.schema != undefined && Array.isArray(record?.schema) && record?.schema?.length != 0 ?\n <>\n \n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, 0, record?.schema[0])}>{reFormatSchemaType(String(record?.schema ? (record?.schema[0]?.graph ? record?.schema[0]?.graph[0]?.type : record?.schema[0]?.type) : '-'))} \n {schemaLength > 1 &&\n <>\n , \n {schemaItemsList?.map((item, idx) =>\n <>\n {idx == 0 ? '' :\n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, idx, item)}\n style={{width: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2D6CCA', cursor: 'pointer', paddingLeft: '20px'}}>\n {reFormatSchemaType(String(item?.type))} \n }\n ,\n )}}>\n +{schemaLength - 1} \n \n }\n \n : '-'\n }\n ;\n },\n },\n {\n title: () => <>{'int'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'internalLinks',\n key: 'internalLinks',\n sortField: 'internalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.internalLinks?.length - b?.internalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.internalLinks?.length == 0 ?\n {numberWithCommas(record?.internalLinks?.length) || '-' } :\n \n {record?.internalLinks?.length > 0 ? record?.internalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.internalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => <>{'ext'.toUpperCase()}
{'links'.toUpperCase()},\n dataIndex: 'externalLinks',\n key: 'externalLinks',\n sortField: 'externalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.externalLinks?.length - b?.externalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.externalLinks?.length == 0 ?\n {numberWithCommas(record?.externalLinks?.length) || '-' } :\n \n {record?.externalLinks?.length > 0 ? record?.externalLinks?.map((item, idx) =>\n \n {item}
) : ''}\n }\n title=''\n placement='bottom'\n trigger='click'>\n {numberWithCommas(record?.externalLinks?.length) || '-' } \n \n }\n ;\n },\n },\n {\n title: () => {'h1'.toUpperCase()},\n dataIndex: 'h1Count',\n key: 'h1Count',\n sortField: 'h1Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h1Count - b?.h1Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h1Count) || '-' };\n },\n },\n {\n title: () => {'h2'.toUpperCase()},\n dataIndex: 'h2Count',\n key: 'h2Count',\n sortField: 'h2Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h2Count - b?.h2Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h2Count) || '-' };\n },\n },\n {\n title: () => {'h3'.toUpperCase()},\n dataIndex: 'h3Count',\n key: 'h3Count',\n sortField: 'h3Count',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.h3Count - b?.h3Count,\n width: 50,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.h3Count) || '-' };\n },\n },\n {\n title: () => {'Word Count'.toUpperCase()},\n dataIndex: 'wordCount',\n key: 'wordCount',\n sortField: 'wordCount',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.wordCount - b?.wordCount,\n width: 115,\n render: (_, record: SingleCompetitorType) => {\n return {numberWithCommas(record?.wordCount) || '-' };\n },\n },\n ];\n\n return \n \n \n \n \n Types of Schema Found: \n \n setSelectedSchema({idx: 'all-schemas', value: 'all-schemas'})}>All schemas | {allSchemasCount} \n setSelectedSchema({idx: 'no-schemas', value: 'no-schemas'})}>No schemas | {nullCount} \n {schemaTypesList?.map((item, idx) => {\n return setSelectedSchema({idx: `${idx}`, value: item?.value})} key={idx}>{reFormatSchemaType(String(item?.value))} | {item?.count} ;\n })}\n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst DRWrapper = styled.div`\n background-color: rgba(45, 108, 202, 0.07);\n display: flex;\n border-radius: 6px;\n align-items: center;\n justify-content: center;\n width: 55px;\n height: 32px;\n padding: 7px 12px 8px 12px;\n`;\n\nconst PageUrlWrapper = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst TypesSchemaFilterWrapper = styled.div`\n\n`;\n\nconst SchemaFilterTitle = styled.div`\n color: #4E5156;\n font-size: 14px;\n margin-left: 10px;\n margin-bottom: 10px;\n`;\n\nconst SchemaFilterWrapper = styled.div`\n display: flex;\n gap: 20px;\n margin-bottom: 20px;\n margin-left: 10px;\n width: 97%;\n overflow-x: auto;\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n`;\n\nconst SchemaFilter = styled.div<{selectedSchema?: boolean}>`\n min-width: fit-content;\n min-height: 28px;\n border-radius: 14px;\n background: ${p => p?.selectedSchema ? 'linear-gradient(0deg, rgba(127, 78, 173, 0.20) 0%, rgba(127, 78, 173, 0.20) 100%), #FFF' : '#FFFF'};\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n border: ${p => p?.selectedSchema ? '1px solid #7F4EAD' : '1px solid #E8E8E8'};\n display: flex;\n padding: 5px 10px 6px 10px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n\nconst LinksContainer = styled.div`\n max-height: 300px;\n overflow-y: auto;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n\nconst LinkWrapper = styled.div`\n width: auto;\n font-size: 12px;\n line-height: 14px;\n color: rgb(45, 108, 202);\n white-space: pre-line;\n overflow-wrap: anywhere;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 8px;\n`;\n\nconst StyledAnchor = styled.a`\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst BlueTextWithUnderline = styled.div`\n color: #2D6CCA;\n cursor: pointer;\n text-decoration: none;\n transition: text-decoration 0.2s;\n\n &:hover {\n text-decoration: underline;\n }\n`;\n\nconst ULStyled = styled.ul`\n padding-left: 0px;\n max-height: 160px;\n overflow-y: auto;\n padding: 5px;\n margin-bottom: 0;\n width: 200px;\n\n &::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(0,0,0,0.28);\n border-radius: 10px;\n }\n`;\n","import styled from 'styled-components';\nimport {faArrowLeft} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react';\nimport {urlValidationRegex2} from '@/constants/regex';\nimport moment from 'moment';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const CompetitorsDetail = observer(() => {\n const {contentOptimizer: {\n currentPage: {\n setShowCompetitorTermsTableDetail,\n competitorSchemaObject,\n competitorTitle,\n competitorUrl,\n competitorSchemaGraphIdx,\n }}} = useStore('');\n\n const formats = [\n moment.ISO_8601,\n 'MM/DD/YYYY :) HH*mm*ss',\n ];\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n const renderSchemaData = dataObj => {\n return <>\n \n {mainLebel && mainLebel != '0' ? mainLebel == 'type' ? `@${mainLebel}` : mainLebel : ''} \n {typeof mainValue !== 'object' ? {typeof mainValue == 'boolean' ? `${mainValue ? 'Yes' : 'No'}` : (\n urlValidationRegex2?.test(String(mainValue)) ? {String(mainValue)} : (\n moment(mainValue, formats, true)?.isValid() || mainLebel?.includes('date') ? moment(mainValue)?.utc()?.format('DD MMM YYYY') : `${mainValue}`\n )\n )} :\n renderSchemaData(mainValue)}\n ;\n })}\n \n \n ;\n };\n\n return <>\n setShowCompetitorTermsTableDetail(false)\n }>\n \n \n \n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitorUrl}`} />\n \n \n {competitorTitle}\n {competitorUrl}\n \n \n \n @context \n {competitorSchemaObject?.context ?? '-'} \n @graph \n {renderSchemaData(competitorSchemaObject?.graph ? competitorSchemaObject?.graph[competitorSchemaGraphIdx] : competitorSchemaObject)}\n \n \n ;\n});\n\nconst BackArrowContainer = styled.div`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-left: 33px;\n margin-top: 37px;\n width: max-content;\n`;\n\nconst SchemaContainer = styled.div`\n width: 95%;\n margin-left: 30px;\n margin-top: 27px;\n min-height: 630px;\n background-color: white;\n border-radius: 14px;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.06);\n`;\n\nconst SchemaLabel = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 8px;\n`;\n\nconst SchemaValue = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n`;\n\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\n\nconst URL = styled.a`\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst SchemaHeader = styled.div`\n display: flex;\n align-items: center;\n margin-left: 30px;\n margin-top: 20px;\n`;\n\nconst SchemaPageTitle = styled.div`\n\n`;\n","import {observer} from 'mobx-react';\nimport {Dispatch, SetStateAction} from 'react';\nimport {CompetitorsTable} from './CompetitorsTable';\nimport {useStore} from '@/store/root-store';\nimport {CompetitorsDetail} from './CompetitorsDetail';\n\ninterface Props {\n isSubscriber: boolean;\n activeKw: string;\n setActiveKw: Dispatch>;\n setCompetitors: (value: any) => void;\n competitors: any;\n filteredCompetitorsData: any;\n setFilteredCompetitorsData: (value: any) => void;\n schemaTypesList: any;\n setSchemaTypesList: (value: any) => void;\n allSchemasCount: number;\n setAllSchemasCount: (value: number) => void;\n nullCount: number;\n setNullCount: (value: number) => void;\n selectedSchema: any;\n setSelectedSchema: (value: any) => void;\n}\n\nexport const CompetitorsDrawerTab = observer(({\n isSubscriber,\n activeKw,\n setActiveKw,\n setCompetitors,\n competitors,\n filteredCompetitorsData,\n setFilteredCompetitorsData,\n schemaTypesList,\n setSchemaTypesList,\n allSchemasCount,\n setAllSchemasCount,\n nullCount,\n setNullCount,\n selectedSchema,\n setSelectedSchema}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer: {\n currentPage: {\n showCompetitorTermsTableDetail,\n }}} = useStore('');\n\n return showCompetitorTermsTableDetail ? ranking : not ranking }\n {`for `}\n {keyword}\n \n {/* used {keyword} {score} times */}\n \n \n);\nconst focusTermsTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n);\nexport const CompetingFocusTermsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n const {contentOptimizer: {currentPage: {analytics, isCompetingFocusTermsDrawerOpen, closeCompetingFocusTermsDrawer, isOpeningKwSuggestionsFromContentResearch, setIsOpeningKwSuggestionFromContentResearch}}} = useStore('');\n const [selectedKeyword, setSelectedKeyword] = useState('');\n const [selectedCompTabKw, setSelectedCompTabKw] = useState('');\n const [isHovered, setIsHovered] = useState(false);\n const [maxElemHeight, setMaxElemHeight] = useState(0);\n const allRef = useRef(null);\n const keywordSuggestionsRef = useRef(null);\n const [activeTab, setActiveTab] = useState('1');\n\n const antIcon = {\n setActiveTab('1');\n setIsOpeningKwSuggestionFromContentResearch(false);\n closeCompetingFocusTermsDrawer();\n }}\n closeIcon={Competitor Content Analysis \n onTabChange(key)}>\n Top competitors {currentPage?.isAnalyzing && \n \n Relevant terms grid {currentPage?.isAnalyzing && \n \n \n Competing Focus Terms \n Check what focus terms your competitors are using \n \n \n exportSingleNode(allRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => (\n {i === 0 ? 'YOU' : i} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n \n Created From Scratch\n \n \n );\n }\n return (\n \n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n CONTENT SCORE\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.contentScores?.map((score, i) => (\n {percent}}\n />\n ))}\n \n
\n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item?.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}\n \n \n Keyword suggestions {currentPage?.isAnalyzing && \n \n \n {/* Keywords Suggestions */}\n Check out what keywords your competitors are using \n \n \n exportSingleNode(keywordSuggestionsRef.current)}\n >\n \n \n \n COMPETITOR RANK\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => {\n return (\n \n \n \n {x.url}\n \n \n Content Score: \n {x.contentScore}\n \n \n Word Count: \n {x.wordCount}\n \n \n }\n key={x?.url}\n >\n \n {x?.hostname}\n \n\n \n );\n })}\n \n \n KEYWORD\n \n \n {/* {selectedKeyword} */}\n \n {item.keyword} \n ))}\n \n \n
\n \n \n TARGET KEYWORD\n USAGE\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.keywordSuggestionsUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: score ? '#2AC155' : '#F44343'}}> \n \n ))}\n \n ))}\n \n \n \n \n );\n});\n\nconst Title = styled.div`\n font-weight: 500;\n font-size: 20px;\n color: #121212;\n line-height: 28px;\n`;\n\nconst TitleStyled = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n line-height: normal;\n margin: 0 0 15px 30px;\n`;\n\nconst Subtitle = styled.div`\n font-size: 16px;\n line-height: 24px;\n color: #4E5156;\n`;\n\nconst SectionHeader = styled.div`\n background: #e2e2e5;\n border-radius: 3px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst Wrapper = styled.div`\n padding: 30px;\n`;\n\nconst Square = styled.div<{isHovered: boolean}>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\nconst SelectStyled = styled(Select)`\n width: 100%;\n\n .ant-select-arrow {\n color: #121212;\n }\n`;\n\nconst Site = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n width: auto;\n display: block;\n align-items: left;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nconst IsNotRanking= styled.span`\n padding: 2px 7px;\n background-color: #F44343;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import {useEffect} from 'react';\nimport {Form, Select, Spin} from 'antd';\nimport {\n Button,\n CommonInput,\n} from '@/components/common-components/components';\nimport styles from './style.module.scss';\n\nimport {useState} from 'react';\nimport {languages} from '@/components/dashboard/pages/content-ideas/drawer/languages';\nimport Flag from '@/components/common-components/components/flag';\nimport {formatCountryCode} from '@/components/dashboard/pages/content-ideas/drawer/languageUtil';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport {observer} from 'mobx-react';\nimport {LoadingOutlined} from '@ant-design/icons';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {SCA_PAGE_CONTENT_IDEAS_GENERATE} from '@/constants/events';\nimport {useStore} from '@/store/root-store';\n\ninterface Props {\n store: ContentIdeasStore;\n pageId: any;\n drawerVisible: boolean;\n}\n\nexport const NewContentIdeaForm = observer(({store, pageId, drawerVisible}: Props) => {\n const {\n settings: {\n customer: {\n getCustomerQuota,\n },\n },\n } = useStore('');\n\n\n const usaCode = languages.find(lang => lang.code == 'en');\n\n\n const antIcon = Need some inspiration? Here you can generate unlimited article ideas on any topic you can think of.
\n\n \n \n );\n});\n","import {useState, useEffect} from 'react';\nimport styles from './style.module.scss';\nimport {faDownload} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n Button,\n} from '@/components/common-components/components';\nimport {CopyOutlined} from '@ant-design/icons';\n\nimport {Divider, Tooltip} from 'antd';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {SCA_PAGE_CONTENT_IDEA_COPY, SCA_PAGE_CONTENT_IDEA_DOWNLOAD} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {useTranslation} from 'next-i18next';\nimport parse from 'html-react-parser';\n\ninterface Props {\n idea: string;\n}\n\nexport const SingleContentIdea = ({idea}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [convertedText, setConvertedText] = useState(idea);\n\n const {t} = useTranslation('landing-page-optimizer');\n\n useEffect(() => {\n // Removing the leading space from string\n const newLineIndex = idea?.search('\\n');\n const textWithoutLeadingSpace = idea?.slice(0, newLineIndex + 1) + idea?.slice(newLineIndex + 2);\n const firstTitle = idea?.slice(0, newLineIndex + 1);\n const result = textWithoutLeadingSpace.replace(firstTitle, '' + firstTitle + '');\n\n setConvertedText(result);\n }, [idea]);\n\n\n const downloadFileToTxt = () => {\n const element = document.createElement('a');\n const file = new Blob([idea], {type: 'text/plain'});\n element.href = URL.createObjectURL(file);\n const breakFileName = idea.split(' ').length;\n const fileName = breakFileName > 4 ? idea.split(' ').slice(0, 4).join('-') : idea.split(' ').slice(0, breakFileName).join('-');\n element.download = `${fileName}`;\n document.body.appendChild(element);\n element.click();\n };\n\n return (\n \n \n {convertedText && parse(convertedText.trim())}\n
\n {\n downloadFileToTxt();\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_DOWNLOAD, {\n 'description': 'Content idea downloaded',\n });\n }}/>\n {\n navigator.clipboard.writeText(idea);\n setCopySuccess(true);\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_COPY, {\n 'description': 'Content idea copied',\n });\n }}>\n \n \n \n \n );\n};\n","// import {useState} from 'react';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport CsvDownloader from 'react-csv-downloader';\nimport {Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleContentIdea} from './SingleContentIdea';\nimport {ExportOutlined} from '@ant-design/icons';\nimport {Button} from '@/components/common-components/components';\n\ninterface Props {\n store: ContentIdeasStore;\n}\n\nexport const ContentIdeas = observer(({store}: Props) => {\n const csvModel = store?.wordsArray.map(item => ({\n title: item.split('\\n')[0],\n text: item.split('\\n')[1],\n }));\n\n const csvColumns = [\n {\n id: 'title',\n displayName: 'Title',\n },\n {\n id: 'text',\n displayName: 'Text',\n },\n ];\n return <>\n {store?.wordsArray.length ? \n {`${store?.wordsArray?.length} ideas generated for \"${store?.keyword}\" `}\n \n \n \n
: null}\n {store?.wordsArray && store?.wordsArray.map((idea, idx) => {\n return {\n contentIdeas.clearContentIdeas();\n setDrawerVisible(false);\n currentPage.setIsOpenContentGeneratorDrawer(false);\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={styles.contentIdeasDrawer}\n afterVisibleChange={visible => {\n if (visible) setDrawerVisible(true);\n }}\n >\n \n \n Content Helper\n \n \n \n \n \n \n );\n});\n","import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip, Spin} from 'antd';\nimport styles from './style.module.scss';\nimport {faCheck, faPlus, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport classNames from 'classnames';\n\ninterface Props {\n keyword: string;\n isIncluded?: boolean;\n}\n\nexport const SimilarKeyword = observer(({keyword, isIncluded}: Props) => {\n const {\n OverviewPage: {\n addToLoadingArray,\n loadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}, getCustomerQuota}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n const antIcon = \n {keyword ? keyword : '-'}\n \n \n\n {loadingArray && loadingArray.includes(keyword) ?\n \n \n Remove\n :\n // adding a check to disable button if total target kw limit is reached\n currentPage?.feTargetKeywords?.length < 15 ?\n onAddKeywordFinish()}>\n \n \n \n\n }\n\n \n ;\n});\n","import {useEffect, useState, useCallback} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {\n Drawer,\n Progress,\n Tooltip, Select} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport styled from 'styled-components';\nimport {formatNumber, numberWithCommas} from '@/utils/number';\nimport {Table, BarChartColumn, SkeletonRingLoader, Pagination, SkeletonHorizontalLoaderGray, Button} from '@/components/common-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {EChartOption} from 'echarts';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {getProgressColor} from '@/utils/colors';\nimport {faArrowUp} from '@fortawesome/pro-regular-svg-icons';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport numeral from 'numeral';\nimport Flag from '@/components/common-components/components/flag';\nimport {SimilarKeyword} from './SimilarKeyword';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const ContentResearchDrawer = observer(() => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const {\n countries: {getSpecificCountryByCode},\n OverviewPage: {\n isContentResearchDrawerOpen,\n loading,\n keywordDetail,\n closeContentResearchDrawer,\n getKeywordDetail,\n removeFromLoadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const countryName = getSpecificCountryByCode(keywordDetail?.countryCode);\n\n const [activeKw, setActiveKw] = useState('');\n const [similarKeywordsPageNumber, setSimilarKeywordsPageNumber] = useState(1);\n const [similarKeywordsPageSize] = useState(8);\n const [similarKeywordsData, setSimilarKeywordsData] = useState([]);\n const [similarKeywordsList, setSimilarKeywordsList] = useState([]);\n\n const [topCompetitorsData, setTopCompetitorsData] = useState([]);\n const [rankingPotentialData, setRankingPotentialData] = useState([]);\n\n const {Option} = Select;\n\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n getKeywordDetail(currentPage?.content?.targetKeywords?.filter(item => item.keyword === value)[0]?.id);\n };\n\n\n /* SIMILAR KEYWORDS TABLE UPDATE START */\n const handleFilterRenderData = useCallback((dataArray: any, pageNumber: number, pageSize: number) => {\n const targetKwArray = currentPage?.content?.targetKeywords && currentPage?.content?.targetKeywords.length ? toJS(currentPage.content.targetKeywords).map(item => {\n return JSON.stringify({\n keyword: item.keyword,\n countryCode: item.countryCode,\n locationId: item.locationId,\n location: item.location,\n });\n }) : [];\n\n let similarKeywordsFormattedData = [];\n if (dataArray.length && targetKwArray?.length ) {\n const updatedData = toJS(dataArray).map(item => {\n return {\n ...item,\n isKwIncluded: targetKwArray.includes(JSON.stringify({\n keyword: item.keyword,\n countryCode: currentPage.content.countryCode,\n locationId: currentPage.content.locationId,\n location: currentPage.content.location,\n })),\n };\n });\n\n\n similarKeywordsFormattedData = updatedData;\n } else {\n similarKeywordsFormattedData = dataArray;\n }\n setSimilarKeywordsData(similarKeywordsFormattedData.slice((pageNumber - 1) * pageSize, ((pageNumber - 1) * pageSize) + pageSize));\n }, []);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n const kwArray = [...(currentPage?.content?.targetKeywords ?? [])].map(kw => kw.keyword);\n removeFromLoadingArray(kwArray);\n handleFilterRenderData([...keywordDetail.similarKeywords], similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n }, [[...(currentPage?.content?.targetKeywords ?? [])].length, activeKw, toJS(keywordDetail?.similarKeywords)?.length, handleFilterRenderData, keywordDetail?.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize]);\n\n useEffect(() => {\n if (keywordDetail?.similarKeywords?.length > 0) {\n setSimilarKeywordsList(keywordDetail.similarKeywords);\n }\n }, [toJS(keywordDetail?.similarKeywords)?.length, toJS(keywordDetail?.similarKeywords), activeKw]);\n\n\n const onPaginationChange = async (pageNumber: number, pageSize: number) => {\n setSimilarKeywordsPageNumber(pageNumber);\n handleFilterRenderData(keywordDetail.similarKeywords, pageNumber, pageSize);\n };\n\n const handleIssueTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...similarKeywordsList];\n\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if (a[sortField] > b[sortField]) return 1 * _dir;\n if (a[sortField] < b[sortField]) return -1 * _dir;\n return 0;\n });\n handleFilterRenderData(data, similarKeywordsPageNumber, similarKeywordsPageSize);\n } else {\n handleFilterRenderData(keywordDetail.similarKeywords, similarKeywordsPageNumber, similarKeywordsPageSize);\n }\n };\n /* SIMILAR KEYWORDS TABLE UPDATE END */\n\n /* TOP COMPETITORS TABLE UPDATE START */\n useEffect(() => {\n if (keywordDetail?.competitors?.length > 0) {\n setTopCompetitorsData(keywordDetail.competitors);\n }\n }, [toJS(keywordDetail?.competitors)?.length, activeKw]);\n\n\n const handleTopCompetitorsTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...topCompetitorsData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setTopCompetitorsData(data);\n } else {\n setTopCompetitorsData(keywordDetail?.competitors);\n }\n };\n /* TOP COMPETITORS TABLE UPDATE END */\n\n /* RANKING POTENTIAL TABLE UPDATE START */\n useEffect(() => {\n const relevanceData = [];\n relevanceData?.push({\n competition: keywordDetail?.typicalTop10 && Object.keys(keywordDetail?.typicalTop10)[0],\n contentScore: keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n dr: keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n wordCount: keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n readAbility: keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n });\n\n if (relevanceData.length > 0) {\n setRankingPotentialData(relevanceData);\n }\n }, [\n activeKw, keywordDetail?.typicalTop10?.typicalTop10?.averageContentScores,\n keywordDetail?.typicalTop10?.typicalTop10?.averageDr,\n keywordDetail?.typicalTop10?.typicalTop10?.averageWordCount,\n keywordDetail?.typicalTop10?.typicalTop10?.averageReadability,\n ]);\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n\n const handleRankingPotentialTableChange = (pagination, filters, sorter) => {\n const {column, order} = sorter;\n const {sortField} = column || {};\n const data = [...rankingPotentialData];\n if (sortField && order && data) {\n data.sort( (a, b) => {\n const _dir = order === 'ascend' ? 1 : -1;\n if ((a[sortField] || 0) > (b[sortField] || 0)) return 1 * _dir;\n if ((a[sortField] || 0) < (b[sortField] || 0)) return -1 * _dir;\n return 0;\n });\n\n setRankingPotentialData(data);\n } else {\n setRankingPotentialData(keywordDetail?.competitors);\n }\n };\n /* RANKING POTENTIAL TABLE UPDATE END */\n\n const columns = [\n {\n title: 'AVERAGE PER COMPETION',\n dataIndex: 'competition',\n key: 'competition',\n width: 180,\n align: 'left' as 'left',\n render: (_, data) => {data?.competition || '-'},\n },\n {\n title: 'CONTENT SCORE',\n dataIndex: 'contentScore',\n sorter: true,\n sortField: 'contentScore',\n width: 100,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sorter: true,\n sortField: 'dr',\n width: 80,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n width: 110,\n align: 'center' as 'center',\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readAbility',\n dataIndex: 'readAbility',\n align: 'center' as 'center',\n width: 110,\n render: (_, data) => {\n return {data?.readAbility ? data?.readAbility : '-'};\n },\n\n },\n ];\n\n const topCompetitorColumns = [\n {\n title: 'SITE / URL',\n dataIndex: 'hostname',\n key: 'hostname',\n width: 300,\n align: 'left' as 'left',\n fixed: 'left' as 'left',\n render: (_, data) => {\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sortField: 'dr',\n sorter: true,\n width: 60,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n ;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n align: 'center' as 'center',\n width: 100,\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'};\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readability',\n dataIndex: 'readability',\n align: 'center' as 'center',\n width: 170,\n render: (_, data) => {\n return {data?.readability ? data?.readability : '-'};\n },\n\n },\n ];\n\n const squareTooltip = (hostname, url, keyword, score) => (\n \n {score} \n {score == 1 ? `time` : `times`}}\n \n \n \n );\n\n const SimilarKeywordConfig = [\n {\n title: 'KEYWORD',\n dataIndex: 'keyword',\n key: 'keyword',\n align: 'left' as 'left',\n width: 240,\n render: (_, record) => {\n return ();\n },\n },\n {\n title: 'TREND',\n dataIndex: 'histSv',\n align: 'center' as 'center',\n key: 'histSv',\n width: 70,\n render: (series: EChartOption.Series[]) => {\n const formatSeries = {\n data: series,\n itemStyle: {color: '#7f4ead'},\n type: 'bar',\n };\n return {\n closeContentResearchDrawer();\n }}\n closeIcon={\n Content Research\n \n \n \n Based on Keyword:\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n \n \n\n {loading ? :\n {keywordDetail?.countryCode ? :\n \n KD: 75 ? '#F44343' : keywordDetail?.kd < 76 && keywordDetail?.kd > 50 ? '#e4a469' : keywordDetail?.kd < 51 && keywordDetail?.kd > 25 ? '#bfe15e' : '#1d754e' : '#696777'}}>•{keywordDetail?.kd || '-'}\n }\n {loading ? : SV: {numeral(keywordDetail?.sv).format('0.[0][a]')}}\n\n {loading ? :\n Total Search Results: {keywordDetail?.totalSearchResults ? numeral(keywordDetail?.totalSearchResults).format('0.[0][a]') : '0'}}\n \n \n \n \n Ranking Potential\n {keywordDetail?.rankingPotential ?\n \n \n {keywordDetail?.rankingPotential}\n : null }\n data.date) : [],\n type: 'category',\n show: true,\n axisLabel: {\n interval: 10,\n formatter: label => {\n const date = moment(label);\n return `{month|${date.format('MMM')}}-{year|${date.format('YY')}}`;\n },\n rich: {\n month: {\n color: '#77757D',\n lineHeight: 15.54,\n },\n year: {\n color: '#77757D',\n fontSize: 12,\n lineHeight: 12.95,\n },\n },\n },\n splitLine: {\n show: false,\n },\n },\n yAxis: {\n type: 'value',\n show: true,\n axisLabel: {\n formatter: label => {\n return `${formatNumber(label)}`;\n },\n },\n splitLine: {\n lineStyle: {\n color: '#E8E8E8',\n type: 'dashed',\n width: 1},\n show: true,\n },\n },\n grid: {\n height: '70%',\n left: '10%',\n top: '9%',\n },\n series: [\n {\n data: keywordDetail?.svTrend?.map(data => data.volume) || [],\n type: 'line',\n areaStyle: {},\n symbolSize: 2,\n symbol: '',\n },\n ],\n }} />\n }\n\n \n \n\n\n \n \n Common Citations\n {loading ? :\n \n {keywordDetail?.commonCitations?.length ? keywordDetail?.commonCitations?.map((citation, index) => {\n return (citation?.url && !citation?.url.startsWith('javascript:')) && \n {citation.url && addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />} \n \n {citation?.title}\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc?.length > 70 ?\n \n {citation?.metaDesc.substring(0, 70) + '...'}\n : {citation?.metaDesc}}\n {citation?.serps ? \n Used by:\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n {serp.title}\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp?.metaDesc?.length > 70 ? serp?.metaDesc?.substring(0, 70) + '...' : serp.metaDesc}\n {`Position: ${serp.position}`}\n }\n overlayClassName={styles.serpTooltip}>\n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 9 && (\n {`+${citation?.serps?.length - 9}`}\n )}\n \n : null}\n\n \n ;\n }) : No data available}\n {/* return \n \n \n \n \n Top competitor content \n\n \n \n Similar keywords \n\n \n {\n closeContentResearchDrawer();\n currentPage.setIsOpeningKwSuggestionFromContentResearch(true);\n currentPage.openCompetingFocusTermsDrawer();\n }}>View all keywords\n \n\n \n \n\n \n \n Relevant terms used by Competitors \n\n \n {loading ? : <>\n \n COMPETITOR RANK\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => (\n {i + 1} \n ))}\n \n \n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n Created From Scratch\n \n );\n }\n return (\n \n \n {/* {x?.hostname} */}\n \n \n \n FOCUS TERMS\n DISTRIBUTION\n \n {keywordDetail && keywordDetail?.termsGrid?.focusTermUsageBySites?.map((item, i) => (\n \n {item.name}\n {item.values?.map((score, i) => (\n \n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n \n ))}}\n \n \n ;\n});\n\nconst PageTitle = styled.div`\n font-weight: 600;\n margin-bottom: 10px;\n margin-left: 40px;\n font-size: 20px;\n`;\nconst Header = styled.div`\n display: flex;\n margin-bottom: 10px;\n padding-left: 40px;\n`;\n\nconst TitleContainer = styled.div`\nheight: 60px;\nbackground: #2D2F34;\npadding: 18px;\nborder-radius: 8px 8px 0px 0px;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n line-height: 22px;\n`;\n\nconst SectionHeader = styled.div`\n background: #F7F7F8;\n border-radius: 3px;\n margin-right: 4px;\n margin-left: 4px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst MiddleContainer = styled.div`\n display: flex;\n padding: 0 40px 30px 40px;\n`;\n\nconst Square = styled.div<{ isHovered: boolean }>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\n\nconst Site = styled.div`\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n font-size: 12px;\n color: #2D6CCA;\n width: 40px;\n display: flex;\n align-items: center;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import KeywordDetailContent from '@/components/dashboard/pages/keyword-researcher-v2/keyword-detail-drawer-content';\nimport {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react-lite';\n\nexport const KeywordsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n\n return {\n // scroll to related keywords table automaticaly\n if (visible) {\n if (currentPage?.isDrawerFromCa) {\n document.getElementById('SuggestedKeywordTableId')?.scrollIntoView({block: 'center'});\n }\n }\n }}\n onClose={() => {\n currentPage.setIsDrawerFromCa(false);\n currentPage.setIsOpenKeywordDrawer(false);\n currentPage.setActiveTargetKw('');\n }}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n className={'drawerCloseIcon'}\n closeIcon={ changeView()}>\n ;\n};\n\nconst TechnicalsSwitcherContainer = styled.div`\n display: flex;\n margin-bottom: 20px;\n font-size: 12px;\n align-items: center;\n cursor: pointer;\n`;\n","\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faRotateRight} from '@fortawesome/pro-regular-svg-icons';\n\nexport const PageSpeedIndex = observer(() => {\n const secondAntIcon = \n \n Page Speed Index:\n {!currentPage?.isWordCountLoading ? <>\n {generateDotWithColor(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.status) }\n {!isNil(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score) ? <>{Math.round(currentPage?.analysis?.psiMetrics?.avgSpeedIndex?.score * 100)}/100 : null}\n :\n }\n \n\n\n \n Last Fetch: \n {!currentPage?.content?.updatedAt ? : moment(currentPage?.content?.updatedAt).format('DD MMM YYYY')} \n refetchArticle(currentPage?.content?.uuid) }/>\n\n \n ;\n});\n\n\nconst Container = styled.div`\n cursor: default;\n`;\nconst SpeedIndexContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n margin-top: 5px;\n`;\nconst LastFetchContainer = styled.div`\n font-size: 12px;\n display: flex;\n align-items: center;\n color: #e8e8e8 !important;\n cursor: default;\n`;\nconst SpeedIndexDot = styled.div`\n border-radius: 2px;\n height: 4px;\n margin-left: 8px;\n margin-right: 3px;\n width: 4px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {Progress, Spin, Tooltip} from 'antd';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styled from 'styled-components';\nimport {getProgressColor} from '@/utils/colors';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCircleInfo} from '@fortawesome/pro-regular-svg-icons';\nimport {PageSpeedIndex} from '../PageSpeedIndex';\nimport {LoadingOutlined} from '@ant-design/icons';\n\n\nexport const TechnicalScore = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {t} = useTranslation('common');\n\n const antIcon = \n {!currentPage.isScoreLoading ? (currentPage?.analysis?.technicalScore ?? '-') : \n \n {t('technical-score')} \n \n \n \n\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n display: flex;\n height: 30px;\n`;\nconst TitleContainer = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Title = styled.div`\n font-weight: 500;\n line-height: 17px;\n color: #fff;\n`;\nconst TitleAndWordCount = styled.div`\n margin-left: 10px;\n`;\nconst ProgressStyled = styled(Progress)`\n .ant-progress-text {\n top: 40%;\n }\n`;\n","import {Button, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {routes} from '@/utils/const';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faFileChartColumn} from '@fortawesome/pro-regular-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Checkbox as AntdCheckbox, Form, Popover, Spin, Tooltip} from 'antd';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {TechnicalsViewSwitcher} from '../../Common/ViewSwitcher';\nimport {TechnicalScore} from './TechnicalScore';\nimport {Checkbox} from '@/components/common-components/v2';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const HeaderSection = observer(({changeView}: Props) => {\n const [auditLoader, setAuditLoader] = useState(false);\n const [onPageAuditPopoverVisible, setOnPageAuditPopoverVisible] = useState(false);\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n const {contentAuditStore: {loadContentAudit, setNewRecordId}} = useStore('');\n\n const antIconSecond = \n \n \n Select 1 to 3 Target Keywords \n \n ({\n validator(_, value) {\n const existingValues = form.getFieldsValue(true);\n if (!value || !existingValues['target-keywords']?.length) return Promise.reject(new Error('Please select at least 1 Target Keyword.'));\n if (existingValues['target-keywords']?.length && existingValues['target-keywords']?.length > 3) return Promise.reject(new Error('You can use maximum of 3 Target Keywords.'));\n\n return Promise.resolve();\n },\n })]}>\n \n \n {currentPage?.getUniqueKeywords?.map((kw, idx) => {\n return \n {kw}\n ;\n })}\n \n \n \n \n setOnPageAuditPopoverVisible(false)}>Cancel \n \n \n \n \n \n }>\n setOnPageAuditPopoverVisible(!onPageAuditPopoverVisible)} color='neonBlue' variant='ghost' mode='dark'>\n {auditLoader ? Run Complete Onpage Audit \n \n : \n \n {auditLoader ? Run Complete Onpage Audit \n \n }\n \n\n ;\n});\n\nconst Container = styled.div`\n width: 100%;\n align-items: center;\n margin-bottom: 30px;\n margin-top: 10px;\n`;\n\nconst TopSeactionContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\nconst RunPageAuditBtn = styled(Button)`\n color: #4881f0 !important;\n cursor: pointer;\n display: flex;\n margin-bottom: 20px;\n`;\n\nconst BtnText = styled.div`\n margin-left: 5px;\n display: inline-block;\n color: #34AEF3 !important;\n font-size: 12px;\n\n // &:hover {\n // text-decoration: underline;\n // }\n`;\n\nconst PopoverWrapper = styled.div`\n\n`;\n\nconst PopoverTitle = styled.div`\n font-weight: 600;\n margin-bottom: 20px;\n`;\nconst PopoverKwContainer = styled.div`\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n`;\n\nconst FormStyled = styled(Form)`\n .ant-checkbox-wrapper + .ant-checkbox-wrapper {\n margin-left: 0px;\n }\n\n .ant-checkbox-wrapper {\n line-height: 22px !important;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n`;\n\nconst PopoverBtnContainer = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n\n","import {CaretUpFilled} from '@ant-design/icons';\nimport {Col, Collapse, Row} from 'antd';\nimport {Pagination, Checkbox, Tooltip} from 'antd';\nimport classNames from 'classnames';\nimport {ReactNode, useEffect, useState} from 'react';\nimport {useTranslation} from 'next-i18next';\nimport styles from './style.module.scss';\nimport {ChevronDown, ChevronUp} from 'react-feather';\nimport classnames from 'classnames';\nimport {faFilter, faCaretDown, faCaretUp} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {NextImg} from '@/utils/nextImg';\n\nimport {toJS} from 'mobx';\ninterface filters {\n label: string;\n checked: boolean;\n disabled?: boolean;\n disabledTooltip?: string;\n onChange: () => void;\n}\n\ninterface columnTitle {\n title?: string;\n sorter?: boolean;\n sortKey?: string | number;\n}\n\ninterface Props {\n className?: string;\n icon?: ReactNode;\n title?: string;\n description?: string | ReactNode;\n descriptionColor?: string;\n colTitle1?: string;\n colTitle2?: columnTitle;\n colTitle3?: string;\n colTitle4?: string;\n data?: any;\n dataRenderer?: any;\n pageSize?: any;\n footer?: ReactNode;\n isCollapse?: boolean;\n defaultActive?: boolean;\n filters?: filters[];\n plan?: any;\n warningBar?: ReactNode;\n}\n\nexport const AnalyticsCollapseCard = ({\n className,\n icon,\n title,\n description,\n descriptionColor,\n colTitle1,\n colTitle2 = {\n title: null,\n sorter: false,\n sortKey: null,\n },\n colTitle3,\n colTitle4,\n data,\n dataRenderer,\n pageSize,\n footer,\n isCollapse = true,\n defaultActive = false,\n filters,\n plan = true,\n warningBar,\n}: Props) => {\n const [pageNumber, setPageNumber] = useState(1);\n const [checkData, setCheckData] = useState(false);\n const [isFilterOpened, setIsFilterOpened] = useState(false);\n const [sortOrder, setSortOrder] = useState('');\n const [formatData, setFormatData] = useState(null);\n const [activeKey, setActiveKey] = useState(['']);\n const {t} = useTranslation('common');\n\n const getData = () => {\n if (pageSize) {\n return formatData?.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);\n }\n return formatData;\n };\n useEffect(() => {\n if (getData()?.length > 0 || formatData === undefined || footer) {\n setCheckData(isCollapse);\n }\n }, [getData]);\n\n useEffect(() => {\n let newData = [];\n if (data) {\n newData = data.map(item => {\n return toJS(item);\n });\n }\n setFormatData(newData);\n }, [JSON.stringify(data)]);\n\n useEffect(() => {\n if (defaultActive) {\n setActiveKey([title]);\n }\n }, [defaultActive]);\n\n const sortData = (sortBy: string | number) => {\n const formatArray = [...data];\n if (sortOrder === '') {\n setSortOrder('desc');\n setFormatData(formatArray.sort((a, b) => {\n if (b[sortBy] < a[sortBy]) return -1;\n }));\n } else if (sortOrder === 'desc') {\n setSortOrder('asc');\n setFormatData(formatArray.sort((a, b) => {\n if (a[sortBy] < b[sortBy]) return -1;\n }));\n } else if (sortOrder === 'asc') {\n setSortOrder('');\n setFormatData(data);\n }\n };\n\n const changeActiveKey = key => {\n setActiveKey(key);\n };\n\n\n return (\n isCollapse ? (\n \n \n {icon}\n {title}\n \n \n {description}\n \n \n }\n >\n \n {warningBar && warningBar}\n {/* if we have 4 columns */}\n {colTitle3 && colTitle4 ?\n \n
:\n \n
\n }\n\n {getData()?.map((x, i) => dataRenderer(x, i))}\n \n {pageSize && (pageSize < data?.length) && (\n <>\n\n setPageNumber(pageNumber)}\n disabled={!plan}\n />\n \n )}\n {filters && filters.length >= 1 ?\n ( setIsFilterOpened(!isFilterOpened)}\n className={styles.filters}>\n {/* }\n \n \n {\n isFilterOpened && (\n e.stopPropagation()}>\n \n {filters.map((filter, idx) => (\n filter.disabled ?\n \n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n :\n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n ))\n }\n \n \n )\n }\n ) : null }\n \n {footer}\n \n \n );\n};\n","import React, {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react-lite';\nimport {Modal} from '@/components/common-components';\nimport {Divider} from 'antd';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n visible: boolean;\n schema: any;\n setShowModal: Dispatch>;\n}\n\nexport const SchemaModal = observer(({visible, schema, setShowModal}: Props) => {\n const dataList = schema ? JSON.parse(schema) : [];\n const data = (typeof (dataList) === 'object' && Object.keys(dataList).length === 0) ? [] : dataList?.find(item => item.graph) || [];\n const [expanded, setExpanded] = useState(false);\n const dataForDisplay = expanded ? data?.graph : data?.graph?.slice(0, 1);\n return (\n setShowModal(false)}\n footer={ setShowModal(false)}>Close }>\n \n\n \n Schema.org \n {<>\n @context \n {data?.context ?? '-'} \n @graph \n {dataForDisplay?.map((item, index) => {\n return <>#{index + 1} \n \n {`${x[0]}`} \n {`${x[0]}` == 'potentialAction' ? '' : (`${x[0]}` == 'url' ? {`${x[1]}`} :\n {`${typeof(x[1])!=='object' ? x[1] : '-'}`} )}\n {`${x[0]}` == 'potentialAction' ? item.potentialAction?.length > 0 && item?.potentialAction?.map((z, id) => {\n return \n {z?.type} \n {z?.queryInput} \n \n ;\n }) : ''}\n ;\n })}\n \n ;\n })}\n {data?.graph?.length > 1 ? \n setExpanded(!expanded)}>\n {expanded ? 'Hide schema' : 'Show full schema'}\n : ''}\n }\n \n \n \n\n );\n});\n\nconst MainContainer = styled.div`\n width: 100%;\n padding: 25px;\n background: #FFFFFF;\n`;\n\nconst Title = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #121212;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\nconst Subtitle = styled.div`\n font-weight: 300;\n font-size: 14px;\n line-height: 22px;\n color: #4E5156;\n margin-top: 10px;\n word-break: break-word;\n`;\nconst LargeLine = styled.div`\n width: 2px;\n height: auto;\n background: #E8E8E8;\n border-radius: 6px;\n margin-right: 9px;\n`;\nconst URL = styled.div`\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: #2D6CCA;\n cursor: pointer;\n flex-wrap: nowrap;\n white-space: pre-wrap;\n word-break: break-word;\n`;\n\nconst ModalContentWrapper = styled.div`\n max-height: 70vh;\n overflow-y: auto;\n margin-top: 10px;\n // border: 1px solid #E8E8E8;\n // border-radius: 8px;\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n`;\n","import css from '../../index.module.scss';\nimport {\n Typography,\n Row,\n Col,\n Popover,\n Tooltip,\n} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport {AnalyticsCollapseCard} from '../../Common/AnalyticsCollapseCard';\nimport styles from '../style.module.scss';\nimport {useTranslation} from 'next-i18next';\nimport {getStatusColor} from '@/utils/colors';\nimport {NextImg} from '@/utils/nextImg';\n\nimport classNames from 'classnames';\nimport {Code, ExternalLink, Image,\n List,\n Video} from 'react-feather';\nimport {WarningMiniBar} from '@/components/common-components/components';\nimport {\n ButtonLink,\n} from '@/components/common-components/components';\nimport {Button} from '@/components/common-components/v2';\nimport {useState} from 'react';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {observer} from 'mobx-react-lite';\nimport {SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, SCA_PAGE_IMAGES_SHOW_MISSING_ALT, SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN} from '@/constants/events';\nimport {SchemaModal} from '../SchemaModal';\nimport {toJS} from 'mobx';\nimport {linkgraphDomain} from '@/utils/const';\n\n\nexport const TechnicalsData = observer(() => {\n const [showMissingAltText, setShowMissingAltText] = useState(false);\n const [isActiveInternalBrokenLinks, setIsActiveInternalBrokenLinks] = useState(false);\n const [isActiveExternalBrokenLinks, setIsActiveExternalBrokenLinks] = useState(false);\n const [showSchemaModal, setShowSchemaModal] = useState(false);\n\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n\n const {Title} = Typography;\n const {t} = useTranslation('common');\n\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/icon/broken-image.svg';\n // };\n\n const translateWord = (status: string) => {\n switch (status) {\n case 'Good':\n return t('good');\n case 'Average':\n return t('average');\n case 'Bad':\n return t('bad');\n case 'Missing':\n return t('missing');\n case 'Not Included':\n return 'Not Included';\n default:\n return '';\n }\n };\n\n const internalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveInternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.internal?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveInternalBrokenLinks(!isActiveInternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveInternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken internal links',\n });\n }\n },\n }];\n\n const uiFormatImageSize = (size: string) => {\n if (size) {\n let returnSize = null;\n const sizeArray = size.split('x');\n returnSize = {`x ${sizeArray[0]}`}
{sizeArray[1]};\n return returnSize;\n } else {\n return '-';\n }\n };\n\n const brokenHeaders = {currentPage?.analysis?.brokenHeaders?.map((item, i) => {\n return {item.type}{(i + 1) < currentPage?.analysis?.brokenHeaders?.length && `, `};\n })}{translateWord(currentPage?.analysis?.status?.headers)};\n\n const getMissingAltText = () => {\n if (showMissingAltText && currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '');\n } else if (currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img;\n }\n };\n\n const getMissingAltTotal = () => {\n if (!currentPage?.analysis?.images?.img?.length) return null;\n if (currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length;\n } else {\n return null;\n }\n };\n\n const generateInternalLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getInternalBrokenLinksCount || currentPage?.analysis?.getInternalBrokenLinksCount === 0) {\n const msg = currentPage?.analysis?.getInternalBrokenLinksCount > 1 || currentPage?.analysis?.getInternalBrokenLinksCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getInternalBrokenLinksCount} ${msg}`);\n if (currentPage?.analysis?.getInternalBrokenLinksCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getInternalRedirectsCount || currentPage?.analysis?.getInternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getInternalRedirectsCount > 1 || currentPage?.analysis?.getInternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getInternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.internal?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const imagesFilter = [{\n label: 'Show only missing alt text',\n checked: showMissingAltText,\n disabled: currentPage?.analysis?.images?.img?.filter(image => !image.alt || image.alt === '')?.length == 0,\n onChange: () => {\n setShowMissingAltText(!showMissingAltText);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_IMAGES_SHOW_MISSING_ALT, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for images with missing alt text',\n });\n }\n },\n }];\n\n const externalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveExternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.external?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveExternalBrokenLinks(!isActiveExternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken external links',\n });\n }\n },\n }];\n\n const generateExternallLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getExternalBrokenCount || currentPage?.analysis?.getExternalBrokenCount === 0) {\n const msg = currentPage?.analysis?.getExternalBrokenCount > 1 || currentPage?.analysis?.getExternalBrokenCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getExternalBrokenCount} ${msg}`);\n if (currentPage?.analysis?.getExternalBrokenCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getExternalRedirectsCount || currentPage?.analysis?.getExternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getExternalRedirectsCount > 1 || currentPage?.analysis?.getExternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getExternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.external?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const getExternalLinks = () => {\n if (isActiveExternalBrokenLinks && currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const getInternalLinks = () => {\n if (isActiveInternalBrokenLinks && currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const displayStatusCode = (statusCode: number) => {\n if (statusCode) {\n if (statusCode >= 200 && statusCode < 300) {\n return {statusCode};\n } else if (statusCode >= 300 && statusCode < 400) {\n return {statusCode};\n } else if (statusCode >= 400) {\n if (statusCode === 429) {\n return {statusCode};\n } else {\n return {statusCode};\n }\n }\n } else {\n return 'N/A';\n }\n };\n\n const displayFollowCode = (followCode: string) => {\n if (followCode) {\n if (followCode === 'nofollow') {\n return 'NF';\n } else {\n return DF;\n }\n } else {\n return '-';\n }\n };\n\n return <>\n \n \n \n {t('head')}\n \n {currentPage?.analysis?.metaSummary?.map(meta => {\n return (\n \n {meta.value}\n {meta.suggestion}\n \n )}\n />\n );\n })}\n \n \n {t('rich-media-tags')}\n \n \n {header.values.length && header.values.map((heading, i) => {\n return {`<${header.type}> `}\n {heading}\n {` `};\n })}\n \n }\n >\n \n
\n : \n
: \n
;\n }}\n />\n \n addDefaultSrc(e)}\n />\n \n \n {\n navigator.clipboard.writeText(image.src);\n }}>{image.src}\n \n ) : '-'}\n {image.alt || '-'}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n {displayFollowCode(link.rel[0])}
\n \n {displayStatusCode(link.statusCode)}
\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n setShowSchemaModal(true)}>\n {t('view-schema-markups')}\n \n \n ) : (\n \n {t('view-schema-markups')}\n \n )\n }\n />\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n \n {\n navigator.clipboard.writeText(js.src);\n }}>{js.src}\n \n )}\n \n
\n \n );\n }}\n pageSize={5}\n />\n \n ;\n});\n","import {observer} from 'mobx-react-lite';\nimport styled from 'styled-components';\nimport {HeaderSection} from './HeaderSection';\nimport {TechnicalsData} from './TechnicalsData';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const Technicals = observer(({changeView}: Props) => {\n return \n \n \n \n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n display: flex;\n flex-direction: column;\n`;\n\nconst DataContainer = styled.div`\n height: auto;\n overflow-y: auto;\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n","import React from 'react';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Select} from 'antd';\nimport {toJS} from 'mobx';\nimport styles from '../style.module.scss';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport classNames from 'classnames';\n\ninterface Props {\n isSubscriber: boolean;\n store: CurrentPageStore;\n setCompetitors: (competitors: any[]) => void;\n setActiveKw: React.Dispatch>;\n activeKw: string;\n compListCollapsed: boolean;\n}\n\nexport const KeywordSelector = ({store, isSubscriber, setActiveKw, setCompetitors, activeKw, compListCollapsed}: Props) => {\n const {Option} = Select;\n\n const handleOnSelectChange = value => {\n setActiveKw(value);\n setCompetitors(toJS(store?.analytics?.competitorsData)?.filter(item => item.keyword === value)[0]?.competitors);\n };\n\n return \n \n {compListCollapsed ? 'Kw' : 'Keyword'}\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '250px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={classNames(styles.selectInput, compListCollapsed && styles.minified)}\n suffixIcon={ ;\n};\n","import {Checkbox} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {faCheck, faPlus} from '@fortawesome/pro-solid-svg-icons';\nimport {faSquareCheck} from '@fortawesome/pro-light-svg-icons';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {EditorState, Modifier, SelectionState, ContentState} from 'draft-js';\nimport {debounce} from 'lodash';\nimport {observer} from 'mobx-react';\nimport {useCallback, useState} from 'react';\nimport styled from 'styled-components';\n// import {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n\ninterface Props {\n activeCompetitor: any;\n htmlToDraft: any;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const HeadingsTree = observer(({\n activeCompetitor,\n htmlToDraft,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedIndexData,\n checkedIndexData}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer:\n {currentPage: {\n setCopiedHeadings,\n }}} = useStore('');\n\n\n const [addedHeadings, setAddedHeadings] = useState([]);\n const [copiedHeading, setCopiedHeading] = useState({\n tag: '',\n text: '',\n });\n\n const [filters, setFilters] = useState([\n {\n tag: 'h1',\n active: true,\n },\n {\n tag: 'h2',\n active: true,\n },\n {\n tag: 'h3',\n active: true,\n },\n {\n tag: 'h4',\n active: true,\n },\n {\n tag: 'h5',\n active: true,\n },\n {\n tag: 'h6',\n active: true,\n },\n ]);\n\n const onCheckboxChecked = (checked: boolean, tag: string) => {\n const curFilters = [...filters];\n\n const updatedFilters = curFilters.map(filter => {\n if (filter.tag == tag) {\n return {\n ...filter,\n active: checked,\n };\n } else {\n return {...filter};\n }\n });\n\n setFilters(updatedFilters);\n };\n\n const checkboxClickHandler = (e, headingContent, headingTag, idx) => {\n if (e?.target?.checked) {\n setCheckedCount(checkedCount + 1);\n const newItem = {'id': idx, 'headingContent': headingContent, 'headingTag': headingTag};\n setCheckedIndexData([...checkedIndexData, newItem]);\n } else {\n setCheckedCount(checkedCount - 1);\n\n const updatedCheckedIndexData = checkedIndexData.filter(item => item?.id !== idx);\n setCheckedIndexData(updatedCheckedIndexData);\n }\n };\n\n const handleCopyClick = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n navigator.clipboard.writeText(updatedCopiedHeadings);\n };\n\n // const [blockskMap, setBlocksMap] = useState([]);\n\n // const mapHeadingsToDraftBlockTypes = {\n // 'h1': 'header-one',\n // 'h2': 'header-twp',\n // 'h3': 'header-three',\n // 'h4': 'header-four',\n // 'h5': 'header-five',\n // 'h6': 'header-six',\n // }\n\n // useEffect(() => {\n // if (!currentPage?.getCurrentEditorState) return;\n\n // const contentState = currentPage.getCurrentEditorState.getCurrentContent();\n\n // const map = convertToRaw(contentState).blocks\n // setBlocksMap(map);\n\n // }, [currentPage?.getCurrentEditorState]);\n\n\n // const checkIfEditorContainsHeading = (text: string, type: string) => {\n // if (!blockskMap || !blockskMap.length) return false;\n\n // const included = blockskMap.find(block => block.type == mapHeadingsToDraftBlockTypes[type] && block.text == text);\n\n // return included;\n // }\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n currentPage.editContent(state, isNewDecorations);\n }, 2000);\n\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const insertText = async (textToAdd: any, headingType?: string, cleanText?: string) => {\n // NEW FLOW start\n const {contentBlocks, entityMap} = htmlToDraft(textToAdd);\n // const contentState = convertHtmlToEditorState(textToAdd);\n\n const selection = currentPage.currentEditorState.getSelection();\n\n const newSelection = new SelectionState({\n anchorKey: selection.getAnchorKey(),\n anchorOffset: selection.getEndOffset(),\n focusKey: selection.getAnchorKey(),\n focusOffset: selection.getEndOffset(),\n });\n\n\n const fragment = ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap();\n // const fragment = contentState.getCurrentContent().getBlockMap();\n\n const nonStyledState = Modifier.replaceWithFragment(\n currentPage.currentEditorState.getCurrentContent(),\n newSelection,\n fragment,\n );\n\n // WE are calculating nodes to toggle blue background on new Ai generated nodes\n let firstNewBlockId: number;\n const currentBlock = selection.getAnchorKey();\n const nextBlock = currentPage.currentEditorState.getCurrentContent().getBlockAfter(selection.getAnchorKey())?.getKey();\n\n const existingNodes = document.querySelectorAll('[data-block=\"true\"]');\n existingNodes?.forEach((elem, id) => {\n if (elem.getAttribute('data-offset-key') && elem.getAttribute('data-offset-key') == `${currentBlock}-0-0`) {\n firstNewBlockId = id + 1;\n }\n });\n\n\n const updatedState = EditorState.push(currentPage.currentEditorState, nonStyledState, 'insert-fragment');\n currentPage.setCurrentEditorState(updatedState);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('[data-block=\"true\"]');\n if (newTextElems.length) {\n for (let i = firstNewBlockId; i <= newTextElems.length; i++) {\n if (newTextElems[i]?.getAttribute('data-offset-key') && newTextElems[i]?.getAttribute('data-offset-key') != `${nextBlock}-0-0` && newTextElems[i]?.getAttribute('data-offset-key') != `${currentBlock}-0-0`) {\n newTextElems[i].classList.add('newTextBlock');\n } else {\n return;\n }\n }\n }\n }, 500);\n\n debouncedUpdate(updatedState, currentPage.analytics?.focusTerms, currentPage.focusTermsClassNames, false);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('.newTextBlock');\n if (newTextElems.length) {\n newTextElems.forEach(elem => {\n elem.classList.remove('newTextBlock');\n });\n }\n }, 3500);\n\n const curAddedHeadings = [...addedHeadings];\n const updatedAddedHeading = [];\n checkedIndexData?.map(item => {\n updatedAddedHeading?.push({type: item?.headingTag, text: item?.headingContent});\n });\n if (headingType && cleanText) {\n setAddedHeadings([\n ...curAddedHeadings,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n } else {\n setAddedHeadings([\n ...curAddedHeadings,\n ...updatedAddedHeading,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n }\n // NEW FLOW END\n };\n\n const addHeadingsHandler = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n insertText(`${updatedCopiedHeadings}`);\n setShowBulkAddContentBtn(true);\n setCheckedCount(0);\n setCheckedIndexData([]);\n };\n\n return \n Page structure\n \n \n {filters.map((filter, idx) => {\n if (activeCompetitor?.headingsHierarchy?.find(heading => heading.tag == filter.tag)) {\n return onCheckboxChecked(e.target.checked, filter.tag)}\n key={idx}>\n {filter.tag}\n ;\n }\n })}\n \n {showBulkAddContentBtn && setShowBulkAddContentBtn(false)}> Bulk Add to Content }\n \n {!showBulkAddContentBtn &&\n \n {\n addHeadingsHandler();\n }}> \n \n Copy to clipboard\n }> {\n handleCopyClick();\n }}> Copy \n {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}> Cancel \n \n }\n \n {activeCompetitor?.headingsHierarchy?.filter(heading => filters.filter(filter => filter.active)?.map(filter => filter.tag)?.includes(heading.tag))?.map((heading, idx) => {\n const isIncluded = [...addedHeadings].filter(item => item.text == heading.content && item.type == heading.tag)?.length > 0;\n return \n {!showBulkAddContentBtn && checkboxClickHandler(e, heading.content, heading.tag, idx)} />\n }\n \n {isIncluded ? \n {heading.content} \n \n \n {copiedHeading.tag == heading.tag && copiedHeading.text == heading.content ? <>\n }>\n {\n navigator.clipboard.writeText(`<${heading.tag}>${heading.content}`);\n setCopiedHeading({tag: heading.tag, text: heading.content});\n }}>\n \n \n insertText(`<${heading.tag}>${heading.content}`, heading.tag, heading.content)}>\n \n \n\n ;\n })}\n \n ;\n});\nconst calculateIndent = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '15px';\n case 'h2':\n return '25px';\n case 'h3':\n return '45px';\n case 'h4':\n return '55px';\n case 'h5':\n return '65px';\n case 'h6':\n return '75px';\n }\n};\nconst getTopMargin = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '20px';\n default:\n return '0px';\n }\n};\nconst calculateFontSize = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '21px';\n case 'h2':\n return '18px';\n case 'h3':\n return '16px';\n case 'h4':\n return '14px';\n case 'h5':\n return '14px';\n case 'h6':\n return '14px';\n }\n};\nconst generateColor = (tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6') => {\n switch (tag) {\n case 'h1':\n return '#233A61';\n case 'h2':\n return opaqueColor('#233A61', 85);\n case 'h3':\n return opaqueColor('#233A61', 70);\n case 'h4':\n return opaqueColor('#233A61', 55);\n case 'h5':\n return opaqueColor('#233A61', 47);\n case 'h6':\n return opaqueColor('#233A61', 40);\n }\n};\n\nconst Wrapper = styled.div`\n\n`;\n\nconst ActionsWrapper = styled.div`\n display: flex;\n gap: 20px;\n align-items: center;\n margin-bottom: 10px;\n`;\n\nconst AddHeadings = styled.div`\n font-size: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst CopyAction = styled.div`\n font-size: 12px;\n cursor: pointer;\n`;\n\nconst CancelAction = styled.div`\n cursor: pointer;\n color: #F44343;\n`;\n\nconst FiltersWrapper = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nconst BulkAddAction = styled.div`\n margin-top: 12px;\n color: #2D6CCA;\n cursor: pointer;\n`;\n\nconst FiltersContainer = styled.div`\n display: flex;\n background: #F9F9FB;\n border: 1px solid #E8E8E8;\n border-radius: 8px;\n padding: 12px 14px;\n margin-bottom: 20px;\n width: fit-content;\n`;\n\nconst FiltersTree = styled.div`\n display: flex;\n flex-direction: column;\n`;\nconst SingleHeading = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; itemId: number; isIncluded?: boolean}>`\n display: flex;\n margin-top: ${p => p.itemId == 0 ? '0px' : getTopMargin(p.type)};\n margin-bottom: 0px;\n border-radius: 8px;\n padding: 6px 10px;\n cursor: pointer;\n align-items: center;\n width: 100%;\n opacity: ${p => p.isIncluded ? .5 : 1};\n\n .copyClass {\n display: none;\n margin-left: auto;\n }\n .copyClass.disabled {\n pointer-events: none;\n color: gray;\n }\n\n &:hover {\n background-color: ${opaqueColor('#2D6CCA', 15)};\n\n .copyClass {\n display: block;\n }\n }\n`;\nconst HeadingTag = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n border-radius: 5px;\n margin-left: ${p => calculateIndent(p.type)};\n background-color: ${p => generateColor(p.type)};\n padding: 2px 7px; \n margin-right: 10px;\n color: #fff;\n height: fit-content;\n font-size: 12px;\n font-weight: 700;\n text-transform: uppercase;\n position: relative;\n`;\nconst HeadingText = styled.div<{type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\n color: #121212;\n font-size: ${p => calculateFontSize(p.type)};\n ${p => (p.type == 'h1' || p.type == 'h2') && 'line-height: 24px'};\n`;\n\nconst Copy = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-right: 20px;\n margin-bottom: auto;\n min-width: 50px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\nconst InsertText = styled.div`\n display: flex;\n align-items: center;\n color: #000;\n font-size: 12px;\n font-weight: 500;\n margin-left: 20px;\n margin-bottom: auto;\n min-width: 105px;\n\n &:hover {\n color: #2D6CCA;\n }\n`;\n\nconst CheckboxStyled = styled(Checkbox)<{tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>`\ntext-transform: uppercase;\n .ant-checkbox-checked {\n .ant-checkbox-inner {\n background-color: ${p => generateColor(p.tag)} !important;\n border-color: ${p => generateColor(p.tag)} !important;\n }\n }\n`;\n","import {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\nimport {KeywordSelector} from './KeywordSelector';\nimport {HeadingsTree} from './HeadingsTree';\nimport {useStore} from '@/store/root-store';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faBars, faBarsSort} from '@fortawesome/pro-solid-svg-icons';\nimport {Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {faArrowUpRightFromSquare, faListTree} from '@fortawesome/pro-regular-svg-icons';\nimport {generateHeadingOutline} from '@/utils/blockRenderComponents';\nimport {NextImg} from '@/utils/nextImg';\n\ninterface Props {\n setCompListCollapsed: (value: boolean) => void;\n compListCollapsed: boolean;\n htmlToDraft: any;\n activeKw: string;\n setActiveKw: (value) => void;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const CompetitorHeadingsDrawerContent = observer(({\n htmlToDraft,\n setCompListCollapsed,\n compListCollapsed,\n activeKw,\n setActiveKw,\n setCheckedIndexData,\n checkedIndexData,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedHeadingsWithTags,\n checkedHeadingsWithTags}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n\n const [competitors, setCompetitors] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors ?? []);\n const [activeCompetitor, setActiveCompetitor] = useState(currentPage.analytics?.competitorsData?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n\n\n useEffect(() => {\n if (currentPage?.topRankingCompetitorActiveKw && currentPage?.analytics?.competitorsData?.length && currentPage?.analytics?.competitorsData.find(item => item.keyword == currentPage?.topRankingCompetitorActiveKw)) {\n !activeKw && setActiveKw(currentPage?.topRankingCompetitorActiveKw);\n } else if (currentPage?.analytics?.competitorsData && currentPage?.analytics?.competitorsData[0]) {\n !activeKw && setActiveKw(currentPage?.analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n }, [...(currentPage?.analytics?.competitorsData ?? ''), currentPage?.analytics?.competitorsData?.length]);\n\n useEffect(() => {\n if (toJS(currentPage).analytics?.competitorsData) {\n const contentState = currentPage.currentEditorState.getCurrentContent();\n const outline = generateHeadingOutline(contentState);\n const currentArticleOutline = [{\n title: 'Current Article Outline',\n headingsHierarchy: outline,\n isCurrentArticleOutline: true,\n }];\n\n const updatedCompetitors = toJS(currentPage).analytics.competitorsData?.map(value => {\n return {\n ...value,\n competitors: [...currentArticleOutline, ...value.competitors],\n };\n });\n setCompetitors(updatedCompetitors?.find(item => item.keyword == activeKw)?.competitors ?? []);\n if (!activeCompetitor) {\n setActiveCompetitor(toJS(currentPage.analytics?.competitorsData)?.find(item => item.keyword == activeKw)?.competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)[0] ?? null);\n }\n }\n }, [currentPage.analytics?.competitorsData, activeKw, currentPage.currentEditorState]);\n\n const competitorsChangeHandler = (competitorsList: any[]) => {\n setCompetitors(competitorsList);\n\n setActiveCompetitor(competitorsList[0]);\n };\n\n // const addDefaultSrc = e => {\n // e.target.src = '/img/world-wide-web.svg';\n // };\n\n return \n \n \n setCompListCollapsed(!compListCollapsed)} fontSize={20} style={{marginTop: 20, marginRight: 10, cursor: 'pointer'}}/>\n \n \n \n {competitors?.length? competitors?.filter(competitor => competitor?.headingsHierarchy && competitor?.headingsHierarchy?.length)?.map((competitor, idx) => {\n return <>\n {competitor?.isCurrentArticleOutline ?\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n :\n setActiveCompetitor(competitor)} isActive={activeCompetitor?.title == competitor?.title}>\n {competitors?.filter(value => value?.headingsHierarchy && value?.headingsHierarchy?.length && value?.isCurrentArticleOutline)?.length ? idx : idx + 1} \n \n \n {competitor.title} \n \n {competitor.url}\n \n : null}>\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor?.url}`} style={{width: 20, height: 20}}/>\n \n \n {!compListCollapsed && \n {competitor.title} \n \n {competitor.url}\n window.open(competitor?.url, '_blank')}/>\n \n }\n \n \n };\n }) : Add atleast one target keyword to view the Heading outlines \n }\n\n \n \n \n \n\n\n ;\n});\n\nconst Wrapper = styled.div`\n padding: 10px 30px 30px;\n display: flex;\n cursor: default;\n`;\n\nconst Header = styled.div`\n display: flex;\n margin-bottom: 20px;\n align-items: center;\n`;\n\nconst Left = styled.div<{isCollapsed: boolean}>`\n width: ${p => p.isCollapsed ? '105px' : 'auto'};\n background: transparent;\n padding-right: 30px;\n`;\nconst Right = styled.div`\n background-color: #fff;\n width: 100%;\n border: 1px solid #E8E8E8;\n box-shadow: 1px -2px 20px rgba(0, 0, 0, 0.06);\n border-radius: 14px;\n padding: 20px 30px;\n`;\nconst CompetitorsList = styled.div`\n\n`;\nconst SingleCompetitor = styled.div<{isActive?: boolean}>`\n cursor: pointer;\n display: flex;\n align-items: center;\n margin-bottom: 7px;\n padding: 9px;\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n border-radius: 8px;\n transition: background .3s ease;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n ${p => p.isActive && 'color: #fff;'}\n }\n\n :hover {\n background-color: #233A61;\n\n .compettiorName, .competitorOrder, .compettiorUrl {\n color: #fff;\n }\n }\n`;\nconst Order = styled.div`\n color: #121212;\n width: 25px;\n`;\nconst NameLogoUrl = styled.div`\n display: flex;\n align-items: center;\n`;\nconst Logo = styled.div`\n margin-right: 10px;\n`;\nconst NameAndUrl = styled.div`\n text-align: left;\n max-width: 200px;\n`;\nconst Name = styled.div`\n color: #121212;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\nconst Url = styled.a`\n color: #2D6CCA;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n display: flex;\n font-size: 12px;\n align-items: center;\n`;\n\nconst Headingoutlines = styled.p`\n color: red;\n margin-left: 30px;\n margin-top: -9px;\n`;\n\nconst CurrentArticleOutline = styled.div<{isActive?: boolean}>`\n display: flex;\n align-items: center;\n gap: 12px;\n padding-left: 32px;\n margin-bottom: 10px;\n cursor: pointer;\n border-radius: 8px;\n ${p => p.isActive && 'color: #fff;'}\n svg {\n width: 16px;\n height: 13px;\n }\n .text {\n font-family: Inter;\n font-size: 14px;\n font-weight: 400;\n line-height: 16.94px;\n text-align: left;\n color: rgba(18, 18, 18, 1);\n ${p => p.isActive && 'color: #fff;'}\n text-decoration: underline;\n padding: 7px;\n }\n background-color: ${p => p.isActive ? '#233A61' : 'transparent'};\n :hover {\n background-color: #233A61;\n color: #fff;\n\n .text {\n color: #fff;\n }\n }\n`;\n","import {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {CompetitorHeadingsDrawerContent} from './DrawerContent';\nimport {useState} from 'react';\n\ninterface Props {\n htmlToDraft: any;\n}\n\nexport const CompetitorsHeadingsDrawer = observer(({htmlToDraft}: Props) => {\n const {contentOptimizer: {currentPage: {analytics, topRankingCompetitorActiveKw, isCompetitorsHeadingsDrawerOpen, closeCompetitorsHeadingsDrawer, setCopiedHeadings}}} = useStore('');\n\n const [compListCollapsed, setCompListCollapsed] = useState(false);\n const [activeKw, setActiveKw] = useState('');\n const [showBulkAddContentBtn, setShowBulkAddContentBtn] = useState(true);\n const [checkedCount, setCheckedCount] = useState(0);\n const [checkedHeadingsWithTags, setCheckedHeadingsWithTags] = useState('');\n const [checkedIndexData, setCheckedIndexData] = useState([]);\n\n return (\n {\n closeCompetitorsHeadingsDrawer();\n if (topRankingCompetitorActiveKw && analytics?.competitorsData?.length && analytics?.competitorsData.find(item => item.keyword == topRankingCompetitorActiveKw)) {\n setActiveKw(topRankingCompetitorActiveKw);\n } else if (analytics?.competitorsData && analytics?.competitorsData[0]) {\n setActiveKw(analytics?.competitorsData[0]?.keyword);\n } else {\n setActiveKw('');\n }\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }}\n closeIcon={ {\n setCheckedCount(0);\n setShowBulkAddContentBtn(true);\n setCheckedIndexData([]);\n setCopiedHeadings('');\n }} style={{display: isCompetitorsHeadingsDrawerOpen ? 'block' : 'none'}}/>}\n className={styles.competitorsHeadingsDrawerStyle}\n bodyStyle={{backgroundColor: '#F2F2F5', paddingLeft: '0', paddingRight: '0'}}\n >\n Headings Outline\n \n \n );\n});\n","import {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Spin} from 'antd';\nimport {observer} from 'mobx-react';\nimport {useState} from 'react';\nimport styled from 'styled-components';\nimport {Analytics} from './Analytics';\nimport {CompetingFocusTermsDrawer} from './SideDrawers/CompetingFocusTermsDrawer';\nimport {ContentIdeasDrawer} from './SideDrawers/ContentIdeasDrawer';\nimport {ContentResearchDrawer} from './SideDrawers/ContentResearchDrawer/ContentResearchDrawer';\nimport {KeywordsDrawer} from './SideDrawers/KeywordsDrawer';\nimport {Technicals} from './Technicals';\nimport {CompetitorsHeadingsDrawer} from './SideDrawers/CompetitorsHeadingsDrawer';\n\nexport const SidebarContent = observer(() => {\n const [showTechnicals, setShowTechincals] = useState(false);\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const antIconSecond = setShowTechincals(!showTechnicals)}/> : setShowTechincals(!showTechnicals)}/>;\n const currentView = <>\n \n setShowTechincals(!showTechnicals)}/>\n \n \n setShowTechincals(!showTechnicals)}/>\n \n ;\n\n return \n \n \n {currentPage.isInitialPageLoad && \n }\n \n {currentView}\n ;\n});\n\nconst Wrapper = styled.div`\n height: 100%;\n position: relative;\n`;\n\nconst TechnicalsContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute; \n width: 100%;\n left: ${p => p.showTechnicals ? 0 : '400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => p.showTechnicals ? 0 : '350px !important'};\n }\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst ContentContainer = styled.div<{showTechnicals: boolean}>`\n position: absolute;\n width: 100%;\n left: ${p => !p.showTechnicals ? 0 : '-400px'};\n\n @media only screen and (max-width: 1400px) {\n left: ${p => !p.showTechnicals ? 0 : '-350px !important'};\n }\n\n overflow-x: hidden;\n transition: all .3s ease;\n height: 100%;\n display: flex;\n flex-direction: column;\n padding: 10px 20px 20px 20px;\n`;\n\nconst LoadingBannerContainer = styled.div`\n background-color: transparent;\n height: 25px;\n width: 100%;\n`;\nconst LongLoadingBanner = styled.div`\nbackground: rgba(84, 41, 125, 0.5);\nborder-radius: 5px;\nfont-size: 12;\nheight: 25px;\npadding-top: 2px;\nwidth: 100%;\n`;\n","import React, {useEffect, useState, useRef} from 'react';\nimport styles from './index.module.scss';\nimport {Loader} from './Utils/loader';\nimport {Error as ErrorView} from '@/components/dashboard/pages/landing-page-optimizer/page-editor/RightSidebar/v2-sidebar/Utils/error';\nimport {Resizable} from 're-resizable';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\nimport {SidebarContent} from './SidebarContent';\n\ninterface Props {\n style?: string;\n onResizeCallback?: (width: number) => void;\n isHidden?: boolean;\n store?: CurrentPageStore;\n}\n\nexport const RightSidebarV2: React.FC = observer(({onResizeCallback, isHidden = false, store}) => {\n const {contentOptimizer: {currentPage: {isPublic, isEditorScrolled}}} = useStore('');\n const [topPosition, setTopPosition] = useState((window?.innerHeight && window?.innerHeight) > 800 ? 78 : 50);\n\n const sideBarRef = useRef(null);\n\n // This changes the width of the editor according to the with of the right sidebar\n useEffect(() => {\n const sidebarUpdate = () => {\n if (sideBarRef?.current?.clientWidth > 350 && window.innerWidth <= 1400) {\n onResizeCallback(350);\n } else if (sideBarRef?.current?.clientWidth <= 350 && window.innerWidth > 1400) {\n onResizeCallback(400);\n }\n };\n window.addEventListener('resize', sidebarUpdate);\n\n return () => {\n window.removeEventListener('resize', sidebarUpdate);\n };\n }, []);\n\n useEffect(() => {\n if (sideBarRef?.current?.clientWidth) {\n onResizeCallback(sideBarRef?.current?.clientWidth);\n }\n }, [sideBarRef?.current]);\n\n const handleScroll = () => {\n const position = window.pageYOffset;\n if (position > 0) {\n if (position <= 70) {\n setTopPosition(topPosition - position);\n } else {\n setTopPosition(0);\n }\n } else {\n setTopPosition(topPosition);\n }\n };\n\n useEffect(() => {\n window.addEventListener('scroll', handleScroll, {passive: true});\n }, []);\n\n\n return (\n \n {\n onResizeCallback(elRef.offsetWidth);\n }}\n enable={{\n top: false,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n className={styles.resize}>\n {store?.content?.isAnalyzing && !store?.content?.analyzingError && ( \n );\n});\n","import {useEffect} from 'react';\nimport {WarningOutlined} from '@ant-design/icons';\nimport {useRouter} from 'next/router';\nimport {RootStoreType, useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styles from './styles.module.scss';\n// import {Drawer} from 'antd';\nimport {EditorState, SelectionState} from 'draft-js';\nimport {mapFocusTerms, multiWordCountRegex, prepareFinalTerms} from './LeftSide/EditorSection/content-editor/utils';\nimport {decoratedState} from './LeftSide/EditorSection/content-editor/decorators';\nimport firebase from 'firebase/app';\nimport 'firebase/database';\n// import {ContentGenerator} from './ContentGenerator/ContentGenerator';\nimport {LeftSide} from './LeftSide/LeftSide';\n// import {AiOutlineDrawer} from './AiOutlineDrawer';\n// import {CaAiQuotaInfo} from '@/components/common-components/v2/CaAiQuotaInfo';\n// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {RightSidebarV2} from './RightSidebar/v2-sidebar';\nimport {MainLoader} from '@/components/common-components/v2/MainLoader';\nimport {FREDDY_EVENT_SCA_ARTICLE_CREATED, triggerFreddySurvey} from '@/utils/scripts';\nimport {headerStore} from '@/store/storeCompTest';\nexport const PageEditor = observer(\n ({rootStore, isPublic}: { rootStore: RootStoreType; isPublic: boolean }) => {\n const {contentOptimizer, settings} = rootStore;\n const {currentPage, pages, aiOutline: {\n loadAiWriterHistory,\n refetchOneClickDraftResultForArticleCreation,\n }} = contentOptimizer;\n const {\n isUploading,\n isExportingPage,\n isExportingPageLoader,\n setIsPublic,\n // isOpenContentGeneratorDrawer,\n focusTermsClassNames,\n setFocusTermsClassNames,\n // setIsOpenContentGeneratorDrawer,\n setSideBarWidth,\n setViewers,\n viewers,\n isSideBarHidden,\n isInitialEditorStateFetched,\n content,\n editTitle,\n highlights,\n } = currentPage;\n const {aiInProgress} = content;\n const {\n customer: {\n profile: {\n id,\n emailAddress,\n },\n getCustomerQuota,\n },\n } = settings;\n const resultId = contentOptimizer.aiOutline.id;\n\n const {contentOptimizer: {\n currentPage: {\n feTargetKeywords,\n isLinkActive,\n },\n aiMetaData: {\n loadAiMetaData,\n metaData,\n },\n }} = useStore('');\n\n useEffect(() => {\n if (pages?.count === 2) {\n triggerFreddySurvey(id, emailAddress, FREDDY_EVENT_SCA_ARTICLE_CREATED);\n }\n }, [pages?.count]);\n\n // const {setShowOutlinesInDrawer, v2AiOutline, showOutlinesInDrawer} = aiOutline;\n // const [allRef, setAllRef] = useState();\n\n let htmlToDraft = null;\n if (typeof window === 'object') {\n htmlToDraft = require('html-to-draftjs').default;\n }\n\n const {\n query: {uuid, newPage},\n } = useRouter();\n const {t} = useTranslation('common');\n\n\n // const setAllRefToState = element => {\n // setAllRef(element);\n // };\n\n /*\n * CONTENT EDITOR METHODS START\n */\n\n\n // We are settings initial focus terms map so we can use it for initial decoration and highlighting\n\n function moveSelectionToStart(editorState) {\n const content = editorState.getCurrentContent();\n const firstBlock = content.getFirstBlock();\n const firstKey = firstBlock.getKey();\n\n return EditorState.acceptSelection(\n editorState,\n new SelectionState({\n anchorKey: firstKey,\n anchorOffset: 0,\n focusKey: firstKey,\n focusOffset: 0,\n hasFocus: true,\n isBackward: false,\n }),\n );\n }\n\n // This method will put cursor to start of the content\n function moveFocusToStart(editorState) {\n const afterSelectionMove = moveSelectionToStart(editorState);\n return EditorState.forceSelection(\n afterSelectionMove,\n afterSelectionMove.getSelection(),\n );\n }\n\n\n // This method will do the focus terms re-mapping after we update the page content\n const updateFocusTermsState = () => {\n const sortedFocusTerms = currentPage.analytics?.focusTerms?.slice()\n .slice()\n .sort((a, b) => b.name.length - a.name.length);\n\n const internalLinksClusters = currentPage.content?.internalLinkSuggestions?.slice()?.map(item => {\n return {\n name: item.keyword,\n status: 'internal-link-suggestion',\n variations: [],\n };\n });\n\n const finalData = [];\n if (sortedFocusTerms?.length) finalData.push(...sortedFocusTerms);\n if (internalLinksClusters?.length) finalData.push(...internalLinksClusters);\n\n if (sortedFocusTerms) {\n const parts = prepareFinalTerms(sortedFocusTerms);\n const regex = multiWordCountRegex(parts, false);\n\n if (regex == null) {\n return;\n }\n\n setFocusTermsClassNames(mapFocusTerms(finalData));\n }\n };\n\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data + 1)\n .then(() => {\n dbRef.on('value', snapshot => {\n if (snapshot.exists()) {\n const data = snapshot.val();\n setViewers(data);\n }\n });\n });\n }).catch(error => {\n console.error(error);\n });\n }\n\n return () => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().cancel();\n dbRef.get().then(snapshot => {\n const data = snapshot.val();\n firebase.database().ref(`${uuid as string}`).set(data - 1);\n });\n }\n };\n }, []);\n\n useEffect(() => {\n if (uuid && process.env.NODE_ENV === 'production') {\n const dbRef = firebase.database().ref(`${uuid as string}`);\n dbRef.onDisconnect().set(viewers - 1);\n }\n }, [viewers]);\n\n // useEffect(() => {\n // const newState = currentPage?.content?.formattedEditorState();\n // currentPage.setCurrentEditorState(newState);\n // setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n // }, []);\n\n\n // This useEffect is ment to fire only once initially, after we have contentLoadedAt and uuid set\n // It will do initial content populating + highlighting\n useEffect(() => {\n // this prop is used to allow/dissallow all repolls related to editing a page to happen\n currentPage.setRepollsAllowed(true);\n // we are checking current page uuid from url\n // if the response came in and populated the store they will match and only then we update the state\n // we repeat this both here and in content editor compoenent\n\n if (uuid === currentPage.content.uuid && isInitialEditorStateFetched) {\n const newState = currentPage.content?.formattedEditorState();\n const focusedState = moveFocusToStart(newState);\n currentPage.setCurrentEditorState(focusedState);\n\n // This prop is set to false only after initial editor state has been set because\n // we want to prevent the DraftJs from triggering the onChange event on page mount\n currentPage.setIsInitialEditorStateFetched(true);\n\n // This will re-map focus terms and update the state and will trigger the next useEffect\n // which will use that map to re-decorate the content\n updateFocusTermsState();\n } else {\n const newState = currentPage?.content?.formattedEditorState();\n currentPage.setCurrentEditorState(newState);\n setFocusTermsClassNames(mapFocusTerms(currentPage.analytics?.focusTerms?.slice()));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [currentPage.contentLoadedAt, currentPage?.content?.uuid, isInitialEditorStateFetched]);\n\n useEffect(() => {\n currentPage.setRepollsAllowed(true);\n currentPage.setCurrentEditorState(decoratedState(currentPage.currentEditorState, focusTermsClassNames));\n }, [focusTermsClassNames, highlights]);\n\n\n // This is to set initial mapping of the focus terms, which is used for decorating\n useEffect(() => {\n updateFocusTermsState();\n }, [JSON.stringify(currentPage.analytics?.focusTerms?.slice()), JSON.stringify(currentPage.content?.internalLinkSuggestions?.slice())]);\n\n const loadProject = async () => {\n await pages.getAllProjects();\n };\n\n useEffect(() => {\n if (!isPublic) loadProject();\n if (isPublic) {\n setIsPublic(true);\n } else {\n setIsPublic(false);\n }\n }, []);\n\n useEffect(() => {\n if (uuid && !isPublic) {\n loadAiWriterHistory(uuid as string);\n }\n }, []);\n\n useEffect(() => {\n if (resultId) {\n setRefechForBulkArticleCreation();\n }\n }, [resultId, aiInProgress]);\n\n const setRefechForBulkArticleCreation = async () => {\n if (content.aiInProgress && resultId) {\n try {\n const now = new Date().getTime();\n await refetchOneClickDraftResultForArticleCreation(uuid, now);\n } catch (e) {\n Promise.reject(e);\n } finally {\n getCustomerQuota();\n }\n }\n };\n\n useEffect(() => {\n async function load() {\n if (uuid) {\n if (!isPublic) {\n pages.loadPages(false, pages.activeProjectId);\n }\n // this is to check if we are on initial page create screen or are we editing page\n if (!newPage) {\n await currentPage.loadPage(uuid as string);\n const targetKwArr = feTargetKeywords.map(kw => kw.keyword);\n if (content.title?.startsWith('New Document') && targetKwArr?.length) {\n const data = await loadAiMetaData(content.title, targetKwArr);\n if (data) {\n editTitle(data[0]?.metaTitle);\n }\n }\n } else {\n currentPage.initialLoadPage(uuid as string);\n }\n }\n }\n load();\n }, [uuid, currentPage.currentStep, metaData]);\n\n useEffect(() => {\n if (newPage) {\n currentPage.setNewPage(true);\n currentPage.setCurrentStep(1);\n } else {\n currentPage.setNewPage(false);\n }\n }, [newPage]);\n\n useEffect(()=> {\n headerStore.setComponent(null, false, [\n {name: '', spend: 0, total: 0, color: 'green', quotaProps: null},\n ]);\n }, []);\n\n const callBack = (width: number) => {\n if (width <= 400 && width > 0) {\n setSideBarWidth(`${width}px`);\n }\n };\n\n\n return currentPage.loading ? (\n \n {!currentPage.isLinkActive && ((currentPage.newPage && currentPage.currentStep === 1) || <>\n \n {t('error-has-ocurred')}
\n \n )}\n \n \n );\n },\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"notification\":\"styles_notification__OR6ac\",\"contactLink\":\"styles_contactLink__dGgfv\",\"success\":\"styles_success__g7z1D\",\"info\":\"styles_info__efwL4\",\"warning\":\"styles_warning__TRTcI\",\"error\":\"styles_error__PUH5a\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"customInput\":\"style_customInput__xWOlg\",\"customSelect\":\"style_customSelect__5SwsV\",\"individualCustomSelect\":\"style_individualCustomSelect__WX92V\",\"customGeneralSelect\":\"style_customGeneralSelect__OeVke\",\"user\":\"style_user__wmBrz\",\"avatar\":\"style_avatar__mO1Yn\",\"info\":\"style_info__bJG8w\",\"email\":\"style_email__7HMCL\",\"permission\":\"style_permission__eKrIo\",\"shareModal\":\"style_shareModal__tgI8u\",\"icon\":\"style_icon__7Sv9l\",\"back\":\"style_back__XA9rM\",\"header\":\"style_header__P07YH\",\"users\":\"style_users__Xet9k\",\"input\":\"style_input__CbDPX\",\"permissions\":\"style_permissions__1_Cd5\",\"notification\":\"style_notification__69SZ_\",\"checkbox\":\"style_checkbox__HLruZ\",\"inputContainer\":\"style_inputContainer__5l1dT\",\"textarea\":\"style_textarea__lBED_\",\"dropdown\":\"style_dropdown__BLJU4\",\"hideDropdown\":\"style_hideDropdown__EAZwo\",\"cancelModalButton\":\"style_cancelModalButton__0Jn_a\",\"shareModalFooter\":\"style_shareModalFooter__c_I4D\",\"suggestion\":\"style_suggestion__sQOqS\",\"name\":\"style_name__YXf18\",\"subTitle\":\"style_subTitle__hpMvF\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__bvdyc\",\"popoverDivider\":\"style_popoverDivider__7kxDv\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__f7Uga\",\"contentIdeasTitle\":\"style_contentIdeasTitle__NFfEv\",\"descriptionText\":\"style_descriptionText__lFbSB\",\"input\":\"style_input__NVKIY\",\"inputLabel\":\"style_inputLabel__di3As\",\"countrySelector\":\"style_countrySelector__RsNJa\",\"selectInput\":\"style_selectInput__bfqDn\",\"generateIdeasButton\":\"style_generateIdeasButton__wefT5\",\"generatedItemsNumb\":\"style_generatedItemsNumb__oULgy\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__Um6PF\",\"ContentIdea\":\"style_ContentIdea___8T06\",\"controlButtons\":\"style_controlButtons__3DdPK\",\"downloadButton\":\"style_downloadButton__b7Dxj\",\"copyButton\":\"style_copyButton__DS99q\",\"refreshAiOutlineBtn\":\"style_refreshAiOutlineBtn__NfuS_\",\"unsplashContainer\":\"style_unsplashContainer__tKyCE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toolbar\":\"style_toolbar__Vwy8G\",\"leftSection\":\"style_leftSection__N1651\",\"rightSection\":\"style_rightSection__E_CRH\",\"share\":\"style_share__NTvX5\",\"robotIcon\":\"style_robotIcon__d_APK\",\"contentIdeasBtnLabel\":\"style_contentIdeasBtnLabel__4qIOI\",\"shareBtnLabel\":\"style_shareBtnLabel__o5HXJ\",\"undoBtn\":\"style_undoBtn__gR9Ad\",\"redoBtn\":\"style_redoBtn__oFeoL\",\"editor\":\"style_editor__Zg73v\",\"zoom05\":\"style_zoom05__1Dz2Y\",\"zoom075\":\"style_zoom075__JA_q0\",\"zoom09\":\"style_zoom09__pWjeK\",\"zoom1\":\"style_zoom1__2IWB9\",\"zoom12\":\"style_zoom12__O5tgJ\",\"zoom15\":\"style_zoom15__3U5We\",\"zoom2\":\"style_zoom2__RtpNm\",\"expandedEditor\":\"style_expandedEditor__6u5oc\",\"divider\":\"style_divider__Y6Ylq\",\"button\":\"style_button__UOe75\",\"expandBtn\":\"style_expandBtn__eggx8\",\"copyTooltip\":\"style_copyTooltip__S3tye\",\"writeForMeContainer\":\"style_writeForMeContainer__5aagG\",\"writeForMeFeatherIcon\":\"style_writeForMeFeatherIcon__yxu8G\",\"editorTopInfo\":\"style_editorTopInfo__xoncP\",\"leftEditorTopInfo\":\"style_leftEditorTopInfo__L9LlC\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__VSP5g\",\"button\":\"style_button__QUeN9\",\"active\":\"style_active__Fv0RE\",\"urlPopup\":\"style_urlPopup__D9ZJn\",\"inputContainer\":\"style_inputContainer__bm_d7\",\"textLabel\":\"style_textLabel__IaVSL\",\"urlInput\":\"style_urlInput__hn8MM\",\"inputControlls\":\"style_inputControlls__aQiLB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__62ic4\",\"button\":\"style_button__jl08j\",\"active\":\"style_active__7OpW7\",\"urlPopup\":\"style_urlPopup__QdWSN\",\"inputContainer\":\"style_inputContainer__cNQp7\",\"textLabel\":\"style_textLabel__XLCPG\",\"urlInput\":\"style_urlInput__g2XBm\",\"inputControlls\":\"style_inputControlls___Lrie\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__q5NYO\",\"button\":\"style_button__rOfd5\",\"active\":\"style_active__8ok_g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__JEFtz\",\"button\":\"style_button__tWAPP\",\"active\":\"style_active__1Ub_o\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__vN_zL\",\"header-modal\":\"style_header-modal__zaVfr\",\"header-modal__option\":\"style_header-modal__option__uBrLT\",\"header-modal__selected\":\"style_header-modal__selected__HRX68\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__Y7Msi\",\"button\":\"style_button__qE27E\",\"active\":\"style_active__vcuPU\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7_9Fm\",\"button\":\"style_button__I4eBO\",\"active\":\"style_active__vWrUg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__F4Eq3\",\"button\":\"style_button__zXaNR\",\"active\":\"style_active__QB8X9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7hrU8\",\"button\":\"style_button__lBpTe\",\"active\":\"style_active__Vy5N_\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__ngc_6\",\"button\":\"style_button__bwqJh\",\"active\":\"style_active__pcv99\",\"urlPopup\":\"style_urlPopup__MeYFu\",\"inputContainer\":\"style_inputContainer__Yr1Ib\",\"textLabel\":\"style_textLabel__paAwp\",\"urlInput\":\"style_urlInput__u0l_s\",\"inputControlls\":\"style_inputControlls__GUFA1\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"step-one_button__LmGnF\",\"purple\":\"step-one_purple__Dr_VM\",\"teal\":\"step-one_teal__pq6oT\",\"welcome\":\"step-one_welcome__uDuo3\",\"welcomeHeader\":\"step-one_welcomeHeader__qKSL7\",\"welcomeSubHeader\":\"step-one_welcomeSubHeader__yAtvD\",\"welcomeCards\":\"step-one_welcomeCards__lU5iT\",\"welcomeCard\":\"step-one_welcomeCard__K1Ils\",\"welcomeCardHeader\":\"step-one_welcomeCardHeader__YmBsP\",\"welcomeCardSubHeader\":\"step-one_welcomeCardSubHeader__v1GbY\",\"divider\":\"step-one_divider___K9R9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"uploadForm\":\"styles_uploadForm__RQvO_\",\"urlinput\":\"styles_urlinput__NNaUR\",\"uploadBtn\":\"styles_uploadBtn__zNHxo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"keywordContainer\":\"style_keywordContainer__vPXS3\",\"keywordEditIcons\":\"style_keywordEditIcons__3jaVk\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__S1Uen\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__zFqeU\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__5qWYw\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Fg9Sz\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__UBnRt\",\"keywordLocationIcon\":\"style_keywordLocationIcon__uVBJh\",\"showIcons\":\"style_showIcons__gIQdT\",\"keywordDetailsButtonContainer\":\"style_keywordDetailsButtonContainer__nKs7u\",\"keywordDetailsIcon\":\"style_keywordDetailsIcon__6AAJ0\",\"editKwButtonContainer\":\"style_editKwButtonContainer__437ne\",\"editKwButtonIcon\":\"style_editKwButtonIcon__7aEsS\",\"keywordName\":\"style_keywordName__KZoSi\",\"targetKwContainer\":\"style_targetKwContainer__W_edh\",\"keywordMetric\":\"style_keywordMetric__BgvpY\",\"keywordMetricContainer\":\"style_keywordMetricContainer__1Xtmz\",\"expandingContainer\":\"style_expandingContainer__Ty15F\",\"expandBtn\":\"style_expandBtn__bfM2c\",\"keywordsAndSuggestionsContainer\":\"style_keywordsAndSuggestionsContainer__WHZZr\",\"collapsed\":\"style_collapsed___mhNq\",\"targetKeywordsSectionContainer\":\"style_targetKeywordsSectionContainer__MA1nu\",\"expanded\":\"style_expanded__jeR4g\",\"targetKeywordsContainer\":\"style_targetKeywordsContainer__RASzp\",\"locationToggler\":\"style_locationToggler__pes3z\",\"targetKeywordsTitle\":\"style_targetKeywordsTitle__Xiu43\",\"selectRelatedKeywords\":\"style_selectRelatedKeywords__UsR3o\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__iu89Z\",\"suggestedKwSectionTitle\":\"style_suggestedKwSectionTitle__UtMLo\",\"targetKwLoadingMsg\":\"style_targetKwLoadingMsg__vEgdP\",\"kwSuggestionsContainer\":\"style_kwSuggestionsContainer__2wt_G\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__ACSfR\",\"singleSugestedKwInnerContainer\":\"style_singleSugestedKwInnerContainer__b0ror\",\"svAndCpc\":\"style_svAndCpc__c_8wW\",\"controllsBar\":\"style_controllsBar__ALl9x\",\"clickToAdd\":\"style_clickToAdd__xtgcn\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__80skR\",\"suggestedKwTitle\":\"style_suggestedKwTitle__9QaV3\",\"closeSuggestedKW\":\"style_closeSuggestedKW__330Se\",\"secondary-text\":\"style_secondary-text__emnsR\",\"keywords\":\"style_keywords__wjpPt\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__Lm1gP\",\"cpcMetricsProgressBar\":\"style_cpcMetricsProgressBar__LTmQK\",\"focusTermPopover\":\"style_focusTermPopover__pkvY4\",\"popoverTitle\":\"style_popoverTitle__pH9eH\",\"popoverCountrySv\":\"style_popoverCountrySv__3zElP\",\"sv\":\"style_sv__qOMD7\",\"emoji\":\"style_emoji__xv7Ls\",\"popOverTitle\":\"style_popOverTitle__v_wFU\",\"competitors\":\"style_competitors__YGYr0\",\"competitor\":\"style_competitor__GWmTF\",\"popoverDivider\":\"style_popoverDivider__XCRSU\",\"headingsPopover\":\"style_headingsPopover__jTD85\",\"headingTooltipValue\":\"style_headingTooltipValue__dRrjD\",\"countrySelectorPopover\":\"style_countrySelectorPopover__RhvA2\",\"divider\":\"style_divider__0ifEI\",\"columnTitlesRow\":\"style_columnTitlesRow__oKXV2\",\"columnTitle\":\"style_columnTitle__fLfkI\",\"defaultLocationName\":\"style_defaultLocationName__K60S8\",\"locationInfo\":\"style_locationInfo__DGWFc\",\"setAsDefaultText\":\"style_setAsDefaultText__q4qk_\",\"countryReach\":\"style_countryReach__5HPf_\",\"singleCountryRow\":\"style_singleCountryRow__6YTEm\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__lSqDc\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__OhW7Z\",\"newKwFormContainer\":\"style_newKwFormContainer__ysNll\",\"addNewKwBtn\":\"style_addNewKwBtn__aHUY2\",\"addKeywordStyle\":\"style_addKeywordStyle___NjDc\",\"plusIconStyle\":\"style_plusIconStyle__dmf5B\",\"disabledBtn\":\"style_disabledBtn__z9Cbs\",\"addNewKwForm\":\"style_addNewKwForm__5iXKx\",\"newKwInputControllsContainer\":\"style_newKwInputControllsContainer__Hc69J\",\"newKwInputContainer\":\"style_newKwInputContainer__bkNBM\",\"customInputField\":\"style_customInputField__g9Ppg\",\"addNewKwBtnLabel\":\"style_addNewKwBtnLabel__SWOIT\",\"quota\":\"style_quota__MfYRt\",\"quotaValues\":\"style_quotaValues__6t772\",\"plusIcon\":\"style_plusIcon__lL8Wh\",\"newEmphasizedFormStyle\":\"style_newEmphasizedFormStyle__xmFMZ\",\"pulse-purple\":\"style_pulse-purple__P7U1V\",\"newFormStyle\":\"style_newFormStyle__lqdiW\",\"editKwForm\":\"style_editKwForm__Q_jdR\",\"editKwInputContainer\":\"style_editKwInputContainer__WBOeM\",\"editKwControllsContainer\":\"style_editKwControllsContainer__D2l73\",\"populateButton\":\"style_populateButton__aGc27\",\"confirmButton\":\"style_confirmButton__DZXoJ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentOptimizerContainer\":\"bread-crumb_contentOptimizerContainer__rqiMo\",\"divider\":\"bread-crumb_divider__VKsLJ\",\"scrolledEditor\":\"bread-crumb_scrolledEditor__4iLHS\",\"contentOptimizerHeader\":\"bread-crumb_contentOptimizerHeader__mSsmj\",\"title\":\"bread-crumb_title__8VW90\",\"back\":\"bread-crumb_back__VYwHf\",\"share\":\"bread-crumb_share__7_i4v\",\"backWrapper\":\"bread-crumb_backWrapper__XPOW2\",\"headerExtra\":\"bread-crumb_headerExtra__lVFkV\",\"kebab\":\"bread-crumb_kebab__NIs_t\",\"kebabMenu\":\"bread-crumb_kebabMenu__oJYmb\",\"kebabMenuItem\":\"bread-crumb_kebabMenuItem__YYQHl\",\"redText\":\"bread-crumb_redText__WFg6A\",\"exportBtn\":\"bread-crumb_exportBtn__qzHGF\",\"modal\":\"bread-crumb_modal__QLBQN\",\"modalTitle\":\"bread-crumb_modalTitle__0lf8D\",\"websiteLabel\":\"bread-crumb_websiteLabel__uP_MN\",\"editContainer\":\"bread-crumb_editContainer__ok1vS\",\"btn\":\"bread-crumb_btn__lZxTx\",\"exportToPdfButton\":\"bread-crumb_exportToPdfButton__HCYl1\",\"exportToDocsButton\":\"bread-crumb_exportToDocsButton__dtrrC\",\"exportDropdown\":\"bread-crumb_exportDropdown__7llmi\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerKeywords\":\"styles_headerKeywords__xxGL0\",\"popoverDivider\":\"styles_popoverDivider__zaO9y\",\"draftToolkit\":\"styles_draftToolkit__n9jPZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"content-editor_container__QYw4p\",\"left-side\":\"content-editor_left-side__l1TXd\",\"pageEditorError\":\"content-editor_pageEditorError__H_8Vw\",\"headerKeywords\":\"content-editor_headerKeywords__Nu5m7\",\"popoverDivider\":\"content-editor_popoverDivider__m2Vuv\",\"draftToolkit\":\"content-editor_draftToolkit__jDD0p\",\"loaderSpinnerContainer\":\"content-editor_loaderSpinnerContainer__3w2sl\",\"loaderSpinner\":\"content-editor_loaderSpinner__IxzP_\",\"spin\":\"content-editor_spin__6tOJb\",\"selectionTooltip\":\"content-editor_selectionTooltip__Qo0Ri\",\"arrowBottom\":\"content-editor_arrowBottom__3KZVT\",\"textInputNotification\":\"content-editor_textInputNotification__lnemm\",\"contentGeneratorDrawer\":\"content-editor_contentGeneratorDrawer__XXSAo\",\"closeIcons\":\"content-editor_closeIcons__5_3Bw\",\"outlineDrawerBackArrow\":\"content-editor_outlineDrawerBackArrow__GwHmD\",\"contentGeneratorTitle\":\"content-editor_contentGeneratorTitle__Agz_h\",\"selectedTextInfoContainer\":\"content-editor_selectedTextInfoContainer__WRKBY\",\"dataAndIcon\":\"content-editor_dataAndIcon__6OcYR\",\"textAndUrl\":\"content-editor_textAndUrl__XUxuw\",\"text\":\"content-editor_text__21AKd\",\"url\":\"content-editor_url__v_O1a\",\"textUrlControlls\":\"content-editor_textUrlControlls__thYuv\",\"urlPopup\":\"content-editor_urlPopup__gHOHE\",\"inputContainer\":\"content-editor_inputContainer__Mb2tQ\",\"textLabel\":\"content-editor_textLabel__mnezc\",\"urlInput\":\"content-editor_urlInput__2P2Tu\",\"inputControlls\":\"content-editor_inputControlls__qFkMX\",\"linkSuggestionsPopover\":\"content-editor_linkSuggestionsPopover__FFCdv\",\"extensionButton\":\"content-editor_extensionButton__bBbw0\",\"iconButton\":\"content-editor_iconButton__Cfbam\",\"ctaTitle\":\"content-editor_ctaTitle__ssOd0\",\"extensionButtonStyle\":\"content-editor_extensionButtonStyle__PN0ie\",\"closeIcon\":\"content-editor_closeIcon__UKkJM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"modal\":\"style_modal__rZesC\",\"tableOuterClusters\":\"style_tableOuterClusters__qcXJL\",\"roundEdgesTable\":\"style_roundEdgesTable__iZjyo\",\"ant-table-content\":\"style_ant-table-content__S_Fgs\",\"purpleRow\":\"style_purpleRow__bot_O\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"citationsContainer\":\"style_citationsContainer__oVqah\",\"citationsInnerContainer\":\"style_citationsInnerContainer__ZHHEU\",\"singleCitation\":\"style_singleCitation__qbxUz\",\"citationIcon\":\"style_citationIcon___x2Qc\",\"citationInfo\":\"style_citationInfo__tZ76P\",\"citationName\":\"style_citationName__pdvkB\",\"citationUrl\":\"style_citationUrl__RdI_o\",\"citationText\":\"style_citationText__BdN5t\",\"serpUsedByContainer\":\"style_serpUsedByContainer__azyj8\",\"citationSerpsContainer\":\"style_citationSerpsContainer__iipYx\",\"serpIcon\":\"style_serpIcon__w_LvR\",\"metaDescTooltip\":\"style_metaDescTooltip__nuDt4\",\"serpTooltip\":\"style_serpTooltip__QLWro\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__6RNd6\",\"serpTitle\":\"style_serpTitle__RXoga\",\"serpUrl\":\"style_serpUrl__tu4XQ\",\"emptyDataBox\":\"style_emptyDataBox__Mo6mN\",\"emptyImg\":\"style_emptyImg__9U7Nu\",\"emptyDataTitle\":\"style_emptyDataTitle__R5BVL\",\"subTitle\":\"style_subTitle__rYSu7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"questionsContainer\":\"style_questionsContainer__yjLcX\",\"questionsInnerContainer\":\"style_questionsInnerContainer__2asTx\",\"questionsNameAndCopy\":\"style_questionsNameAndCopy__lm2Dj\",\"customQuestionsName\":\"style_customQuestionsName___Vs5R\",\"serpUsedByContainer\":\"style_serpUsedByContainer__AobiD\",\"citationSerpsContainer\":\"style_citationSerpsContainer__jAx_o\",\"serpIcon\":\"style_serpIcon__6QGH4\",\"emptyDataBox\":\"style_emptyDataBox__1nQ8c\",\"emptyImg\":\"style_emptyImg__3_6YA\",\"emptyDataTitle\":\"style_emptyDataTitle__ApBiU\",\"focusTermPopover\":\"style_focusTermPopover__eCy11\",\"popOverTitle\":\"style_popOverTitle__q_bNa\",\"popoverDivider\":\"style_popoverDivider__0eu5_\",\"copyTooltip\":\"style_copyTooltip__kgoSh\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__7gwcB\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__cm2nS\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__RT8Gn\",\"copyIcon\":\"style_copyIcon__j24nu\",\"totalQuestions\":\"style_totalQuestions__2A_bv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__zQsc0\",\"limitedAccess\":\"style_limitedAccess__B2vHw\",\"flexRow\":\"style_flexRow__R2pUv\",\"quota\":\"style_quota__iFHMf\",\"focusTermDropdown\":\"style_focusTermDropdown__L17PC\",\"scoreContainer\":\"style_scoreContainer__stcBp\",\"scoreDescription\":\"style_scoreDescription__QkW_1\",\"scoreDescTitle\":\"style_scoreDescTitle__qa_Kd\",\"scoreDescText\":\"style_scoreDescText__Hprrn\",\"speedIndexContainer\":\"style_speedIndexContainer__Dejs9\",\"speedIndexDot\":\"style_speedIndexDot__ykTus\",\"refecthButtonContainer\":\"style_refecthButtonContainer__NDBTa\",\"popoverInfoContainer\":\"style_popoverInfoContainer__jZwn6\",\"customSpinner\":\"style_customSpinner__I9jMh\",\"keywords\":\"style_keywords__VUAeg\",\"keywordMetric\":\"style_keywordMetric__jFkNF\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__nk_Rf\",\"viewers\":\"style_viewers__3GdID\",\"avatar\":\"style_avatar__nAZ3X\",\"progress\":\"style_progress__Emagh\",\"smallProgress\":\"style_smallProgress__b2LvX\",\"needHelp\":\"style_needHelp__pVjFU\",\"userIcon\":\"style_userIcon__X7Oyb\",\"readabilityLetter\":\"style_readabilityLetter__RlwFP\",\"readabilityAActive\":\"style_readabilityAActive__etxiG\",\"readabilityBActive\":\"style_readabilityBActive__1xJXN\",\"readabilityCActive\":\"style_readabilityCActive__u9Z0Q\",\"readabilityDActive\":\"style_readabilityDActive__xdRpu\",\"readabilityEActive\":\"style_readabilityEActive__VQ8_a\",\"readabilitySecondary\":\"style_readabilitySecondary__2EAQH\",\"focusTermsCollapse\":\"style_focusTermsCollapse__kVGtj\",\"header\":\"style_header__YUb4w\",\"number\":\"style_number__q8kh0\",\"expandedIcon\":\"style_expandedIcon__l8nCj\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin___4hbN\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__ePTwm\",\"focusTermContent\":\"style_focusTermContent__CK3KM\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__DQAwe\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__EA8m7\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__QpYDT\",\"copyIcon\":\"style_copyIcon__3wT4i\",\"focusTermAndTags\":\"style_focusTermAndTags__Kp9wt\",\"icon\":\"style_icon__moQAn\",\"focusTermName\":\"style_focusTermName__Ly6am\",\"foundInElement\":\"style_foundInElement__tEiL_\",\"customFocusTermName\":\"style_customFocusTermName__LzC2O\",\"brandedLabel\":\"style_brandedLabel__6T1gS\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__rwsPG\",\"focusTermUsageCount\":\"style_focusTermUsageCount__1j6I7\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__qBdnF\",\"removeFocusTerms\":\"style_removeFocusTerms__07IkA\",\"removeTermLabel\":\"style_removeTermLabel__VbKWK\",\"removeTermIcon\":\"style_removeTermIcon__cKkeI\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__u3c18\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__SLkEY\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__xzq3T\",\"writingStylePopover\":\"style_writingStylePopover__sHjLJ\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__iCD9H\",\"focusTermPopover\":\"style_focusTermPopover__FKP8t\",\"innerPopover\":\"style_innerPopover__UbNja\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__RFjzG\",\"withArrow\":\"style_withArrow__I_XFV\",\"popoverTitle\":\"style_popoverTitle__lUKZy\",\"popoverCountrySv\":\"style_popoverCountrySv__geNG6\",\"sv\":\"style_sv__kQDDv\",\"emoji\":\"style_emoji__YGsrS\",\"popOverTitle\":\"style_popOverTitle__ahuD1\",\"competitors\":\"style_competitors__hwtcD\",\"competitor\":\"style_competitor__IqYyC\",\"singleCompetitor\":\"style_singleCompetitor__FwGi3\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__4CKN9\",\"snippetsContainer\":\"style_snippetsContainer__ot3Ml\",\"singleSnippet\":\"style_singleSnippet__XCQdn\",\"popoverDivider\":\"style_popoverDivider__chO8P\",\"popOverTermsTitle\":\"style_popOverTermsTitle__NKa1t\",\"headingsPopover\":\"style_headingsPopover__hbinC\",\"headingTooltipValue\":\"style_headingTooltipValue__bTPOI\",\"collapseContainer\":\"style_collapseContainer__TNTaa\",\"collapsableContainer\":\"style_collapsableContainer__HGsnN\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__MGXVA\",\"collapseButton\":\"style_collapseButton__kR3ue\",\"commonPopover\":\"style_commonPopover__kfD05\",\"editKeywordsBtn\":\"style_editKeywordsBtn__IvUg6\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__b8_ix\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__lUYBT\",\"isKeywordRemoving\":\"style_isKeywordRemoving__0Y5Pv\",\"suggestedKwContainer\":\"style_suggestedKwContainer__IrJwP\",\"svAndCpc\":\"style_svAndCpc__eV3Ml\",\"clickToAdd\":\"style_clickToAdd__Rf3jy\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__e16rv\",\"closeSuggestedKW\":\"style_closeSuggestedKW__vmyEL\",\"cancelButton\":\"style_cancelButton__vFlju\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon__hp2tW\",\"keywordContainer\":\"style_keywordContainer__o4y1J\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__HyXGY\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__n0rhQ\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__0GIsE\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Nbr1J\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__C4CXq\",\"keywordLocationIcon\":\"style_keywordLocationIcon__YjZTQ\",\"showIcons\":\"style_showIcons__PKtA1\",\"editKwButtonContainer\":\"style_editKwButtonContainer__5310p\",\"editKwButtonIcon\":\"style_editKwButtonIcon__09bVC\",\"keywordName\":\"style_keywordName__85ap5\",\"keywordMetricContainer\":\"style_keywordMetricContainer__0AxnT\",\"link\":\"style_link__vZDiF\",\"orderContentBtn\":\"style_orderContentBtn__uNKgi\",\"footerText\":\"style_footerText__iKsz1\",\"divider\":\"style_divider__mevUB\",\"viewSchemaBtn\":\"style_viewSchemaBtn__pU_vK\",\"tabs\":\"style_tabs__m6jOQ\",\"truncateText\":\"style_truncateText__hYHYr\",\"darkenTechnical\":\"style_darkenTechnical__gwrKF\",\"importUrlButton\":\"style_importUrlButton__KuVWa\",\"scoreDescHeader\":\"style_scoreDescHeader__hWDqY\",\"popOver\":\"style_popOver__f04Uy\",\"subtitle\":\"style_subtitle__OIvMk\",\"scrollBarSidebar\":\"style_scrollBarSidebar__Br9J8\",\"focusTermsExpanded\":\"style_focusTermsExpanded__6qt2U\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__9vao9\",\"selectContainer\":\"style_selectContainer___uIb5\",\"customSelectInput\":\"style_customSelectInput__eHqgt\",\"globeContainer\":\"style_globeContainer__63VkK\",\"globeIcon\":\"style_globeIcon__jyZcv\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__QGb2A\",\"countryInfo\":\"style_countryInfo__x__GX\",\"countrySearch\":\"style_countrySearch__BmySQ\",\"topDiv\":\"style_topDiv__wvomn\",\"locationArea\":\"style_locationArea__zWDch\",\"addKwBtnContainer\":\"style_addKwBtnContainer__FBfop\",\"tooltipInner\":\"style_tooltipInner___CBL_\",\"writingStyleContainer\":\"style_writingStyleContainer__keOla\",\"singleReadabilityItem\":\"style_singleReadabilityItem__Fe4pT\",\"activeReadabilityItem\":\"style_activeReadabilityItem__UpNZT\",\"prevReadabilityItem\":\"style_prevReadabilityItem__BGp7b\",\"nextReadabilityItem\":\"style_nextReadabilityItem__EGWMl\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__pUSoR\",\"addNewKwForm\":\"style_addNewKwForm__UIbcE\",\"populateButton\":\"style_populateButton__uUxBA\",\"customInputField\":\"style_customInputField__PqCdR\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs__e5i_W\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__ymRtc\",\"questionsTab\":\"style_questionsTab__BzJZ3\",\"countrySelectorPopover\":\"style_countrySelectorPopover__rkd0q\",\"columnTitlesRow\":\"style_columnTitlesRow__gDyYX\",\"columnTitle\":\"style_columnTitle__NsuCR\",\"defaultLocationName\":\"style_defaultLocationName__t5x2F\",\"locationInfo\":\"style_locationInfo__xzAIt\",\"setAsDefaultText\":\"style_setAsDefaultText__URXN3\",\"countryReach\":\"style_countryReach__Vqlx_\",\"singleCountryRow\":\"style_singleCountryRow__pNmS5\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__1cgyK\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__mvCk5\",\"copyTooltip\":\"style_copyTooltip__M8waz\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__RCmbz\",\"miniMetrics\":\"style_miniMetrics__uglSl\",\"miniMetricsLabel\":\"style_miniMetricsLabel__C7fe6\",\"miniMetricsValue\":\"style_miniMetricsValue__lweAH\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__L1MLr\",\"longLoadingBanner\":\"style_longLoadingBanner__n1_Co\",\"customSchemaBtn\":\"style_customSchemaBtn__L967y\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"linkToolTip\":\"style_linkToolTip__bhIce\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsContainer\":\"style_competitorsContainer__SfNOS\",\"competitorsInnerContainer\":\"style_competitorsInnerContainer___TbD7\",\"singleCompetitor\":\"style_singleCompetitor__U87HC\",\"competitorDetailsContainer\":\"style_competitorDetailsContainer__StWBo\",\"competitorPosition\":\"style_competitorPosition__M88ib\",\"competitorContentScore\":\"style_competitorContentScore__KDgTT\",\"competitorWordCount\":\"style_competitorWordCount__GBsaT\",\"splitter\":\"style_splitter__eGmIb\",\"progress\":\"style_progress__2Uzzo\",\"competitorIcon\":\"style_competitorIcon__FaDSp\",\"competitorInfo\":\"style_competitorInfo__V54hG\",\"competitorName\":\"style_competitorName__F92CB\",\"competitorUrl\":\"style_competitorUrl__s2401\",\"competitorText\":\"style_competitorText__Fzphu\",\"emptyDataBox\":\"style_emptyDataBox__4N8UY\",\"emptyImg\":\"style_emptyImg__CYXAU\",\"emptyDataTitle\":\"style_emptyDataTitle__Js1W9\",\"selectInput\":\"style_selectInput___gVgJ\",\"keywordChecked\":\"style_keywordChecked__C87zU\",\"ant-select\":\"style_ant-select__7CoFi\",\"ant-select-disabled\":\"style_ant-select-disabled__ju49Y\",\"ant-select-selector\":\"style_ant-select-selector__r_4up\",\"ant-select-single\":\"style_ant-select-single__R__La\",\"ant-select-customize-input\":\"style_ant-select-customize-input__4fC4G\",\"tooltipOverlay\":\"style_tooltipOverlay__6zcSe\",\"competitorTooltipUrl\":\"style_competitorTooltipUrl__U2ss8\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"analyticsCollapseCard\":\"style_analyticsCollapseCard__sEtSW\",\"expandIcon\":\"style_expandIcon__nKE6c\",\"header\":\"style_header__hnfX_\",\"headerRight\":\"style_headerRight__YroUz\",\"title\":\"style_title__ICalb\",\"divider\":\"style_divider__zJoLJ\",\"colTitle\":\"style_colTitle__nPW60\",\"pageText\":\"style_pageText__eXO_c\",\"analyticsHideArrow\":\"style_analyticsHideArrow__dF_7X\",\"paginationStyle\":\"style_paginationStyle__DHqNy\",\"singlePageBlur\":\"style_singlePageBlur__xKJPI\",\"filters\":\"style_filters__l5Lmi\",\"filtersText\":\"style_filtersText__Ri9O_\",\"filtersItems\":\"style_filtersItems__wtY3s\",\"chevron\":\"style_chevron__PPxCQ\",\"OptionContainer\":\"style_OptionContainer__9w4R7\",\"checkboxLabel\":\"style_checkboxLabel__mF6_s\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__DXBXv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorIcon\":\"style_competitorIcon__77Of4\",\"pageTitleUrl\":\"style_pageTitleUrl__l8xBO\",\"selectInput\":\"style_selectInput__bKQhM\",\"tableOuterPages\":\"style_tableOuterPages__AgusG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__l3WUN\",\"truncate\":\"style_truncate__5_fss\",\"tabsContainer\":\"style_tabsContainer__UYJo0\",\"tooltipContent\":\"style_tooltipContent__yIv6r\",\"title\":\"style_title__vbncV\",\"stat\":\"style_stat__2U44j\",\"label\":\"style_label__oCj7Z\",\"value\":\"style_value__OatCd\",\"competingTermsDrawerStyle\":\"style_competingTermsDrawerStyle__98Cfv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"selectInput\":\"style_selectInput__RDSGZ\",\"minified\":\"style_minified__rLAna\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsHeadingsDrawerStyle\":\"style_competitorsHeadingsDrawerStyle__ejLJA\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__fymKP\",\"popoverDivider\":\"style_popoverDivider__TIZ7J\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__4jpzP\",\"contentIdeasTitle\":\"style_contentIdeasTitle__rDNWa\",\"descriptionText\":\"style_descriptionText__dkTjD\",\"input\":\"style_input__ULYYv\",\"inputLabel\":\"style_inputLabel__ItSkl\",\"countrySelector\":\"style_countrySelector__DElA_\",\"selectInput\":\"style_selectInput__bf__m\",\"generateIdeasButton\":\"style_generateIdeasButton__AqGzy\",\"generatedItemsNumb\":\"style_generatedItemsNumb__iz2UY\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__4mBeR\",\"ContentIdea\":\"style_ContentIdea__2PlUV\",\"controlButtons\":\"style_controlButtons__YpGL7\",\"downloadButton\":\"style_downloadButton__iWffV\",\"copyButton\":\"style_copyButton___gD7q\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"overViewContainer\":\"style_overViewContainer__gRQCk\",\"title\":\"style_title__HNTaD\",\"boldTitle\":\"style_boldTitle__6f4Ii\",\"searchVolume\":\"style_searchVolume__kmSSg\",\"commonCitations\":\"style_commonCitations__g_Ylt\",\"citationScroll\":\"style_citationScroll__spbFE\",\"singleCitation\":\"style_singleCitation__0mNxO\",\"citationIcon\":\"style_citationIcon__UfZKe\",\"citationInfo\":\"style_citationInfo__fh1eJ\",\"citationName\":\"style_citationName__0_jeb\",\"citationUrl\":\"style_citationUrl____8Xs\",\"citationText\":\"style_citationText__j1sAb\",\"serpUsedByContainer\":\"style_serpUsedByContainer__82DwT\",\"citationSerpsContainer\":\"style_citationSerpsContainer__8KMGG\",\"serpIcon\":\"style_serpIcon__2dcxZ\",\"serpTooltip\":\"style_serpTooltip__mFPIs\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__tXyUj\",\"serpTitle\":\"style_serpTitle__KxJsy\",\"serpUrl\":\"style_serpUrl__oCtSk\",\"rankingContainer\":\"style_rankingContainer__V9EQL\",\"statusBar\":\"style_statusBar__qUtAS\",\"barTitle\":\"style_barTitle__yUiCm\",\"barSubTitle\":\"style_barSubTitle__ltuLr\",\"createButton\":\"style_createButton__4IncC\",\"rankingTable\":\"style_rankingTable__hRQEi\",\"firstColumnText\":\"style_firstColumnText__WROJq\",\"progress\":\"style_progress__Ft_pg\",\"dot\":\"style_dot__n0CLC\",\"topCompetitorTable\":\"style_topCompetitorTable__StrGn\",\"td\":\"style_td__vaRRm\",\"th\":\"style_th__e9zfY\",\"similarKeywordsTable\":\"style_similarKeywordsTable__53Snx\",\"paginationContainer\":\"style_paginationContainer__jJX9i\",\"titleText\":\"style_titleText__Z96eD\",\"urlText\":\"style_urlText__Qo1bK\",\"competitorImg\":\"style_competitorImg__Ct7If\",\"topTagsContainer\":\"style_topTagsContainer__30JuF\",\"topTags\":\"style_topTags__lUSuL\",\"addToProjectBtnExpanded\":\"style_addToProjectBtnExpanded___r13i\",\"addToProjectBtn\":\"style_addToProjectBtn__t13df\",\"disabledBtn\":\"style_disabledBtn__iGVvR\",\"addedToProjectBtnExpanded\":\"style_addedToProjectBtnExpanded__y3OYB\",\"iconRemove\":\"style_iconRemove__r5k98\",\"iconAdded\":\"style_iconAdded__KtJk2\",\"addedToProjectBtn\":\"style_addedToProjectBtn__AQ2cX\",\"viewAllKWButton\":\"style_viewAllKWButton__mqQ1f\",\"tooltipOverlay\":\"style_tooltipOverlay__EQTVG\",\"truncate\":\"style_truncate___oeK6\",\"contentResearchDrawerStyle\":\"style_contentResearchDrawerStyle__zXIxG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__V9bN1\",\"limitedAccess\":\"style_limitedAccess__9hmvs\",\"flexRow\":\"style_flexRow__TypB_\",\"quota\":\"style_quota__rhh52\",\"focusTermDropdown\":\"style_focusTermDropdown__AOpQn\",\"scoreContainer\":\"style_scoreContainer__loUPZ\",\"scoreDescription\":\"style_scoreDescription__fydWp\",\"scoreDescTitle\":\"style_scoreDescTitle__N5Fq9\",\"scoreDescText\":\"style_scoreDescText__49I_N\",\"speedIndexContainer\":\"style_speedIndexContainer__hpZ7E\",\"speedIndexDot\":\"style_speedIndexDot__XHb3w\",\"refecthButtonContainer\":\"style_refecthButtonContainer__jX7gt\",\"popoverInfoContainer\":\"style_popoverInfoContainer__zv0v3\",\"customSpinner\":\"style_customSpinner___6GwX\",\"keywords\":\"style_keywords__fho0v\",\"keywordMetric\":\"style_keywordMetric__8JKbU\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__UMcSb\",\"viewers\":\"style_viewers__L2oXV\",\"avatar\":\"style_avatar__fZe_c\",\"progress\":\"style_progress__JMqDz\",\"smallProgress\":\"style_smallProgress__gDgKa\",\"needHelp\":\"style_needHelp__wFCHN\",\"userIcon\":\"style_userIcon__ByzNC\",\"readabilityLetter\":\"style_readabilityLetter__hQD0j\",\"readabilityAActive\":\"style_readabilityAActive__X2_dk\",\"readabilityBActive\":\"style_readabilityBActive__fAWmd\",\"readabilityCActive\":\"style_readabilityCActive__i1lv3\",\"readabilityDActive\":\"style_readabilityDActive__VivCX\",\"readabilityEActive\":\"style_readabilityEActive__H5ftS\",\"readabilitySecondary\":\"style_readabilitySecondary__QWVvd\",\"focusTermsCollapse\":\"style_focusTermsCollapse__UdsfG\",\"header\":\"style_header__PDtnu\",\"number\":\"style_number__G29Vf\",\"expandedIcon\":\"style_expandedIcon__VyaR6\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin__fA2SL\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__PWpsl\",\"focusTermContent\":\"style_focusTermContent__erOS3\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__ih_4n\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__lXX3f\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__uE5uE\",\"copyIcon\":\"style_copyIcon__Yl1p4\",\"focusTermAndTags\":\"style_focusTermAndTags__e71fF\",\"icon\":\"style_icon__SlMha\",\"focusTermName\":\"style_focusTermName__2byG0\",\"foundInElement\":\"style_foundInElement__W0Nx4\",\"customFocusTermName\":\"style_customFocusTermName__Ms_Z_\",\"brandedLabel\":\"style_brandedLabel__RK_ob\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__z9yEJ\",\"focusTermUsageCount\":\"style_focusTermUsageCount__2P6MT\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__pHGc3\",\"removeFocusTerms\":\"style_removeFocusTerms__ERiTh\",\"removeTermLabel\":\"style_removeTermLabel__Hngc_\",\"removeTermIcon\":\"style_removeTermIcon__M1_JE\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__Oa1Mz\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__DyVeh\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__glCbD\",\"writingStylePopover\":\"style_writingStylePopover__C3ut3\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__5vHOV\",\"focusTermPopover\":\"style_focusTermPopover__VnTU3\",\"innerPopover\":\"style_innerPopover__lSYg1\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__24Dg6\",\"withArrow\":\"style_withArrow__5GtWL\",\"popoverTitle\":\"style_popoverTitle__ExoBo\",\"popoverCountrySv\":\"style_popoverCountrySv__XjYX9\",\"sv\":\"style_sv__uUHFn\",\"emoji\":\"style_emoji__YIvMa\",\"popOverTitle\":\"style_popOverTitle__QEfN0\",\"competitors\":\"style_competitors___oTWx\",\"competitor\":\"style_competitor__xaN9N\",\"singleCompetitor\":\"style_singleCompetitor__y4FaW\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__IGy_S\",\"snippetsContainer\":\"style_snippetsContainer__ujuID\",\"singleSnippet\":\"style_singleSnippet__VPWpj\",\"popoverDivider\":\"style_popoverDivider__boUZ7\",\"headingsPopover\":\"style_headingsPopover__y8sGr\",\"headingTooltipValue\":\"style_headingTooltipValue__fgpE6\",\"collapseContainer\":\"style_collapseContainer__pts2d\",\"collapsableContainer\":\"style_collapsableContainer__H44WO\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__88ikQ\",\"collapseButton\":\"style_collapseButton__so3g3\",\"commonPopover\":\"style_commonPopover__GswDO\",\"editKeywordsBtn\":\"style_editKeywordsBtn__u6kSF\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__NVC47\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__PZNMQ\",\"isKeywordRemoving\":\"style_isKeywordRemoving__juQLI\",\"suggestedKwContainer\":\"style_suggestedKwContainer__szYtD\",\"svAndCpc\":\"style_svAndCpc__KtqVX\",\"clickToAdd\":\"style_clickToAdd__GtPlI\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__uAxIa\",\"closeSuggestedKW\":\"style_closeSuggestedKW__g89NG\",\"cancelButton\":\"style_cancelButton__CSqoR\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon___PuoH\",\"keywordContainer\":\"style_keywordContainer__4fdS3\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__2uDTM\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__Num0E\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__Qqz06\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__aT7_s\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__ceI0z\",\"keywordLocationIcon\":\"style_keywordLocationIcon__eF4lH\",\"showIcons\":\"style_showIcons__iTCoZ\",\"editKwButtonContainer\":\"style_editKwButtonContainer__saLfy\",\"editKwButtonIcon\":\"style_editKwButtonIcon__gMi05\",\"keywordName\":\"style_keywordName__q2NAW\",\"keywordMetricContainer\":\"style_keywordMetricContainer___q6X_\",\"link\":\"style_link__01A4S\",\"orderContentBtn\":\"style_orderContentBtn__DE32O\",\"footerText\":\"style_footerText__s81Rx\",\"divider\":\"style_divider__kuakJ\",\"viewSchemaBtn\":\"style_viewSchemaBtn__4XAB1\",\"tabs\":\"style_tabs__yKF1D\",\"truncateText\":\"style_truncateText__uv_Dk\",\"darkenTechnical\":\"style_darkenTechnical__xbbue\",\"importUrlButton\":\"style_importUrlButton__gFSge\",\"scoreDescHeader\":\"style_scoreDescHeader__jw8OS\",\"popOver\":\"style_popOver__TgfyK\",\"subtitle\":\"style_subtitle__py_8r\",\"scrollBarSidebar\":\"style_scrollBarSidebar__7vCov\",\"focusTermsExpanded\":\"style_focusTermsExpanded__K1IrF\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__gHhKR\",\"selectContainer\":\"style_selectContainer__dc_Qg\",\"customSelectInput\":\"style_customSelectInput__4LY7U\",\"globeContainer\":\"style_globeContainer__wDM6e\",\"globeIcon\":\"style_globeIcon__Grl8C\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__a4Cas\",\"countryInfo\":\"style_countryInfo__fnbn7\",\"countrySearch\":\"style_countrySearch__67Vea\",\"topDiv\":\"style_topDiv__VdAWB\",\"locationArea\":\"style_locationArea__aoXon\",\"addKwBtnContainer\":\"style_addKwBtnContainer__fZ77F\",\"tooltipInner\":\"style_tooltipInner__vtG3X\",\"writingStyleContainer\":\"style_writingStyleContainer___9YQW\",\"singleReadabilityItem\":\"style_singleReadabilityItem__eEjir\",\"activeReadabilityItem\":\"style_activeReadabilityItem__wuJaK\",\"prevReadabilityItem\":\"style_prevReadabilityItem__Tp5ZP\",\"nextReadabilityItem\":\"style_nextReadabilityItem__bvcj1\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__q2__N\",\"addNewKwForm\":\"style_addNewKwForm__RKuU2\",\"populateButton\":\"style_populateButton__GrfTY\",\"customInputField\":\"style_customInputField__zvN4C\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs___0OIs\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__Gd2PJ\",\"questionsTab\":\"style_questionsTab__dppHa\",\"countrySelectorPopover\":\"style_countrySelectorPopover__T8e40\",\"columnTitlesRow\":\"style_columnTitlesRow__NMSYq\",\"columnTitle\":\"style_columnTitle__7VIWu\",\"defaultLocationName\":\"style_defaultLocationName__F5x15\",\"locationInfo\":\"style_locationInfo__NpXoS\",\"setAsDefaultText\":\"style_setAsDefaultText__cnlk2\",\"countryReach\":\"style_countryReach__pE0aL\",\"singleCountryRow\":\"style_singleCountryRow__pUxir\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__3i839\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__qu_SS\",\"copyTooltip\":\"style_copyTooltip__3916s\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__pm0sj\",\"miniMetrics\":\"style_miniMetrics__zV6fP\",\"miniMetricsLabel\":\"style_miniMetricsLabel__EtBkz\",\"miniMetricsValue\":\"style_miniMetricsValue__TOlMK\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__kw3Fc\",\"longLoadingBanner\":\"style_longLoadingBanner__Xqc_5\",\"customSchemaBtn\":\"style_customSchemaBtn__R0sVb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarError\":\"error_sidebarError__2cjOS\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"resize\":\"v2-sidebar_resize__QB3FU\",\"sidebar\":\"v2-sidebar_sidebar__q6cEA\",\"ant-typography\":\"v2-sidebar_ant-typography__ta5hf\",\"title\":\"v2-sidebar_title__OlAx5\",\"subTitle\":\"v2-sidebar_subTitle__LhneY\",\"secondary-text\":\"v2-sidebar_secondary-text__4LWw2\",\"divider\":\"v2-sidebar_divider__9z9OB\",\"link\":\"v2-sidebar_link___z0EU\",\"fullWidth\":\"v2-sidebar_fullWidth__k3Ujx\",\"back\":\"v2-sidebar_back__FYZmn\",\"close\":\"v2-sidebar_close__0lvVI\",\"edit\":\"v2-sidebar_edit__YifNd\",\"green\":\"v2-sidebar_green__KFjaa\",\"orange\":\"v2-sidebar_orange__cSWrx\",\"red\":\"v2-sidebar_red__JmlMA\",\"disable\":\"v2-sidebar_disable__nfA52\",\"upgradeCard\":\"v2-sidebar_upgradeCard__c27O9\",\"upgradeCardTitle\":\"v2-sidebar_upgradeCardTitle__HzPcb\",\"fullAccess\":\"v2-sidebar_fullAccess__tvMBu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__NBfKV\",\"left-side\":\"styles_left-side__LpfI5\",\"pageEditorError\":\"styles_pageEditorError__I7i3p\",\"headerKeywords\":\"styles_headerKeywords__2WBVR\",\"popoverDivider\":\"styles_popoverDivider__1cFJJ\",\"draftToolkit\":\"styles_draftToolkit__UgO6K\",\"loaderSpinnerContainer\":\"styles_loaderSpinnerContainer__unc8w\",\"loaderSpinner\":\"styles_loaderSpinner__qi_LK\",\"spin\":\"styles_spin__YiR1L\",\"selectionTooltip\":\"styles_selectionTooltip__DsvgJ\",\"arrowBottom\":\"styles_arrowBottom__usbcz\",\"textInputNotification\":\"styles_textInputNotification__5FRSY\",\"contentGeneratorDrawer\":\"styles_contentGeneratorDrawer__T7pXe\",\"closeIcons\":\"styles_closeIcons__8uuC5\",\"outlineDrawerBackArrow\":\"styles_outlineDrawerBackArrow__mEByX\",\"contentGeneratorTitle\":\"styles_contentGeneratorTitle__fm_kc\",\"selectedTextInfoContainer\":\"styles_selectedTextInfoContainer__lwCTc\",\"dataAndIcon\":\"styles_dataAndIcon__NAyfz\",\"textAndUrl\":\"styles_textAndUrl__cOjPy\",\"text\":\"styles_text__TfrwZ\",\"url\":\"styles_url__p8_St\",\"textUrlControlls\":\"styles_textUrlControlls__L9_rW\",\"urlPopup\":\"styles_urlPopup__3ZEur\",\"inputContainer\":\"styles_inputContainer__ACZFh\",\"textLabel\":\"styles_textLabel__yKZPz\",\"urlInput\":\"styles_urlInput__DVTni\",\"inputControlls\":\"styles_inputControlls__Ynfjt\",\"linkSuggestionsPopover\":\"styles_linkSuggestionsPopover__2c_Jo\"};"],"names":["notificationType","Notification","type","text","showContactSupportLink","param","settings","customer","isGHLAccount","useStore","openLiveChat","chatBtn","document","querySelector","click","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","div","className","classnames","styles","jsx","NextImg","src","span","onClick","CaAiQuotaInfo","observer","quotaUtilization","mode","size","customLabel","isMinified","colorSetup","useState","dark","textColor","light","gray","sizeSetup","small","fontSize","normal","profile","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","Wrapper","Label","ca","allowedAiContentGeneration","consumed","total","styled","_templateObject","p","_templateObject1","VideoPlayerModal","iconPath","title","subTitle","button1","videoLink","button2","FontAwesomeIcon","icon","faCheck","style","marginRight","buttonMinimize","onClickButton1","onClickButton2","button3","onClickButton3","home","videoPlayerModal","setVideoPlayerModal","minimized","setMinimized","Fragment","ModalStyled","destroyOnClose","width","display","alignSelf","visible","onClose","maskStyle","background","justifyContent","marginBottom","TitleText","SubTitleText","Button","color","variant","faArrowDownLeftAndArrowUpRightToCenter","iframe","height","frameBorder","allow","allowFullScreen","borderRadius","SmallPopupStyled","position","CloseOutlinedStyled","faArrowUpRightAndArrowDownLeftFromCenter","Modal","_templateObject3","_templateObject4","Table","props","block","blockProps","editor","getData","get","target","concat","createPortal","jsx_runtime","EditorBlock","data","tableKey","tableShape","colgroup","isArray","table","borderCollapse","margin","id","dangerouslySetInnerHTML","__html","tbody","map","row","i","tr","cell","j","element","th","border","padding","backgroundColor","textAlign","colSpan","colspan","rowSpan","rowspan","data-position","defaultValue","td","BlockImage","image","useRef","contentState","content","alt","getEntityAt","getEntity","widthImg","includes","heightImg","ref","iframeRegex","test","srcMatch","match","widthMatch","heightMatch","titleMatch","urlPattern","referrerPolicy","getNumberFromEnglishCounting","WriteForMe","htmlToDraft","contentOptimizer","currentPage","contentFragment","getCustomerQuota","isFullBtn","setIsFullBtn","currentEditorState","focusTermsClassNames","isSideBarHidden","antIcon","LoadingOutlined","spin","antIconLarge","useEffect","preventingDefaultMenu","e","stopPropagation","querySelectorAll","forEach","elem","addEventListener","removeEventListener","setTimeout","editorWrapperElem","getElementById","editorElem","clientWidth","offsetWidth","getEditorRealMargin","window","debouncedChange","debounce","state","focusTerms","isNewDecorations","editContent","debouncedUpdate","useCallback","getSelection","editorState","insertText","isBlock","firstNewBlockId","contentBlocks","entityMap","fragment","html","selection","newSelection","SelectionState","anchorKey","getKey","anchorOffset","getText","length","focusKey","focusOffset","getAnchorKey","getEndOffset","ContentState","createFromBlockArray","getBlockMap","nonStyledState","Modifier","replaceWithFragment","getCurrentContent","currentBlock","nextBlock","getBlockAfter","existingNodes","getAttribute","updatedState","EditorState","push","setCurrentEditorState","setAiTooltip","show","newTextElems","classList","add","analytics","remove","getParams","currentContent","fetchAndInsertText","action","selectedText","start","getAnchorOffset","getFocusOffset","end","getBlockForKey","isCollapsed","slice","fetchFragment","aiTooltip","Promise","reject","isTextSelected","isEmptyContent","Container","Tooltip","WriteForMeStyled","cursor","fragmentLoading","Spin","marginTop","indicator","faFeather","WriteForMeMiniStyled","BasedOn","isSelection","UsedQuota","used","_templateObject2","CustomBlock","blockRef","Option","Select","isOpen","setIsOpen","require","typesMap","hotKeysLabelMap","blockType","getType","dropdownRef","handleClickOutside","event","current","contains","onEditorChange","prevSelection","prevEditorState","forceSelection","BlockContainer","blockHeight","offsetHeight","topOffset","writeForMeTopOffset","isScaPublicPage","DropdownContainer","onContextMenu","currentValue","open","onChange","value","hasFocus","isBackward","newEditorState","RichUtils","toggleBlockType","dropdownStyle","dropdownMatchSelectWidth","suffixIcon","faCaretDown","Object","keys","idx","CustomBlock_templateObject","CustomBlock_templateObject1","Input","CommonInput","UploadFromUrlForm","store","form","Form","useForm","t","useTranslation","onUploadHandler","url","setIsCreateFromUrl","uploadFromUrl","updateContentLoadedAt","setCurrentStep","initialValues","onFinish","Item","name","rules","required","message","validator","_","isURL","require_protocol","resolve","inputType","placeholder","buttonType","loading","isUploading","Step1","setIsCreateFromScratch","setIsFirstArticleEdit","router","useRouter","onStartFromScratchClick","setIsFetchingTargetKw","analysis","clearUrl","createWithContent","createFromText","routes","landingPageOptimizer","query","uuid","undefined","shallow","br","Welcome","currentStep","styleMap","ContentEditor","getEditorState","showAiBanner","editorContainer","heroSection","lastScrollPosition","setLastScrollPosition","addHeroImageLoading","setAddHeroImageLoading","localStorage","setItem","aiOutline","aiMetaData","pages","getHeroImageById","clearFocusTermsClusters","getCurrentEditorState","zoomLevel","newPage","clearFeTargetKeywords","clearTargetKeywords","isInitialEditorStateFetched","setIsEditorScrolled","isEditorScrolled","setFocusTermsSorter","resetRepollCounters","clearAllTaData","setIsUnspashDrawerOpen","updateHeroImage","isHeroImageLoading","setContentType","clearAiOutline","isOpenAiOutlineDrawer","setIsOpenAiOutlineDrawer","clearV2AiOutline","setIsOpenAiContentToolsDrawer","clearTemplateOutlines","clearTemplates","setIsOpenAiWriterDrawer","clearOneClickIdea","clearOneClickOutlines","setAiWriter","aiWriterController","setAiTemplate","aiTemplatesController","clearMetaData","navBar","setIsDockedSider","heroImage","aiInProgress","setHeroImage","heroImageAltText","antIconOrange","windowHeight","innerHeight","showForm","label","key","removeSizeDataFromBlock","delete","set","blockMap","handleTabInTable","direction","collapsed","targetKey","targetBlock","getBlockBefore","merge","getLength","splitBlock","getLastBlock","createEmpty","setBlockType","isTargetTable","endOffset","setSelectionIfNone","getHasFocus","moveSelectionToStart","toggleInlineStyle","inlineStyle","customStyleMap","existingMatch","getCurrentInlineStyle","filter","split","toList","kebabCase","endsWith","rexp","RegExp","newString","replace","toggleListType","listType","getCurrentBlockType","handleDeleteKey","startBlock","getStartKey","endBlock","getEndKey","handleKeypressWhenSelectionNotCollapsed","toggleBlockData","newData","selectionState","newContentState","setBlockData","setIndent","listMax","indentMax","setDepth","adjustment","startKey","endKey","blocks","toSeq","skipUntil","k","takeUntil","depth","getDepth","maxDepth","newDepth","Math","max","min","selectionBefore","selectionAfter","isEditorFocus","focus","setIsEditorFocus","oneClick","getSingleUrlParam","writeWithAi","onEditorBlockTypeChange","getCurrentBlock","blockKey","currentSelection","handleChangeBlockType","keysMap","curPressKeys","checkKey","preventDefault","keyCode","multipleExist","keysArray","every","clearPressKeysArr","checkTitle","titleArray","handleAddHeroImage","targetKeywordsCount","cleanedHtml","res","loadPage","notification","error","warning","scrollTo","top","addHtmlToDocument","newHtml","hasText","reset","convertHtmlToEditorState","newBlockMap","newContent","currentEditor","blur","chars","prevBlock","firstCell","getStartOffset","firstTableKey","lastCell","lastTableKey","sameTable","startOffset","v","toOrderedMap","has","genKey","ContentBlock","Map","firstBlock","removeRange","first","butLast","subSelection","notLastTable","notFirstTable","notTable","separatorBlock","notTableStart","find","selectionKey","handlePastedText","pastedHtml","replaceText","moveFocusToEnd","getFirstBlock","blockRendererFn","contentBlock","component","editable","templateUsed","templateIcon","templateName","templateDesc","isStandaloneTool","toJS","isUseMask","onScroll","scrollTop","classNames","isExportingPage","getZoomLevel","editorHeightOffset","breadcrumbHeight","keywordsHeight","opaqueColor","alignItems","boxShadow","faBrainCircuit","fontWeight","marginLeft","faArrowRight","HeroImageWrapper","SkeletonRingLoader","HeroSection","HeroImage","ButtonsContainer","getPopupContainer","trigger","ButtonWrapper","faArrowsRotate","faICursor","faTrash","AiBanner","shouldPopulatePageHtml","Editor","editorKey","draftEditorState","scrollY","blockStyleFn","handleKeyCommand","command","offset","blockBefore","currentBlockType","acceptSelection","onBackspace","getFocusKey","float","keyBindingFn","KeyBindingUtil","hasCommandModifier","getDefaultKeyBinding","content_editor_templateObject","content_editor_templateObject1","content_editor_templateObject2","img","content_editor_templateObject3","content_editor_templateObject4","_templateObject5","User","avatar","email","isOwner","permission","onPermissionChange","activePermission","setActivePermission","Avatar","CaretDownFilled","share_modal_Option","ShareModal","pagePermissions","shareDialog","setEmail","setPermission","globalPermission","setGlobalPermission","isEditableByAnyone","handleGlobalPermissionsUpdate","location","existingPermission","existingViewPermission","isViewableByAnyone","navigator","clipboard","writeText","href","success","editPagePermissions","closeDialog","MixPanel","track","SCA_PAGE_SHARED","handleInviteUser","closeAfterSubmit","emails","warn","closable","closeIcon","faXmark","bodyStyle","Title","Head","InputContainer","V2Button","disabled","emailReg","EmailError","Body","ul","li","createdByUser","users","sort","user","toLowerCase","Divider","Footer","GrayButton","paddingBottom","paddingTop","share_modal_templateObject1","share_modal_templateObject2","share_modal_templateObject3","share_modal_templateObject4","share_modal_templateObject5","_templateObject6","_templateObject7","AiTooltip","activeOption","setActiveOption","urlCopy","setUrlCopy","setIsCopy","onLinkRemove","updatedSelection","toggleLink","sendTextToEditor","insertLinkToText","decorator","createCompositeDecorators","formatUrl","urlValue","entityKey","newContentWithEntity","createEntity","getLastCreatedEntityKey","newNewContent","textValue","withLinkText","withProperCursor","getSelectionAfter","isLinkEdit","bottom","left","onMouseDown","flexDirection","ButtonV2","paddingLeft","faEarthAmerica","faPen","isLink","faLinkSimpleSlash","word","faCopy","internalLinkSuggestions","link","keyword","trim","Popover","placement","overlayClassName","overlayStyle","SuggestionsContainerTitle","faCircleInfo","SuggestionsTitle","results","suggestion","SingleLinkContainer","Left","Link","Right","isUsed","SuggestionsMenuItem","faLink","faAngleRight","AiTooltip_templateObject","AiTooltip_templateObject1","AiTooltip_templateObject2","AiTooltip_templateObject3","AiTooltip_templateObject4","AiTooltip_templateObject5","AiTooltip_templateObject6","a","AiTooltip_templateObject7","Unsplash","contentType","UNSPLASH_ACCESS_KEY","UnsplashReact","namedExports","searchInput","onAddImage","imageUrl","onImageUpload","insertImage","accessKey","Uploader","withDefaultProps","InsertIntoApplicationUploader","onFinishedUploading","FreeStockTab","gap","Radio","RadioStyled","ImageComponent","setImagesList","historyCopyStatus","setShowSelectedHistoryImage","setShowHistoryImage","rootElement","setImagesAddedCount","imagesAddedCount","elemIdx","setElemIdx","imagesLoadedCount","setImagesLoadedCount","setShowAddHeroCheck","setShowAddToArticleCheck","setShowCopiedCheck","showAddHeroCheck","showAddToArticleCheck","showCopiedCheck","templatesHistory","currentElement","IntersectionObserver","entries","entry","intersectionRatio","unobserve","imagesLoading","item","imageList","images","root","threshold","observe","handleHistoryImageCopyClick","execCommand","result","inputs","fieldValue","selectedHistoryImageAdd","index","imgOnLoad","onMouseLeave","Col","onMouseOver","ColCardContainer","hide","ColCardImage","String","onLoad","button","copyIconWhite","viewImageCheck2","imageComponent_templateObject","imageComponent_templateObject1","ImageListComponent","buttonTitle","dummyImages","imagesDummy","setImagesDummy","imagesList","Row","gutter","overflow","maxHeight","val","CardStyle","load","Card","AICreateImagesTab","activeTab","isUnsplashDrawerOpen","setHistoryCopyStatus","aspectRatio","setAspectRatio","imagesAspectRatio","setImagesAspectRatio","isRealistic","setIsRealistic","loadAiTemplateOutlinesHistory","loadAiGeneratedImage","setDummyImages","setImageGenerateInputValue","imageGenerateInputValue","historyLoading","setCopyStatus","projects","setShowScaTopUpModal","isWhitelabel","isAllowedAiContentGenerationQuotaLimitReached","plans","showSidebarPaymentDrawer","setButtonTitle","showError","setShowError","showSelectedHistoryImage","showHistoryImage","selectSuffixIcon","filteredObj","projectId","defaultAiSettings","onGenerateBtnClick","subtitle","QuotaWrapper","QuotaInfoDetail","consumedData","totalData","heading","description","ctaLabel","showCta","customCta","isCenter","InputWrapper","CommonInputStyled","onFocus","whiteSpace","SettingContainer","SelectContainer","OptionLabel","SelectStyled","grayBackground","aspectRatioOptions","Checkbox","autoFocus","defaultChecked","checked","ModalImage","centered","footer","onOk","onCancel","ai_create_images_tab_templateObject","ai_create_images_tab_templateObject1","ai_create_images_tab_templateObject4","ai_create_images_tab_templateObject5","ai_create_images_tab_templateObject6","AddImageDrawer","checkTab","setActiveTab","handleClose","URL","queryParams","URLSearchParams","search","newURL","origin","pathname","toString","hash","history","pushState","path","Drawer","mask","maskClosable","TabsStyled","Tabs","tabBarGutter","activeKey","copyAndModifyQueryParams","TabPane","tab","AddImageDrawer_templateObject","EditorSection","isCopy","setEditorHeightOffset","setShowAiBanner","showEditAltModal","setShowEditAltModal","altText","setAltText","setElement","modalEditorStates","setModalEditorStates","hideButton","setHideButton","noFirstVisit","getItem","handleModalOpen","currentAlt","handleUpdateAlt","tagkey","attributes","blockList","next","newEntity","entity","mergeEntityData","promptForLink","pageX","pageY","closeContextMenu","headerKeywordsRef","updateKeywordsRef","isNil","isManualUpdate","debouncedHighlightingChange","decorated","changeType","acceptedTypes","decoratedState","debouncedHighlighting","errorMessage","isImportError","isCreatedFromScratch","prevOffset","blockWithLinkAtBeginning","linkKey","characterList","getCharacterList","initialSelectedText","generateSelectedText","lastWasEnd","selectedBlocks","blockArray","selectedTextFromBlocks","join","xSelection","x","prevChar","nextChar","prevEntity","nextEntity","finalPrevOffset","finalNextOffset","char","blockLength","finalAnchorOffset","rangeCount","getRangeAt","getBoundingClientRect","noEntityCase","noSelectionLeft","noSelectionTop","noSelectionBottom","tempX","clientY","clientX","linkInstance","startsWith","getLastChangeType","lastChangedBlockKey","lastChangedBlock","lastChangedBlockType","addCrossIcon","isExtensionInstalled","handleShowNotification","checkDate","getCount","date1","hoursDifference","Number","diffInMs","abs","date2","now","Date","maxWidth","checkCount","CloseOutlined","rel","transform","zIndex","InputTitle","InputStyled","ButtonsWrapper","CancelButton","ButtonStyled","EditorSection_templateObject","EditorSection_templateObject1","EditorSection_templateObject3","EditorSection_templateObject5","Header_Option","Header","blockTypeEnhancement","CaretDownOutlined","pointerEvents","UnorderedList","UnorderedListOutlined","Bold","inlineStyleEnhancement","BoldOutlined","Italic","ItalicOutlined","Underline","UnderlineOutlined","OrderedList","OrderedListOutlined","Code","CodeOutlined","Anchor","updateText","showNewUrlEditor","setShowNewUrlEditor","editorValues","setEditorValues","selectionRange","setSelectionRange","customSelection","dateRef","onkeydown","ctrlKey","shiftKey","metaKey","iconClicked","LinkOutlined","AnchorRemove","entityTypeEnhancement","removeLink","faUnlink","AddImage","openDrawer","faImage","Dragger","Upload","BrowseImage","loader","setLoader","isError","setIsError","altValue","parentElement","setImgFile","setImage","contentStateWithEntity","AtomicBlockUtils","insertAtomicBlock","formData","FormData","append","imgFile","CONTENT_ASSISTANT_API","uploadImage","ele","which","handleImageChange","selectedFile","reader","FileReader","onloadend","readAsDataURL","RequiredFileType","faTrashXmark","StyleDragger","multiple","showUploadList","customRequest","file","onDrop","getFile","dataTransfer","files","faCloudArrowUp","InputWraper","AtributeWrapper","Pwrapper","CancelBtn","AddBtn","browseFile_templateObject","browseFile_templateObject1","browseFile_templateObject2","UploadURL","imgRegex","imageFormat","urlUpload_templateObject","urlUpload_templateObject1","urlUpload_templateObject2","UploadImage","FileBtn","faFileImage","Popup","StyledInputContainer","StyledTabs","defaultActiveKey","UploadImage_templateObject2","UploadImage_templateObject3","InsertIframe","showIframeEditor","setShowIframeEditor","setUrl","contentData","iframeUrl","faRectangleCode","LargeBadge","alpha","StyledPopup","StyledUrlContainer","InsertButton","insertIframe_templateObject1","Textarea","Toolkit","isTaActive","setIsSideBarHidden","setZoomLevel","isPublic","updatingFolder","isLinkgraph","newState","undo","UndoOutlined","redo","RedoOutlined","faWandMagicSparkles","arrowPointAtCenter","faChevronRight","transition","useClickedOnPageHandler","callback","SingleKeywordDataCard","getSpecificCountryByCode","kw","keywordsFormProps","countries","Text","Typography","updateKeyword","useWatch","keywordResearcherV2","postNewKeywords","keywordDetails","loadKeywordDetailList","loadKeywordDetails","setDetailsRepolling","isKwNameEdit","setIsKwNameEdit","showLocationSelector","setShowLocationSelector","isEditDefaultLocation","setIsEditDefaultLocation","popRef","showKwErrorMsg","setShowKwErrorMsg","showMessage","r","removeTargetKeywords","err","payload","keywordsArray","feTargetKeywords","feKw","updateFeTargetKeywords","locationId","countryCode","editKeywords","response","status","allowedFocusTerms","isEmpty","setFieldsValue","postAndGetData","keywords","kwClickHandler","targetKeywords","setIsDrawerFromCa","setActiveTargetKw","setIsOpenKeywordDrawer","values","formKeyword","formatArray","preparedKeyword","kwArray","locationSelected","reach","updatelocationData","keywordForFrontendArray","JSON","stringify","SCA_PAGE_UPDATE_KEYWORD_LOCATION","locationDebouncerChange","country","updateCountriesList","openLocationSelector","searchForLocation","shouldUpdate","resetFields","faTimes","toUpperCase","overlayInnerStyle","faLocationDot","mouseLeaveDelay","mouseEnterDelay","openClassName","faArrowLeft","faSearch","faInfoCircle","faGlobe","formatNumber","faMapMarkerAlt","serpTaskStatus","Flag","code","searchVolumeFormatter","sv","Globe","globalSv","svTopCountries","indx","_countryCode","searchVolume","Progress","showInfo","strokeWidth","percent","round","trailColor","strokeColor","getProgressColor","SkeletonHorizontalLoaderGray","lightLoader","skeletonHeight","skeletonMarginTop","kd","getInverseProgressColor","costPerClickFormatter","cpc","TargetKeywords","expanded","isAddingNewKw","setIsAddingNewKw","newKwValue","setNewKwValue","kwLengthErr","setKwLengthErr","targetrKeywordsContainer","addHorizontalScroll","topScroll","leftScroll","scrollX","onscroll","deltaY","scrollLeft","newKwLocation","setNewKwLocation","popoverRef","onAddKeywordFinish","format","faPlus","numberWithCommas","textOverflow","faExclamationTriangle","SCA_PAGE_ADD_KEYWORD","SuggestedKeywordCard","isRemoving","setIsRemoving","addSuggestedKwToTargetKw","passedKw","stagedForAddingKw","SCA_PAGE_ADD_KEYWORD_SUGGESTION","removeTargetKeyword","removeSuggestedKeyword","strong","KeywordSuggestions","keywordSuggestionsContainer","showAllSuggestionsHandler","kwSuggestions","isFetchingSuggestedKw","editorText","TargetKeywordsAndSuggestions","isExpanded","setIsExpanded","containerRef","parentRef","ChevronDown","faChevronDown","faChevronsDown","faChevronUp","MetaIdeasList","metaIdeas","onIdeaUse","metaCopied","setMetaCopied","copyMetaHandler","desc","IdeasContainer","idea","SingleIdeaContainer","MetaTitle","metaTitle","MetaDesc","metaDesc","MetaIdeasList_templateObject","MetaIdeasList_templateObject1","MetaIdeasList_templateObject2","MetaIdeasList_templateObject3","MetaTagGenerator","updateMetaData","setIsExternalTitleEdit","isMetaUpdating","editTitle","setLoading","loadAiMetaData","metaData","showMetaDataModal","setShowMetaDataModal","customMetaTitle","setCustomMetaTitle","customMetaDesc","setCustomMetaDesc","showAiMetaResults","setShowAiMetaResults","antdIcon","updateMetadata","meta_title","meta_desc","checkPageTitle","regexp","aiButtonTooltipMsg","msg","generateSingleMetaIcon","metaValue","faHexagonExclamation","metaValueMinLength","metaValueMaxLength","largerThenMax","smallerThanMin","idealSize","missing","largerBy","smallerBy","statusMsg","faTriangleExclamation","faCircleCheck","updateMetaDataHandler","aiMetaDataHandler","targetKwArr","aiSuggestionMsg","metaDataTooltipContent","destroyTooltipOnHide","onVisibleChange","MetaDataBtnStyled","OneClickPublisherV2","extractOptions","wpArray","syncedAt","postStatus","synced","publishedAtUrl","topicalMapName","errorId","setErrorId","smallPageLoad","setUnsavedChanges","unsavedChangesInContent","wpPublish","fetchWpPublishData","postingData","showDataModal","setShowDataModal","publishWpPage","setShowAddSiteModal","isApiError","isShopifyApiError","updateApiError","setShowIndividualPopover","showIndividualPopover","setLoadingData","loadShopifyBlogs","blogs","creatingPage","creatingBlog","createNewShopifyPage","createNewShopifyBlog","getVendorAccounts","vendorAccounts","ottoV2Store","loadIssueTableData","ottoUrls","selectedWpSite","setSelectedWpSite","triggerSites","setTriggerSites","selectedShopifySite","setSelectedShopifySite","showWpVideo","setShowWpVideo","filteredObject","setFilteredObject","selectedUser","setSelectedUser","selectedWpSiteUsers","setSelectedWpSiteUsers","setTrigger","showSynchronizeTypeDropdown","setShowSynchronizeTypeDropdown","synchronizeType","setSynchronizeType","parent","setParent","project","setProject","reloadProjectUuid","refOne","refTwo","newBtnLabelOptions","setNewBtnLabelOptions","currentProject","offerPublishUrl","importedFromUrl","wpPublishedAtUrl","cleanWpArr","getDomain","showWpFormType","setShowWpFormType","syncWp","createNewWp","syncShopify","shopifySynced","createNewShopify","wpPostCategories","wpPostStatus","wpPostType","wpPublishedAtWebsiteId","defaultWpPostCategories","defaultWpPostStatus","defaultWpPostType","defaultWpWebsiteId","shopifyContentType","wpPostParent","shopDomain","wpWebsite","wpPostCategory","account_id","accountId","postParent","wpNewPostCategory","author","wpPostAuthorId","selectedWPsiteData","articles","updatedArticles","setShopifyInitialValues","newBtnLabel","setNewBtnLabel","syncBtnLabel","setSyncBtnLabel","Group","antdIconLarge","wpPostMetaDesc","getTopLinkUrl","getTopLinkId","publishWpPageHandler","notificationV2","topicalMapObject","obj","issueType","params","issue_type","page_size","pageSize","page","is_loading","pageId","pageUrl","postType","postAuthor","postCategories","selectedVendor","shopifySite","shop_domain","shopifyPayload","blog_title","ca_page_id","post_type","tags","new_post","permalink","getSyncedPill","SyncedPill","faCircleXmark","setFields","errors","categories","options","category","children","wpPublisherSyncSection","WpUpdatePostSection","isActive","CustomRadioButton","VideoTutorialBtn","InputsContainer","wpSyncedAt","shopifySyncedAt","wpSynced","shopifyContentUrl","WpLastSyncLeft","moment","WpSyncedPostDetails","sanitizeUrl","faUpRightFromSquare","InputLabelWrapper","FormLabel","initialValue","PurpleRadioButton","blueColor","getFieldValue","StyledFormItem","blog","on","userEmail","itemsArray","areCategoriesSame","Array","PublishButton","htmlType","wpPublisherNewPostSection","WpNewPostSection","borderRadiusTop","wpSite","OptionalTag","pattern","wordCount","wpPublishTooltipContent","WpPublishTooltipContentWrapper","ErrorNotificationContainer","ErrorNotification","textDecoration","onClickShopify","alignConfig","points","handleClick","shopifyBlogId","shopifyBlogTitle","shopifyPostType","shopifyAuthor","shopifyAccountId","shopifyTags","Dropdown","overlay","DropdownContentContainer","align","SynchronizeType","isCleanedHtmlUpdated","_content_wpPostAuthorId","faWordpressSimple","faCaretRight","isShopifyCustomer","faShopify","SynchronizeBtn","faRotate","OneClickPublisherV2_templateObject","OneClickPublisherV2_templateObject1","OneClickPublisherV2_templateObject2","OneClickPublisherV2_templateObject3","OneClickPublisherV2_templateObject4","OneClickPublisherV2_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject19","TitleEditor","languages","contentLoadedAt","isAnalyzing","isExternalTitleEdit","viewers","setShowQuickSyncModal","showQuickSyncModal","userAiSettings","updateUserAiSettings","getUserAiSettings","titleLeft","setTitleLeft","setTitle","modalUrl","setModalUrl","editPageUrl","setEditPageUrl","isCloseClicked","setIsCloseClicked","showDownloadConfirmationModal","setShowDownloadConfirmationModal","submitDisabled","setSubmitDisabled","renderWithbrowser","setRenderWithBrowser","keepContentModal","setKeepContentModal","titleContainerWidth","setTitleContainerWidth","calculateWidth","collapsedViewers","setCollapsedViewers","titleRef","getTitleLeft","urlInput","debouncedChangeFocusOut","URL_PATTERN","popupRef","language","setLanguage","defaultLanguage","onLanguageChangeHandler","option","selectSufixIcon","onEditUrlSubmit","updateUrlHandler","shouldOverwriteContent","renderWIthBrowser","SCA_PAGE_URL_UPDATE","titleWidth","ctx","createElement","getContext","measureText","formatedTitleWidth","WpInstructionsModal","WpAddSiteModal","CommonModal","EditUrlModalTitle","EditUrlModalSub","EditUrlLink","EditUrlModalButtons","CheckboxStyled","input","onBlur","readOnly","ScaArticleStatusSelectorV2","articleUuid","articleStatus","ProjectsSelector","projectName","pageUuid","minifiedVersion","EditUrlContainer","valuePropName","Loader","faArrowDownToBracket","faArrowUpFromBracket","opacity","StyledSelect","showSearch","filterOption","indexOf","onMouseEnter","lang","formatCountryCode","title_editor_templateObject","title_editor_templateObject2","title_editor_templateObject3","title_editor_templateObject4","title_editor_templateObject5","dropdownColors","grey","listItemsBackgroundColor","borderColor","BreadCrumb","headerTopRef","isKebabOpen","setIsKebabOpen","isModalOpen","setIsModalOpen","exportToDocsLoading","setExportToDocsLoading","briefAntIcon","copySuccess","setCopySuccess","clearAnalytics","isExporting","isSaving","exportToGoogledoc","deleteDialog","incrementInTotalArticle","setPageRemovedFromEditor","isAllowedPagesQuotaLimitReached","clientHeight","createPage","PAGES_API","SCA_CREATE_PAGE","exportToGoogleDocs","exportPageToGoogleDocs","PageHeader","onBack","login","backIcon","extra","ShareButton","openDialog","faShareNodes","ExportButton","faFileArrowDown","faEllipsisV","ButtonComponent","googledocLink","SCA_PAGE_EXPORT_TO_DOCS","GoogleOutlined","resp","exportArticleAsHtml","setAttribute","encodeURIComponent","body","appendChild","removeChild","allowedPages","DeleteModal","removeFromEditorCallback","h1","Btn","TopSection","minWidth","DraftToolkit","TextSuggestions","setIsTaActive","setFocusTermsForInsertion","stagingTaSuggestions","taActiveTerm","setTaActiveTerm","setStagingTaSuggestions","highlightedNodeId","setHighlightedNodeId","showOriginalBlockId","setShowOriginalBlockId","updatingTa","totalOccurances","setTotalOccurances","getElementsByClassName","class","onArrowClickHandler","updatedValues","term","order","nodesWithTerm","_higlightedNode_dataset","higlightedNode","dataset","blockIndex","elemOffset","offsetTop","Heading","blocksRenderer","blocksArray","domNode","attribs","typeDettector","onBlockStatusChange","prepDataArr","itemIndex","onDotClickHandler","updateImageStyle","replaceAll","TextContainer","regExp","isSuggestion","SingleBlockWithSuggestion","showingOriginalBlock","currNodeId","data-block-index","termIncluded","right","textTransform","parse","faRotateLeft","BlockWrapper","Controller","DotsContainer","Dot","Arrow","faArrowUp","faArrowDown","checkCurBlockStatus","highlightedNode","elementStatus","_highlightedNode_dataset","TextSuggestions_templateObject","TextSuggestions_templateObject1","TextSuggestions_templateObject2","TextSuggestions_templateObject3","TextSuggestions_templateObject4","TextSuggestions_templateObject5","TextSuggestions_templateObject6","TextSuggestions_templateObject7","TextSuggestions_templateObject8","TextSuggestions_templateObject9","TextSuggestions_templateObject10","TextSuggestions_templateObject11","TextSuggestions_templateObject12","MissingPlacementsBanner","setShow","termsWithNoSuggestions","setTermsWithNoSuggestions","getlinksForInsertion","linksAssistantSuggestions","prepArr","linksIncluded","noPlacementsTermsCount","autoAdjustOverflow","MissingPlacementsBanner_templateObject","SingleTerm","finalTermsList","setFinalTermsList","setVisible","kwUpdate","termIndex","setTermIndex","getstagingLinkSuggestions","setStagingLinkSuggestions","setLinkActiveTerm","linkActiveTerm","onTermClickHandler","curTerm","newClass","incDec","cardClick","scrollTerms","acceptedStatus","dismissedStatus","CardTitle","isTerm","faCircleX","faCircleDashed","StatusTitle","isVal","DividerLine","SuggestionCard","newItems","updateTerm","SingleTerm_templateObject","SingleTerm_templateObject1","SingleTerm_templateObject2","SingleTerm_templateObject3","SingleTerm_templateObject4","SingleTerm_templateObject6","LinksList","taLinkSuggestionLoading","setFilter","loadLinksData","expectedData","outerArray","linksData","innerArray","uniqueData","seenSet","Set","array","stringRepresentation","suggestionList","allLinks","arrayToObject","givenValue","expectedValue","internalLinkSuggestionsV2","getTerms","elements","DOMParser","parseFromString","innerText","formattedArray","arr","arrTwo","indexx","filteredValue","addData","firstTerm","LinkAssistantRightSidebar","inputValue","activeKeywordsList","setIsLinkActive","setLinksForInsertion","stagingLinkSuggestions","setIsTaUpdating","fetchLinkSuggestions","setActiveKeywordsList","updated","setUpdated","setInputValue","anyButtonClicked","setAnyButtonClicked","activeKwArr","active","onCheckboxClicked","elemId","filteredKw","findIndex","onCancelClickHandler","onSubmitHandler","finalHtmlOutput","updatedEditorState","keywordsDropdown","KeywordsDropdownContainer","OverlayTitle","addLink","allLink","urlWithProtocols","links","stringToArray","keywordNewLineReg","popoverContent","CustomTextarea","paddingToNumber","paddingToText","isKeyWordv2","autoSize","minHeight","autoSizeCheck","nativeEvent","LinkSubmitBtns","selectedLink","TaWrapper","TermsMainWrapper","TitleContainer","Description","ActionButtonsContainer","some","linkAssistantRightsideBar_templateObject","linkAssistantRightsideBar_templateObject1","linkAssistantRightsideBar_templateObject3","linkAssistantRightsideBar_templateObject4","linkAssistantRightsideBar_templateObject5","linkAssistantRightsideBar_templateObject7","viewSuggestionsOption","css","blinkAnimation","keyframes","linkAssistantRightsideBar_templateObject9","linkAssistantRightsideBar_templateObject10","linkAssistantRightsideBar_templateObject11","linkAssistantRightsideBar_templateObject12","TextSuggestionsLinks","isLinkActive","doc","TextSuggestionsLinks_templateObject","TextSuggestionsLinks_templateObject1","TextSuggestionsLinks_templateObject2","TextSuggestionsLinks_templateObject3","TextSuggestionsLinks_templateObject4","TextSuggestionsLinks_templateObject5","LeftSide","sideBarWidth","LeftSideContainer","isLinkSuggestionActive","isNewPage","LeftSide_templateObject","Error","WarningOutlined","h3","SingleCluster","SORT_DIRECTION","removingTerms","cluster","isClusterRemoving","tableData","setTableData","sortField","setSortField","sortDirection","setSortDirecion","removeClusterHandler","isBulkRemovingCluster","bulkRemoveTerms","setTerms","dataFiltered","filterDataInMemory","handleTableChange","pagination","filters","sorter","column","sortFieldName","dataSource","loadingRows","columns","dataIndex","render","record","foundIn","FoundInLabel","isBranded","formatLargeNumber","defaultSortOrder","usedCount","idealCountMax","RemoveClusterBtn","rowKey","SingleCluster_templateObject","SingleCluster_templateObject1","BulkRemoveTermsModal","clusteredTerms","setClusteredTerms","clusterToRemove","setClusterToRemove","clusterTerms","clusters","tempArr","focusTermsSorter","tempCluster","b","clusterTitle","termsArr","ModalTitle","CollapseStyled","expandIconPosition","Collapse","Panel","header","ClusterHeader","ClusterName","ClusterDesc","clusterSv","BulkRemoveTermsModal_templateObject","BulkRemoveTermsModal_templateObject1","BulkRemoveTermsModal_templateObject2","BulkRemoveTermsModal_templateObject3","BulkRemoveTermsModal_templateObject5","TermsDropdownController","onViewChange","currentView","onChangeIncludeBranded","includeBranded","onTermsFilter","onSortTerms","showExportModal","setShowExportModal","showBulkRemoveTermsModal","setShowBulkRemoveTermsModal","getTermsCount","termsFiltersSetup","setTermsFiltersSetup","handleOnSortChange","downloadFileToTxt","pageTitle","articleUrl","imagesCount","count","videosCount","videos","iframesCount","iframes","internalLinksCount","internal","externallLinksCount","external","socialCount","social","javascriptCount","js","headersSum","headers","headersCount","pageTechnicalsString","includedFocusterms","notIncludedFocusTerms","ft","requiredCountMin","questionsSting","questions","q","convertedText","Blob","createObjectURL","download","getXlsExportLink","token","getTokenFromCookies","baseUrl","getApiUrl","BaseApi","CA_ENDPOINT","termsFilterHandler","updatedTermsSetup","updatedFilteredTermsArr","tooltipStyle","isNotPublic","viewChangeDropdown","TermsViewDropdownContainer","CheckboxStyledHighlights","highlights","setHighlights","PTag","BulkRemoveTermsBtn","TermsContainer","ExportModalTitle","ExportModalDesc","ExportModalButtonsContainer","faFileSpreadsheet","faFileLines","faGoogle","TermsFilterContainer","customBackground","GroupTermsContainer","Menu","sorters","Sort","faArrowUpArrowDown","SortTxt","isRemovingFocusTerms","AddButton","setShowAddFocusTermModal","ExportBtn","AdjustBtnContainer","GearIcon","faSliders","TermsDropdownController_templateObject","TermsDropdownController_templateObject1","TermsDropdownController_templateObject2","TermsDropdownController_templateObject4","TermsDropdownController_templateObject5","TermsDropdownController_templateObject7","TermsDropdownController_templateObject9","TermsDropdownController_templateObject10","TermsDropdownController_templateObject11","TermsDropdownController_templateObject12","TermsDropdownController_templateObject13","TermsDropdownController_templateObject14","TermsDropdownController_templateObject15","TermsDropdownController_templateObject16","TermsDropdownController_templateObject17","TermsDataController","onFilter","isClustersExpanded","setIsClustersExpanded","termsSearchQuery","setTermsSearchQuery","termsSearchInputValue","setTermsSearchInputValue","secondAntIcon","handleOnClusterClick","filteredSearch","clusterName","termSearchHandler","formatInput","trimmedArr","SearchAndSort","prefix","faMagnifyingGlass","ClustersWrapper","ClustersContainer","expandedClusters","ClusterTooltipSingleRow","ClusterTooltipLabel","ClusterTooltipValue","SingleClusterContainer","activeCluster","TermsDataController_templateObject","TermsDataController_templateObject1","TermsDataController_templateObject2","TermsDataController_templateObject3","TermsDataController_templateObject4","TermsDataController_templateObject5","TermsDataController_templateObject6","TermsDataController_templateObject7","AntdInput","focusTerm","removeTermHandler","removeTerms","termContainerSetup","hoverBackground","fitTermInQuota","quote","startIndex","h5","targetKewyordsOnlyArr","getTwoGreenPercentageColor","percentage","requiredCountMax","competitors","competitor","getSiteName","hostname","snippets","snippet","normalizedScore","source","LowerSection","isAnyFocusTermLink","wikipediaLink","wikidataLink","knowledgeGraphLink","crunchbaseLink","ReferencesWrapper","ReferencesTitle","LinksWrapper","SingleLink","faWikipediaW","TermContainer","TermName","BrandedLabel","CopyIcon","FocusTermsTab_SingleTerm_templateObject","FocusTermsTab_SingleTerm_templateObject1","FocusTermsTab_SingleTerm_templateObject2","FocusTermsTab_SingleTerm_templateObject3","FocusTermsTab_SingleTerm_templateObject4","FocusTermsTab_SingleTerm_templateObject5","FocusTermsTab_SingleTerm_templateObject6","SingleTerm_templateObject7","SingleTerm_templateObject8","SingleTerm_templateObject9","SingleTerm_templateObject10","SingleTerm_templateObject11","TermsDropdowns","includedBranded","setIncludeBranded","setQuery","termsToShow","setTermsToShow","isCopied","setIsCopied","standardTerms","setStandardTerms","queryParam","prepTermsArr","filteredTerms","termsToShowParam","TopicalTermsContainer","focusMode","focusTermsExpanded","CopyButton","TermsDropdowns_templateObject","TermsDropdowns_templateObject1","TermsDropdowns_templateObject2","FocusTermsTab","includedTerms","includeMoreTerms","includeLessTerms","EmptyDataBox","FocusTermsTab_templateObject","LinkSuggestionsDropdownController","isSynced","setIsSynced","isSyncing","setIsSyncing","onLinksSync","getInternalLinkSuggestionsv2","FocusModeBtn","setFocusTermsExpanded","faDownLeftAndUpRightToCenter","faUpRightAndDownLeftFromCenter","FocusModeLabel","ExportIcon","faFileDownload","RefetrchBtnContainer","faSyncAlt","LinkSuggestionsDropdownController_templateObject","LinkSuggestionsDropdownController_templateObject2","LinkSuggestionsDropdownController_templateObject3","LinkSuggestionsDropdownController_templateObject4","SingleSuggestion","customCallback","isRemovingTerm","setIsRemovingTerm","isBookmarked","setIsBookmarked","removeInternalLinkSuggestion","bookmarkInternalLinkSuggestion","TitleAndStar","faStarSolid","faStar","SingleISugesstion_templateObject","SingleISugesstion_templateObject1","SingleISugesstion_templateObject2","SingleISugesstion_templateObject3","SingleISugesstion_templateObject4","SingleISugesstion_templateObject5","InternalLinksSuggestions","isQueried","DropdownsContainer","InternalLinkSuggestions_templateObject","SingleCitation","citation","addDefaultSrc","onError","substring","serps","serp","CommonCitations","commonCitations","SidebarTooltip","SuggestionsDataController","visibleKeywords","updateKeywords","linksDropDownFromSuggestion","showEditor","setShowEditor","hostnameEditor","EditorContainer","FormStyled","updateHostname","InputStyeld","ButtonContainer","isUpdatingHostname","UpdateButton","topMessage","HostnameContainer","HostnameLink","addProtocolToDomain","HostnameLinkBtnContainer","AddNewUrlBtn","ViewDropdownContainer","viewControlls","ViewControllsContainer","SearchAndSortWraper","SearchContainer","SuggestionsDataController_templateObject","SuggestionsDataController_templateObject1","SuggestionsDataController_templateObject3","SuggestionsDataController_templateObject4","SuggestionsDataController_templateObject5","SuggestionsDataController_templateObject6","SuggestionsDataController_templateObject7","SuggestionsDataController_templateObject9","CommonBtn","SuggestionsDataController_templateObject12","SuggestionsDataController_templateObject17","SuggestionsDataController_templateObject19","_templateObject20","_templateObject21","LinkSuggestionsTab","perc","setCurrentView","searchQuery","setSearchQuery","dataArr","setDataArr","initialDataArr","setInitialDataArr","setIsQueried","selectedOption","setSelectedOption","domain","setDomain","isVisiblePopover","setIsVisiblePopover","updateLoading","setUpdateLoading","urlsError","setUrlsError","isFetchingIntLinksSug","onDataFilter","filterDataHandler","formattedArr","customDataArr","foundLinks","n","filteredSelectedLinks","foundLink","calculateUsagePercentage","postLInkSuggestion","initValues","handleRadioChange","submitUrl","apiError","kwArr","SuggestionsBannerContainer","TooltipTitle","TooltipDescription","exportLinkIcon","Pill","StyledPopover","PopoverContentWrapper","PopoverTitle","providedUrl","AddDomainSection","DomainDetails","AddDomainTitle","AddDomainDesc","AddDomainInput","ProvideUrlsSection","ProvideUrlsDetails","ErrorMessageForURL","Dismiss","Update","onOpenChange","LinkSuggestionsTab_templateObject","LinkSuggestionsTab_templateObject1","LinkSuggestionsTab_templateObject2","LinkSuggestionsTab_templateObject3","LinkSuggestionsTab_templateObject4","LinkSuggestionsTab_templateObject6","LinkSuggestionsTab_templateObject7","LinkSuggestionsTab_templateObject8","LinkSuggestionsTab_templateObject9","LinkSuggestionsTab_templateObject10","LinkSuggestionsTab_templateObject11","LinkSuggestionsTab_templateObject12","LinkSuggestionsTab_templateObject14","LinkSuggestionsTab_templateObject15","LinkSuggestionsTab_templateObject16","LinkSuggestionsTab_templateObject18","SingleQuestion","question","aiCopied","setAiCopied","setCreatingPage","isAiGenerating","setIsAiGenerating","justify","faMessageCheck","faFilePlus","QuestionsTab","level","htmlString","string","copiedText","textContent","htmlContent","plainTextContent","copyToClipboardWithHtmlAndText","AddFocusTermModal","showAddFocusTermModal","terms","addFocusTerms","isFocusTermsLoading","handleAddFocusTerms","StyledModal","Desc","TextArea","AddFocusTermModal_templateObject1","AddFocusTermModal_templateObject2","AddFocusTermModal_templateObject3","AddFocusTermModal_templateObject4","FocusTermsTabs","setActiveKey","onChangeTab","SCA_PAGE_FOCUS_TERMS_TAB_OPEN","SCA_PAGE_QUESTIONS_TAB_OPEN","SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN","CommonTabsStyled","tabBarStyle","editorScrolled","TabTitleContainer","totalUsedTerms","totalUsedQuestions","totalUsedSuggestions","CommonTabs","CommonTabPane","FocusTermsTabs_templateObject2","SingleMetrics","tooltipLabel","showTooltip","headingData","StyledLable","StyledIcon","RangeValues","h2","h2Min","h2Max","h3Min","h3Max","internalLinks","internalLinksMin","internalLinksMax","externalLinks","externalLinksMin","externalLinksMax","isWithinRecomendedRange","SingleMetrics_templateObject","SingleMetrics_templateObject1","SingleMetrics_templateObject2","SingleMetrics_templateObject3","ContentScore","scoreCounts","scoreExtended","internalLinksData","externalLinksData","avg","h1value","h1Min","h1Max","h2value","h3value","setViewSuggestionsOption","setLinksDropDownFromSuggestion","isWordCountLoading","isScoreLoading","score","suggestedWordCountLimits","viewSuggestionHandler","shouldShowTooltip","tooltipMsg","cur","openText","scrollToText","anchorTag","scrollIntoView","behavior","countsSetup","lower","upper","paragraphs","paragraphsMin","paragraphsMax","headings","headingsMin","headingsMax","StyleHeadingsTooltipTitle","internalLinksLength","externalLinksLength","StyledLinksTabs","StyledRecommender","StyledRecomentedValue","StyledSuggestionLink","showAsLink","StyledCurrentValue","StyledFontAwesomeIcon","StyledLinksDiv","StyledLinkItem","faArrowUpRightFromSquare","ReactEcharts","grid","series","axisLine","roundCap","lineStyle","progress","startAngle","radius","endAngle","pointer","offsetCenter","itemStyle","axisTick","splitLine","distance","splitNumber","axisLabel","detail","RightSection","ContentScore_templateObject","ContentScore_templateObject1","ContentScore_templateObject2","ContentScore_templateObject5","ContentScore_templateObject6","ContentScore_templateObject7","ContentScore_templateObject8","ContentScore_templateObject9","ContentScore_templateObject10","WordCount","WordCount_templateObject","WordCount_templateObject1","HeaderSection","MiniContainer","ScoreAndWordCount","ProgressStyled","strokeLinecap","gapDegree","gapPosition","MiniTitleContainer","HeaderSection_templateObject","HeaderSection_templateObject1","HeaderSection_templateObject2","HeaderSection_templateObject3","HeaderSection_templateObject5","HeaderSection_templateObject6","HeaderSection_templateObject7","termsForInsertion","termsAssistantSuggestions","overflowY","TermsAssistant_MissingPlacementsBanner_templateObject","dots","setDots","saved","dismissed","savedPlacements","dismissedPlacements","placements","Data","PlacementsInfo","generatePlacmenetsInfo","TermsList_SingleTerm_templateObject","TermsList_SingleTerm_templateObject1","TermsList_SingleTerm_templateObject2","TermsList_SingleTerm_templateObject3","TermsList_SingleTerm_templateObject4","TermsList","termOccurances","TermsSelectionDropdown","_filter","selectedTerms","setSelectedTerms","popoverVisible","setPopoverVisible","showLimitError","setShowLimitEror","fetchTaSuggestions","taSuggestionsLoading","handleCheckboxClick","updatedList","onTermsSearchHandler","onBulkSelectTop20Handler","addCompleteTerms","prepcCompleteTerms","completeTermsLength","prepIncludeMoreTerms","onUncheckAllClickHandler","onTriggerClickHandler","HeadingSection","SearchBox","QuotaInfo","ControllsBar","BulkControllBtn","SingleTermRow","opaque","TermUsage","BtnsContainer","Trigger","TermsSelectionDropdown_templateObject","TermsSelectionDropdown_templateObject1","TermsSelectionDropdown_templateObject2","TermsSelectionDropdown_templateObject3","TermsSelectionDropdown_templateObject4","TermsSelectionDropdown_templateObject6","TermsSelectionDropdown_templateObject7","TermsSelectionDropdown_templateObject8","TermsSelectionDropdown_templateObject9","TermsSelectionDropdown_templateObject11","TermsSelectionDropdown_templateObject12","TermsSelectionDropdown_templateObject13","TermsAssistantRightSidebar","RightSidebar_templateObject","RightSidebar_templateObject1","RightSidebar_templateObject2","RightSidebar_templateObject3","RightSidebar_templateObject4","RightSidebar_templateObject5","SingleCompetitor","contentScore","TopRankingCompetitors","topRankingCompetitorActiveKw","competitorsData","setTopRankingCompetitorsActiveKw","openCompetingFocusTermsDrawer","onSelect","dropdownClassName","DrawersTriggers","changeView","loadingTaSuggestions","setLoadingTaSuggestions","handleTriggerAssistant","finalPrepArr","buttonsConf","faListTree","hoverColor","openCompetitorsHeadingsDrawer","faMagicWandSparkles","tooltipContent","faWrench","faChartSimple","updatedButtonConf","SingleItem","DrawersTriggers_templateObject","DrawersTriggers_templateObject1","Analytics","ContentContainer","Analytics_templateObject","Analytics_templateObject1","KeywordSelector","isSubscriber","isCompetitorsTable","setFilteredCompetitorsData","setActiveKw","setCompetitors","activeKw","handleOnSelectChange","KeywordDropdownWrapper","KeywordSelector_templateObject","CompetitorsTable","filteredCompetitorsData","schemaTypesList","allSchemasCount","nullCount","selectedSchema","setSelectedSchema","setShowCompetitorTermsTableDetail","isSmallScreen","setIsSmallScreen","allowScroll","setAllowScroll","onWindowResize","innerWidth","average","reFormatSchemaType","schema","selectedSchemaValue","filteredItems","graph","graphItem","fixed","ellipsis","PageUrlWrapper","lineHeight","dr","parseFloat","toFixed","DRWrapper","schemaLength","schemaItemsList","BlueTextWithUnderline","ULStyled","LinksContainer","paddingRight","LinkWrapper","StyledAnchor","h1Count","h2Count","h3Count","TypesSchemaFilterWrapper","SchemaFilterTitle","SchemaFilterWrapper","SchemaFilter","scroll","y","_dir","CompetitorsTable_templateObject","CompetitorsTable_templateObject1","CompetitorsTable_templateObject2","CompetitorsTable_templateObject3","CompetitorsTable_templateObject4","CompetitorsTable_templateObject5","CompetitorsTable_templateObject6","CompetitorsTable_templateObject7","CompetitorsTable_templateObject8","CompetitorsTable_templateObject9","CompetitorsTable_templateObject10","CompetitorsTable_templateObject11","CompetitorsTable_templateObject12","CompetitorsDetail","competitorSchemaObject","competitorTitle","competitorUrl","competitorSchemaGraphIdx","formats","renderSchemaData","dataObj","LargeLine","mainLebel","mainValue","SchemaLabel","SchemaValue","urlValidationRegex2","isValid","utc","BackArrowContainer","SchemaContainer","SchemaHeader","SchemaPageTitle","context","CompetitorsDetail_templateObject","CompetitorsDetail_templateObject1","CompetitorsDetail_templateObject2","CompetitorsDetail_templateObject3","CompetitorsDetail_templateObject4","CompetitorsDetail_templateObject5","CompetitorsDetail_templateObject6","CompetitorsDetail_templateObject7","CompetitorsDrawerTab","setSchemaTypesList","setAllSchemasCount","setNullCount","showCompetitorTermsTableDetail","squareTooltip","IsRanking","IsNotRanking","focusTermsTooltip","CompetingFocusTermsDrawer","isCompetingFocusTermsDrawerOpen","closeCompetingFocusTermsDrawer","isOpeningKwSuggestionsFromContentResearch","setIsOpeningKwSuggestionFromContentResearch","selectedKeyword","setSelectedKeyword","selectedCompTabKw","setSelectedCompTabKw","isHovered","setIsHovered","maxElemHeight","setMaxElemHeight","allRef","keywordSuggestionsRef","elementsArray","elementsWidthArr","exportSingleNode","node","today","date","getFullYear","getMonth","getDate","html2canvas","then","canvas","toDataURL","onTabChange","schemaCountsHandler","competitorsTypes","countOccurrences","inputArray","counts","prototype","hasOwnProperty","call","afterVisibleChange","focusTermsGridData","TitleStyled","tabPosition","overflowX","Subtitle","data-html2canvas-ignore","SectionHeader","sites","Rank","Site","rotate","wrap","contentScores","focusTermUsageBySites","Square","keywordSuggestionsGridData","keywordSuggestionsUsageBySites","CompetingFocusTermsDrawer_templateObject","CompetingFocusTermsDrawer_templateObject1","CompetingFocusTermsDrawer_templateObject2","CompetingFocusTermsDrawer_templateObject3","CompetingFocusTermsDrawer_templateObject4","CompetingFocusTermsDrawer_templateObject5","CompetingFocusTermsDrawer_templateObject6","CompetingFocusTermsDrawer_templateObject7","CompetingFocusTermsDrawer_templateObject9","CompetingFocusTermsDrawer_templateObject10","CompetingFocusTermsDrawer_templateObject11","NewContentIdeaForm","drawerVisible","usaCode","selectedCountry","setSelectedCountry","onFormSubmit","topic","loadContentIdeasData","SCA_PAGE_CONTENT_IDEAS_GENERATE","SingleContentIdea","setConvertedText","newLineIndex","textWithoutLeadingSpace","firstTitle","breakFileName","fileName","faDownload","SCA_PAGE_CONTENT_IDEA_DOWNLOAD","SCA_PAGE_CONTENT_IDEA_COPY","CopyOutlined","ContentIdeas","csvModel","wordsArray","CsvDownloader","datas","filename","displayName","ExportOutlined","ContentIdeasDrawer","contentIdeas","setDrawerVisible","clearContentIdeas","setIsOpenContentGeneratorDrawer","SimilarKeyword","isIncluded","OverviewPage","addToLoadingArray","loadingArray","onRemoveKeywordFinish","ContentResearchDrawer","keywordDetail","isContentResearchDrawerOpen","closeContentResearchDrawer","getKeywordDetail","removeFromLoadingArray","countryName","similarKeywordsPageNumber","setSimilarKeywordsPageNumber","similarKeywordsPageSize","similarKeywordsData","setSimilarKeywordsData","similarKeywordsList","setSimilarKeywordsList","topCompetitorsData","setTopCompetitorsData","rankingPotentialData","setRankingPotentialData","handleFilterRenderData","dataArray","pageNumber","targetKwArray","similarKeywordsFormattedData","isKwIncluded","similarKeywords","onPaginationChange","relevanceData","competition","typicalTop10","averageContentScores","averageDr","averageWordCount","readAbility","averageReadability","SimilarKeywordConfig","BarChartColumn","numeral","PageTitle","skeletonMarginRight","totalSearchResults","rankingPotential","xAxis","svTrend","interval","formatter","rich","month","year","yAxis","volume","areaStyle","symbolSize","symbol","MiddleContainer","readability","Pagination","showSizeChanger","defaultPageSize","showQuickJumper","termsGrid","ContentResearchDrawer_templateObject","ContentResearchDrawer_templateObject1","ContentResearchDrawer_templateObject2","ContentResearchDrawer_templateObject3","ContentResearchDrawer_templateObject4","ContentResearchDrawer_templateObject5","ContentResearchDrawer_templateObject6","ContentResearchDrawer_templateObject7","ContentResearchDrawer_templateObject8","ContentResearchDrawer_templateObject9","ContentResearchDrawer_templateObject10","KeywordsDrawer","isOpenKeywordsDrawer","isDrawerFromCa","KeywordDetailContent","TechnicalsViewSwitcher","TechnicalsSwitcherContainer","ViewSwitcher_templateObject","PageSpeedIndex","refetchArticle","refetchPage","SpeedIndexContainer","psiMetrics","avgSpeedIndex","SpeedIndexDot","LastFetchContainer","updatedAt","faRotateRight","isInitialPageLoad","isTechnicalsDataLoading","PageSpeedIndex_templateObject","PageSpeedIndex_templateObject1","PageSpeedIndex_templateObject2","PageSpeedIndex_templateObject3","TechnicalScore","technicalsMsgColorMap","technicalScore","TitleAndWordCount","TechnicalScore_templateObject","TechnicalScore_templateObject1","TechnicalScore_templateObject2","TechnicalScore_templateObject3","auditLoader","setAuditLoader","onPageAuditPopoverVisible","setOnPageAuditPopoverVisible","contentAuditStore","loadContentAudit","setNewRecordId","antIconSecond","onRunPageAudit","countryCodeToUse","getId","shouldUseHeadlessBrowser","onPageAuditDetails","TopSeactionContainer","PopoverWrapper","getUniqueKeywords","existingValues","getFieldsValue","AntdCheckbox","PopoverKwContainer","PopoverBtnContainer","RunPageAuditBtn","faFileChartColumn","BtnText","Technicals_HeaderSection_templateObject","Technicals_HeaderSection_templateObject1","Technicals_HeaderSection_templateObject3","Technicals_HeaderSection_templateObject4","Technicals_HeaderSection_templateObject5","Technicals_HeaderSection_templateObject6","HeaderSection_templateObject8","AnalyticsCollapseCard","descriptionColor","colTitle1","colTitle2","sortKey","colTitle3","colTitle4","dataRenderer","isCollapse","defaultActive","plan","warningBar","setPageNumber","checkData","setCheckData","isFilterOpened","setIsFilterOpened","sortOrder","setSortOrder","formatData","setFormatData","sortData","sortBy","bordered","expandIcon","CaretUpFilled","faCaretUp","defaultCurrent","faFilter","ChevronUp","disabledTooltip","SchemaModal","setShowModal","dataList","setExpanded","dataForDisplay","ModalContentWrapper","MainContainer","potentialAction","z","wordBreak","queryInput","SchemaModal_templateObject","SchemaModal_templateObject1","SchemaModal_templateObject2","SchemaModal_templateObject3","SchemaModal_templateObject4","SchemaModal_templateObject5","SchemaModal_templateObject6","TechnicalsData","showMissingAltText","setShowMissingAltText","isActiveInternalBrokenLinks","setIsActiveInternalBrokenLinks","isActiveExternalBrokenLinks","setIsActiveExternalBrokenLinks","showSchemaModal","setShowSchemaModal","internalLinksFilters","statusCode","SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN","uiFormatImageSize","sizeArray","brokenHeaders","translateWord","getMissingAltTotal","imagesFilter","SCA_PAGE_IMAGES_SHOW_MISSING_ALT","externalLinksFilters","SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN","displayStatusCode","displayFollowCode","followCode","jsonLd","metaSummary","meta","field","statusColor","suggestionColor","getStatusColor","Image","getMissingAltText","WarningMiniBar","Video","video","visitable","ExternalLink","generateInternalLinksDesc","msgArr","labelColor","getInternalBrokenLinksCount","getInternalRedirectsCount","anchor","generateExternallLinksDesc","getExternalBrokenCount","getExternalRedirectsCount","List","ButtonLink","linkgraphDomain","Technicals","DataContainer","Technicals_templateObject","Technicals_templateObject1","compListCollapsed","HeadingsTree","activeCompetitor","setShowBulkAddContentBtn","showBulkAddContentBtn","setCheckedCount","checkedCount","setCheckedIndexData","checkedIndexData","setCopiedHeadings","addedHeadings","setAddedHeadings","copiedHeading","setCopiedHeading","tag","setFilters","onCheckboxChecked","curFilters","checkboxClickHandler","headingContent","headingTag","handleCopyClick","updatedCopiedHeadings","textToAdd","headingType","cleanText","curAddedHeadings","updatedAddedHeading","addHeadingsHandler","FiltersWrapper","FiltersContainer","headingsHierarchy","BulkAddAction","faSquareCheck","ActionsWrapper","AddHeadings","CopyAction","CancelAction","FiltersTree","SingleHeading","itemId","HeadingTag","HeadingText","Copy","InsertText","calculateIndent","getTopMargin","calculateFontSize","generateColor","HeadingsTree_templateObject","HeadingsTree_templateObject1","HeadingsTree_templateObject2","HeadingsTree_templateObject3","HeadingsTree_templateObject4","HeadingsTree_templateObject5","HeadingsTree_templateObject6","HeadingsTree_templateObject7","HeadingsTree_templateObject8","HeadingsTree_templateObject9","HeadingsTree_templateObject10","HeadingsTree_templateObject11","HeadingsTree_templateObject12","HeadingsTree_templateObject13","CompetitorHeadingsDrawerContent","setCompListCollapsed","setCheckedHeadingsWithTags","checkedHeadingsWithTags","setActiveCompetitor","updatedCompetitors","currentArticleOutline","generateHeadingOutline","getBlocksAsArray","outline","lastIndexOf","isCurrentArticleOutline","faBars","faBarsSort","competitorsList","CompetitorsList","CurrentArticleOutline","Order","NameLogoUrl","Name","Url","Logo","NameAndUrl","Headingoutlines","DrawerContent_templateObject","DrawerContent_templateObject1","DrawerContent_templateObject2","DrawerContent_templateObject3","DrawerContent_templateObject4","DrawerContent_templateObject5","DrawerContent_templateObject6","DrawerContent_templateObject7","DrawerContent_templateObject8","DrawerContent_templateObject9","DrawerContent_templateObject10","DrawerContent_templateObject11","DrawerContent_templateObject12","DrawerContent_templateObject13","CompetitorsHeadingsDrawer","isCompetitorsHeadingsDrawerOpen","closeCompetitorsHeadingsDrawer","SidebarContent","showTechnicals","setShowTechincals","TechnicalsContainer","LoadingBannerContainer","LongLoadingBanner","isFetchingTargetKw","SidebarContent_templateObject","SidebarContent_templateObject1","SidebarContent_templateObject2","SidebarContent_templateObject3","SidebarContent_templateObject4","RightSidebarV2","onResizeCallback","isHidden","topPosition","setTopPosition","sideBarRef","sidebarUpdate","handleScroll","pageYOffset","passive","_document_querySelector","Resizable","onResize","dir","elRef","enable","topRight","bottomRight","bottomLeft","topLeft","analyzingError","ErrorView","PageEditor","rootStore","loadAiWriterHistory","refetchOneClickDraftResultForArticleCreation","isExportingPageLoader","setIsPublic","setFocusTermsClassNames","setSideBarWidth","setViewers","emailAddress","resultId","triggerFreddySurvey","FREDDY_EVENT_SCA_ARTICLE_CREATED","updateFocusTermsState","sortedFocusTerms","internalLinksClusters","variations","finalData","parts","prepareFinalTerms","regex","multiWordCountRegex","mapFocusTerms","dbRef","firebase","database","snapshot","exists","catch","console","onDisconnect","cancel","setRepollsAllowed","focusedState","moveFocusToStart","afterSelectionMove","firstKey","formattedEditorState","setIsInitialEditorStateFetched","loadProject","getAllProjects","setRefechForBulkArticleCreation","getTime","loadPages","activeProjectId","initialLoadPage","setNewPage","headerStore","setComponent","spend","quotaProps","MainLoader","module","exports"],"sourceRoot":""}
{\n setShowOriginalBlockId(block.itemIndex);\n }}>\n {showOriginalBlockId == null && 'Show original'}\n
: null}\n\n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex && block.status !== 'default' ?\n {block.status} : null}\n \n {highlightedNodeId !== block.itemIndex && block.status == 'dismissed' ? parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
\n\n \n {(showOriginalBlockId != null) && showOriginalBlockId == block.itemIndex ?\n ', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options) : parse(block.suggestion?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
\n {\n onBlockStatusChange('undo');\n setShowOriginalBlockId(null);\n }}> Revert to Original
: null}\n \n ORIGINAL
\n {block.status !== 'default' && block.status !== 'dismissed' ?\n \n {parse(block.html?.replaceAll('
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
\n :\n null}\n \n\n );\n } else {\n return ', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
', '\\n\\n')?.replaceAll('<br/>', '\\n')?.split(regExp)?.join(' '), options)}\n
\n {blocksRenderer(getstagingLinkSuggestions)}\n
\n \n
\n\n {(isTaActive && \n
\n );\n};\n","import {FocusTermClusteredType} from '@/store/content-optimizer/currentPage';\nimport {Table} from '@/components/common-components/components';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useEffect, useState} from 'react';\nimport {filterDataInMemory} from '@/utils/filter-data';\nimport styles from './style.module.scss';\nimport {formatLargeNumber} from '@/utils/number';\nimport {ColumnType} from 'antd/es/table';\n\ninterface Props {\n cluster: FocusTermClusteredType;\n isClusterRemoving: boolean;\n}\n\nexport const SingleCluster = observer(({\n cluster,\n isClusterRemoving,\n}: Props) => {\n const {\n contentOptimizer: {\n currentPage,\n },\n } = useStore('');\n\n enum SORT_DIRECTION {\n ascend = 'ascend',\n descend = 'descend'\n }\n\n const [tableData, setTableData] = useState([]);\n const [sortField, setSortField] = useState('requiredCountMin');\n const [sortDirection, setSortDirecion] = useStateAn error has occurred, please try again later.
\n\n {record.name}\n {record?.foundIn && record.foundIn.map((item, idx) => {\n return {item} ;\n })}\n {record?.isBranded && {'branded'} }\n
;\n },\n },\n {\n title: 'MSV',\n dataIndex: 'sv',\n key: 'sv',\n align: 'right' as 'right',\n sortFieldName: 'sv',\n width: 60,\n sorter: true,\n render: (_, record) => {\n return {formatLargeNumber(record.sv)}
;\n },\n },\n {\n title: 'USAGE',\n dataIndex: 'requiredCountMin',\n key: 'requiredCountMin',\n defaultSortOrder: 'descend',\n align: 'right' as 'right',\n width: 60,\n sortFieldName: 'requiredCountMin',\n sorter: true,\n render: (_, record) => {\n return {`${record.usedCount}/${record.idealCountMax}`}
;\n },\n },\n {\n title: 'REMOVE',\n dataIndex: 'name',\n key: 'name',\n align: 'right' as 'right',\n width: 80,\n render: (_, record) => {\n return \n
;\n});\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 15px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\nconst FoundInLabel = styled.span`\n background-color: #A3A4A426;\n border-radius: 50px;\n display: inline-block;\n font-size: 12px;\n margin-right: 5px;\n padding: 0 8px;\n`;\n","import {useStore} from '@/store/root-store';\nimport {Modal} from '@/components/common-components/';\nimport {observer} from 'mobx-react-lite';\nimport {Dispatch, SetStateAction, useEffect, useState} from 'react';\nimport {SingleCluster} from './SingleCluster';\nimport styles from './style.module.scss';\nimport {Collapse, Divider} from 'antd';\nimport {toJS} from 'mobx';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faTrash} from '@fortawesome/pro-light-svg-icons';\nimport styled from 'styled-components';\nimport {formatLargeNumber} from '@/utils/number';\nimport {faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n isModalOpen: boolean;\n setIsModalOpen: Dispatch\n setIsModalOpen(false)}>Close \n
\n \n\n\n ;\n});\n\n\nconst RemoveClusterBtn = styled.div<{disabled: boolean}>`\n font-size: 12px;\n color: ${p => p.disabled ? '#A3A4A4': '#4E5156'};\n cursor: ${p => p.disabled ? 'not-allowed': 'pointer'};\n\n .remove-icon {\n margin-right: 5px;\n }\n\n &:hover {\n color: #ff6262;\n }\n`;\n\nconst ClusterHeader = styled.div`\n display: flex;\n align-items: baseline;\n`;\nconst ClusterName = styled.div`\n font-weight: 500;\n color: #121212;\n`;\nconst ClusterDesc = styled.div`\n font-size: 12px;\n color: #4E5156;\n margin-left: 5px;\n`;\n\nconst CollapseStyled = styled(Collapse)`\n // background: #fff;\n border: none;\n max-height: calc(75vh - 185px);\n overflow-y: auto;\n\n .ant-collapse-content {\n border-top: 0px solid transparent;\n background-color: #fff;\n }\n\n .ant-collapse-item {\n border-radius: 10px !important;\n margin-bottom: 10px;\n border: 1px solid #E8E8E8;\n background-color: #fff;\n }\n\n .ant-collapse-content-box {\n padding-top: 0px;\n }\n\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n\n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n`;\n\nconst ModalTitle = styled.div`\n font-weight: 600;\n font-size: 20px;\n color: #121212;\n margin-bottom: 10px;\n`;\n","import {BaseApi} from '@/api/base-api';\nimport {getApiUrl, getTokenFromCookies} from '@/api/common-utils';\nimport {Button, GrayButton} from '@/components/common-components/v2/Button';\nimport {Checkbox} from '@/components/common-components/v2/Checkbox';\nimport {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {faArrowUpArrowDown, faSliders} from '@fortawesome/pro-regular-svg-icons';\nimport {faFileArrowDown, faFileLines, faFileSpreadsheet} from '@fortawesome/pro-light-svg-icons';\nimport {faPlus, faTrash} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Dropdown, Radio, Tooltip, Spin, Divider, Menu} from 'antd';\nimport {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {costPerClickFormatter, searchVolumeFormatter} from '../../../../../LeftSide/EditorSection/content-editor/utils';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport {Modal} from '@/components/common-components';\nimport {faGoogle} from '@fortawesome/free-brands-svg-icons';\nimport {CONTENT_ASSISTANT_API} from '@/api/ContentAssistant';\nimport {BulkRemoveTermsModal} from '../BulkRemoveTermsModal/BulkRemoveTermsModal';\nimport {toJS} from 'mobx';\nimport {useStore} from '@/store/root-store';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface TopicalProps {\n onViewChange?: Dispatch e.stopPropagation()}>\n onViewChange(e.target.value)} style={{display: 'flex', flexDirection: 'column'}}>\n Editor settings: \n currentPage?.setHighlights(e.target.checked)}>Enable Terms Highlighting in the Editor \n Terms recommendations: \n onCheckboxClicked(e.target.checked)}>Include Branded Terms \n\n \n {isNotPublic && setShowBulkRemoveTermsModal(true)}> }\n
\n \n window.open(getXlsExportLink(), '_self')}>\n \n downloadFileToTxt()}>\n \n exportToGoogleDocs()} disabled={exportToDocsLoading}>\n {exportToDocsLoading ? \n
\n \n {Object.keys(termsFiltersSetup).map((item, idx) => {\n return \n termsFilterHandler(e.target.checked, item)}>\n {getTermsCount(termsFiltersSetup[item].type)}\n \n ;\n })}\n
\n Topical term
\n{focusTerm.name}
\n\n {focusTerm.sv !== undefined && focusTerm.sv !== null && {`SV: ${searchVolumeFormatter(focusTerm.sv)}`}}\n {focusTerm.cpc !== undefined && focusTerm.cpc !== null && {`CPC: ${costPerClickFormatter(focusTerm.cpc)}`}}\n
\n {focusTerm?.foundIn && focusTerm?.foundIn.length > 0 ?\n \n Used in \n {focusTerm.foundIn.map((item, i)=> {\n if (focusTerm.foundIn.length === 1) {\n return {`<${item}>`};\n } else {\n if (i === focusTerm.foundIn.length - 1) {\n return <>and {`<${item}>`};\n } else if (i === focusTerm.foundIn.length - 2) {\n return {`<${item}>`} ;\n } else {\n return {`<${item}>`}, ;\n }\n }\n })}\n
:\n null}\n {'Current / Recommended # of uses'}
\n\n {store?.content?.targetKewyordsOnlyArr?.includes(focusTerm.name) ?
Target keywords do not have any usage limitations.
: null}\n {focusTerm.usedCount}\n of {focusTerm.requiredCountMin}\n {`(Max: ${focusTerm.requiredCountMax || 0})`}\n \n {'Competitors using this term'}
\n\n {focusTerm?.competitors?.results?.map((competitor, index) => (\n \n
}>\n \n \n // {`${index + 1}. `}{competitor.hostname}\n ))}\n\n \n {(!isNil(focusTerm?.normalizedScore) || focusTerm?.source) ? {competitor.title ?? getSiteName(competitor.hostname)}
\n {competitor.url}\n\n {competitor?.snippets?.map((snippet, idx) => {\n return
\n \n
;\n })}\n \n {/* {snippet.length > 130 ? snippet.substring(0, 130) + '...' : snippet} */}\n
\n {idx !== (competitor?.snippets?.length - 1) &&{`Keyword source: `}{focusTerm?.source?.join(', ')}
: null}\n {!isNil(focusTerm?.normalizedScore) ? <>\n{`Importance score: `}{focusTerm.normalizedScore}
\n : null\n }\n {isAnyFocusTermLink() ?\n\n {\n navigator.clipboard.writeText(focusTerm.name);\n setCopySuccess(true);\n }}>\n \n \n \n\n {!isScaPublicPage() ? {\n if (!visible) {\n setTimeout(() => {\n setCopySuccess(false);\n }, 300);\n }\n }}>\n {(isRemoving && store.isRemovingFocusTerms) ?
\n removeTermHandler(focusTerm.name)}>\n
}\n\n : null}\n \n \n \n
\n\n {\n setIsBookmarked(!isBookmarked);\n await bookmarkInternalLinkSuggestion(uuid, link?.url);\n if (typeof customCallback == 'function') customCallback();\n }}>\n \n
\n \n {\n navigator.clipboard.writeText(link?.url);\n setCopySuccess(true);\n }}>\n \n
\n \n {\n setIsRemovingTerm(true);\n await removeInternalLinkSuggestion(uuid, link?.url, link?.keywords);\n if (typeof customCallback == 'function') customCallback();\n setIsRemovingTerm(false);\n }}>\n {isRemovingTerm ? :
\n \n \n No Internal Link Suggestions found that match your search.\n
:\n store?.content?.targetKeywords?.length === 0 ?\n \n Please add Target Keywords to get Internal Link Suggestions.\n
: \n No Internal Link Suggestions found for these Target Keywords.\n
}\n \n
;\n});\n","import {CurrentPageStore} from '@/store/content-optimizer/currentPage';\nimport {SingleCitation} from './SingleCitation/SingleCitation';\nimport styles from './style.module.scss';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n store: CurrentPageStore;\n}\nexport const CommonCitations = observer(({store}: Props) => {\n return <>\n {store?.analytics?.commonCitations?.length ? {citation.url && addDefaultSrc(e)} src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />}
\n \n \n
\n {citation?.title}
\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc.length > 90 ?\n {citation?.metaDesc.substring(0, 90) + '...'}
\n : {citation?.metaDesc}
}\n {citation?.serps ? \n Used by:
: null}\n\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 7 && (\n {`+${citation?.serps?.length - 7}`}\n )}\n
\n {serp.title}
\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp.metaDesc.length > 70 ? serp.metaDesc.substring(0, 70) + '...' : serp.metaDesc}
\n {`Position: ${serp.position}`}
\n }\n overlayClassName={styles.serpTooltip}>\n \n
:\n !store?.content?.targetKeywords?.length ? \n {store?.analytics?.commonCitations.map(citation => {\n return (citation.url || citation.metaDesc) && ;\n })}\n
\n \n Please add Target Keywords to get Common Citations.\n
: \n No Common Citations found for these Target Keywords.\n
}\n ;\n});\n","import {Tooltip} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\n\nexport const SidebarTooltip = observer(props => {\n return e.stopPropagation()}>\n onViewChange(e.target.value)}>\n Internal Link Suggestions \n External Link Suggestions \n \n
\n e.stopPropagation()}>\n {visibleKeywords?.map((kw, id) => {\n return onCheckboxClicked(e.target.checked, kw.keyword)}>{kw.keyword} ;\n })}\n
\n \n \n \n
\n \n \n \n
\n Add links to content easily with AI
\n {dataArr?.length && (currentView == 'links' || currentView == 'terms') ? {\n (dataArr?.length && (currentView == 'links' || currentView == 'terms')) && postLInkSuggestion(currentView);\n }}> {anyButtonClicked ?
Launching AI Links Assistant.
\n Do not modify your article before this tool is fully loaded
\n : ''}>\n {\n setIsVisiblePopover(true);\n }}> {anyButtonClicked ?
{t('question')}
\n{question.keyword ? question.keyword : null}
\n\n {question?.sv !== undefined && question?.sv !== null && {`SV: ${searchVolumeFormatter(question.sv)}`}}\n {question?.cpc !== undefined && question?.cpc !== null && {`CPC: ${costPerClickFormatter(question.cpc)}`}}\n
\n {t('number-of-uses')}
\n\n {question?.usedCount ?? ''}\n
\n \n }\n >\n\n
\n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n }}>\n
\n \n {question?.keyword ?? ''}\n
\n\n {\n navigator.clipboard.writeText(`${question?.keyword ?? ''}?`);\n setCopySuccess(true);\n }}>\n
\n \n {\n e.stopPropagation();\n fetchAndInsertText('copy');\n }}>\n
\n \n {\n if (creatingPage) return;\n e.stopPropagation();\n setCreatingPage(true);\n insertText(`` + question?.keyword + '? ', Number(i), currentPage, aiOutline, debouncedUpdate);\n setCreatingPage(false);\n // onCreatePage();\n }}>\n
\n \n
:\n \n {currentPage?.analytics?.questions?.map((question, i) => {\n return ;\n })}\n
\n \n {/*
}\n ;\n});\n","import React, {useState} from 'react';\nimport {Button, Modal} from 'antd';\nimport {useStore} from '@/store/root-store';\nimport {stringToArray} from '@/utils/arrays';\nimport {faArrowRight} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {CustomTextarea} from '@/components/common-components/components/form/input/customTextarea';\nimport {keywordNewLineReg} from '@/constants/regex';\nimport {apiError} from '@/utils/api';\nimport {notification} from '@/utils/notification-v2';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react';\n\ninterface Props {\n showAddFocusTermModal: boolean;\n setShowAddFocusTermModal: (value: boolean) => void;\n}\n\nconst AddFocusTermModal = observer(({showAddFocusTermModal, setShowAddFocusTermModal}: Props) => {\n const [terms, setTerms] = useState\n onChangeTab(key)}\n >\n \n \n \n \n }\n key='1'\n style={{'outline': 'none'}}>\n \n \n \n \n }\n key='2'\n style={{'outline': 'none'}}>\n {isNotPublic && \n \n \n \n }\n key='3'\n style={{'outline': 'none'}}>\n \n \n \n
\n );\n});\n\nconst CommonTabsStyled = styled(CommonTabs)`\n .rc-tabs-extra-content {\n background-color: transparent !important;\n border: 1px solid $color-gray-dark-medium;\n border-radius: 5px;\n cursor: pointer;\n font-size: $font-size-12;\n height: 25px;\n margin-bottom: auto;\n margin-left: 5px;\n margin-top: auto;\n padding: 0 5px;\n transition: all 0.2s ease-in;\n }\n\n .focusTermsTabTitleValue {\n color: $color-gray-light;\n display: block;\n font-size: $font-size-12;\n font-weight: 400;\n margin-left: 5px;\n\n .ant-spin-spinning {\n height: 10px;\n }\n\n .customSpinner {\n font-size: 12px !important;\n }\n }\n\n .rc-tabs-content-holder {\n background-color: transparent !important;\n padding-top: 15px;\n }\n\n .rc-tabs-nav {\n border-bottom: 1px solid #4E5156;\n }\n .rc-tabs-nav-list {\n justify-content: space-between;\n }\n .rc-tabs-nav-operations {\n display: none !important;\n }\n\n .rc-tabs-tab {\n margin-left: 20px !important;\n\n &:first-child {\n margin-left: 0px !important;\n }\n }\n\n @media screen and (max-width: 1400px) {\n .rc-tabs-tab {\n margin-left: 0px !important;\n margin-right: 15px !important;\n }\n \n }\n\n .rc-tabs-tab-btn {\n padding: 5px 0 !important;\n }\n\n .rc-tabs-ink-bar {\n background-color: #F1AA3E !important;\n border-radius: 2px;\n }\n`;\n\nconst TabsStyled = styled(CommonTabPane)<{expanded: boolean; editorScrolled: boolean}>`\n \n .ant-collapse {\n overflow-y: ${p => p.expanded ? 'auto' : 'inherit'};\n height: ${p => p.expanded ? `calc(100vh - ${p.editorScrolled ? 292 : 300}px)` : 'auto'};\n // For Internet Explorer\n scrollbar-face-color: rgba(138,138,138,0.32);\n scrollbar-track-color: rgba(138,138,138,0.12);\n\n // For Google Chrome\n &::-webkit-scrollbar {\n height: 5px;\n width: 5px;\n }\n \n &::-webkit-scrollbar-thumb {\n background: rgba(138,138,138,0.32);\n }\n \n &::-webkit-scrollbar-track {\n background: rgba(138,138,138,0.12);\n }\n }\n`;\n\nconst TabTitleContainer = styled.div<{active: boolean}>`\n\n .tabTitle {\n font-weight: 400;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n\n .tabExtraInfo {\n padding-bottom: 8px;\n\n .tabUsageContainer {\n display: flex;\n\n .usageValue {\n font-size: 18px;\n font-weight: 600;\n color: ${p => p.active ? '#fff' : '#A3A4A4'}\n }\n\n .totalValue {\n span {\n font-size: 12px;\n color: #A3A4A4;\n }\n }\n }\n }\n\n`;\n","/* eslint-disable max-len */\n\nimport {observer} from 'mobx-react';\nimport {Spin} from 'antd';\nimport styled from 'styled-components';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {isNil} from 'lodash';\nimport {SidebarTooltip} from '../../../Common/SideBarTooltip/sidebarTooltip';\nimport {ReactNode} from 'react';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faArrowDown, faArrowUp, faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport styles from './style.module.scss';\n\n\ninterface Props {\n label: string;\n value?: number;\n tooltipLabel?: string | ReactNode;\n showTooltip?: boolean;\n loading?: boolean;\n min?: number;\n max?: number;\n headingData?:{\n h1: number;\n h2: number;\n h3: number;\n h1Min: number;\n h1Max: number;\n h2Min: number;\n h2Max: number;\n h3Min: number;\n h3Max: number;\n };\n linksData?:{\n internalLinks: number;\n externalLinks: number;\n internalLinksMin: number;\n internalLinksMax: number;\n externalLinksMin: number;\n externalLinksMax: number;\n };\n}\n\nexport const SingleMetrics = observer(({label, value, tooltipLabel, showTooltip, loading, min, max, headingData, linksData}:Props) => {\n const secondAntIcon = \n {t('topical-terms')}\n
\n \n {\n currentPage?.isAnalyzing ?\n () :\n (
\n \n
)\n }\n {currentPage?.analytics?.totalUsedTerms}
\n /{currentPage?.analytics?.focusTerms?.length}
\n \n Questions\n
\n \n {\n currentPage?.isAnalyzing ?\n () :\n (
\n \n
)\n }\n {currentPage?.analytics?.totalUsedQuestions}
\n /{currentPage?.analytics?.questions?.length}
\n \n Link Suggestions\n
\n \n {currentPage?.isFetchingIntLinksSug ?\n () :\n (
\n \n
)\n }\n {currentPage?.content?.totalUsedSuggestions}
\n /{currentPage?.content?.internalLinkSuggestionsV2?.allLinks?.length}
\n \n \n \n
\n :\n <>\n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n
\n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n
\n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n
\n \n
\n :\n \n 1) ? faArrowDown : faCheck} color={(headingData.h1 < 1) || (headingData.h1 > 1) ? '#FF8536' : '#1FAC47'}/>{' '} H1: {headingData.h1}\n 0/1 \n
\n \n headingData.h2Max) ? faArrowDown : faCheck } color={(headingData.h2 < headingData.h2Min) || (headingData.h2 > headingData.h2Max) ? '#FF8536' : '#1FAC47'}/>{' '}H2: {headingData.h2}\n \n {`${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `/` : ''} ${(!isNil(headingData.h2Min) && !isNil(headingData.h2Max)) ? `${headingData.h2Min}-${headingData.h2Max}` : ''}`}\n \n
\n \n headingData.h3Max) ? faArrowDown : faCheck } color={(headingData.h3 < headingData.h3Min) || (headingData.h3 > headingData.h3Max) ? '#FF8536' : '#1FAC47'}/>{' '}H3: {headingData.h3}\n \n {`${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `/` : ''} ${(!isNil(headingData.h3Min) && !isNil(headingData.h3Max)) ? `${headingData.h3Min}-${headingData.h3Max}` : ''}`}\n \n
\n \n \n
\n :\n \n linksData.internalLinksMax) ? faArrowDown : faCheck} color={(linksData.internalLinks < linksData.internalLinksMin) || (linksData.internalLinks > linksData.internalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '} Internal: {linksData.internalLinks}\n \n {`${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `/` : '/'} ${(!isNil(linksData.internalLinksMin) && !isNil(linksData.internalLinksMax)) ? `${linksData.internalLinksMin}-${linksData.internalLinksMax}` : ''}`}\n \n
\n \n linksData.externalLinksMax) ? faArrowDown : faCheck} color={(linksData.externalLinks < linksData.externalLinksMin) || (linksData.externalLinks > linksData.externalLinksMax) ? '#FF8536' : '#1FAC47'}/>{' '}External: {linksData.externalLinks}\n \n {`${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `/` : ''} ${(!isNil(linksData.externalLinksMin) && !isNil(linksData.externalLinksMax)) ? `${linksData.externalLinksMin}-${linksData.externalLinksMax}` : ''}`}\n \n
\n \n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n
:\n \n \n max) ? faArrowDown : faCheck} color={(value < min) || (value > max) ? '#FF8536' : '#1FAC47'}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n \n
:\n \n = min && value <= max}/>\n {value}\n \n {`${(!isNil(min) && !isNil(max)) ? `/` : ''} ${(!isNil(min) && !isNil(max)) ? `${min}-${max}` : ''}`}\n \n
:\n \n H1 headings\n \n
\n H2 headings\n \n
\n H3 headings\n \n
\n Add Target Keywords and Start Writing to see how your content ranks\n
:\n \n Add Focus Terms and length to improve your ranking potential.\n
:\n \n Getting there! But there is still lots of opportunity to improve.\n
:\n \n Good work! Your content has an average chance of ranking.\n
:\n \n Great work! Your content has the best chance of ranking.\n
:\n \n \n {countsSetup.map((item, idx) => {\n return ;\n })}\n \n\n
\n\n\n \n \n \n
\n {score ?? 0}/100
\n \n \n {`Avg: ${scoreExtended?.avg ?? '-'}`}\n \n \n {`Top: ${scoreExtended?.top ?? '-'}`}\n \n
\n\n \n \n {t('content-score')} \n \n \n \n\n
\n \n {termsWithNoSuggestions?.map((term, idx) => {\n return
\n );\n\n\n return {`‧ ${term}`}
;\n })}\n \n We could not find a placement for\n {noPlacementsTermsCount()}\n
\n setShow(false)}>Dismiss
\n \n \n {generatePlacmenetsInfo(dots)}\n \n \n
\n {term.name}
\n \n\n {finalTermsList?.map((term, idx) => {\n return ;\n })}\n
;\n});\n","import {CommonInput} from '@/components/common-components';\nimport {Button, Checkbox, GrayButton} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {faCaretDown, faMagnifyingGlass} from '@fortawesome/pro-solid-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Popover, Spin, Tooltip} from 'antd';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport {useEffect, useState} from 'react';\nimport styled from 'styled-components';\n\nexport const TermsSelectionDropdown = observer(() => {\n const [selectedTerms, setSelectedTerms] = useStatePlease select less than 50 topical terms.
:\n null}\n \n Current usage:\n {term.usedCount}\n
\n \n Recommended usage:\n {term.requiredCountMin}\n
\n \n Maximum usage:\n {term.requiredCountMax}\n
\n }>\n '));\n }\n\n if (stagingTaSuggestions[i].isSuggestion) {\n if (stagingTaSuggestions[i].status == 'accepted') {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].suggestion);\n } else {\n finalHtmlOutput = finalHtmlOutput.concat(stagingTaSuggestions[i].html.replace('', '
'));\n }\n }\n }\n\n if (finalHtmlOutput.startsWith('
\n
\n * Save changes to update your article.\n
\n
;\n});\n","import {useEffect} from 'react';\nimport {SingleCompetitor} from './SingleCompetitor/SingleCompetitor';\nimport styles from './style.module.scss';\nimport css from '../../index.module.scss';\nimport {Typography, Spin, Select, Tooltip} from 'antd';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {observer} from 'mobx-react';\nimport {useStore} from '@/store/root-store';\n// import {NextImg} from '@/utils/nextImg';\n\nexport const TopRankingCompetitors = observer(() => {\n const {\n contentOptimizer: {\n currentPage,\n }} = useStore('');\n\n const {Option} = Select;\n const {Title} = Typography;\n const antIcon = {competitor.url && addDefaultSrc(e)}\n height={20}\n width={20}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${competitor.url}`} />}
\n \n {competitor?.url}}>\n {competitor?.title}\n \n\n
\n \n\n \n {`#${competitor?.position}`}\n \n\n {`-`}\n\n \n \n {competitor?.contentScore}\n }\n className={styles.progress}\n />\n \n \n\n {`-`}\n\n \n \n {`${numberWithCommas(competitor?.wordCount) || 0} words`}\n \n \n
\n {/* {competitor?.url && urlValidationRegex.test(competitor?.url) ?\n {competitor?.url} : null} */}\n\n {/* {competitor?.metaDesc && competitor?.metaDesc.length > 90 ? competitor?.metaDesc.substring(0, 90) + '...' : competitor?.metaDesc}
*/}\n \n
;\n});\n","import {useStore} from '@/store/root-store';\nimport {faChartSimple, faListTree, faMagicWandSparkles, faWrench} from '@fortawesome/pro-duotone-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {toJS} from 'mobx';\nimport {observer} from 'mobx-react';\nimport styled from 'styled-components';\nimport {notification} from '@/utils/notification-v2';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {Spin, Tooltip} from 'antd';\nimport {useState} from 'react';\nimport {isScaPublicPage} from '@/utils/url';\n\ninterface Props {\n changeView: () => void;\n}\n\nexport const DrawersTriggers = observer(({changeView}: Props) => {\n const {settings: {customer: {getCustomerQuota}}} = useStore('');\n const {contentOptimizer: {currentPage}} = useStore('');\n\n const [anyButtonClicked, setAnyButtonClicked] = useState(false);\n const [loadingTaSuggestions, setLoadingTaSuggestions] = useState(false);\n\n const antIcon = \n \n Top Ranking Competitors {currentPage?.isAnalyzing && <Spin indicator={antIcon} style={{marginRight: '20px'}}/>}\n \n
\n\n {currentPage?.analytics?.competitorsData?.length ? currentPage.openCompetingFocusTermsDrawer()}>\n Analyse Content\n
\n \n \n handleOnSortChange(value)}\n dropdownStyle={{minWidth: '150px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={styles.selectInput}\n suffixIcon={ \n
:\n !currentPage?.content?.targetKeywords?.length ? \n {currentPage?.analytics?.competitorsData?.filter(item => item.keyword === currentPage?.topRankingCompetitorActiveKw)[0]?.competitors?.map(competitor => {\n return competitor?.title && ;\n })}\n
\n \n {/*
: \n {/*
}\n \n
,\n },\n {\n label: 'Technical Audit',\n icon: faWrench,\n hoverColor: '#34AEF3',\n callback: changeView,\n disabled: !currentPage?.content?.importedFromUrl,\n },\n {\n label: 'Competitor Content',\n icon: faChartSimple,\n hoverColor: '#F1AA3E',\n callback: currentPage.openCompetingFocusTermsDrawer,\n loading: currentPage?.isAnalyzing,\n },\n ];\n\n\n const updatedButtonConf =() => {\n if (isScaPublicPage()) {\n return buttonsConf.filter(i => i.label !== 'Terms Assistant');\n } else {\n return buttonsConf;\n }\n };\n\n return Launching Terms Assistant.
\n Do not modify your article before this tool is fully loaded
\n {record?.title}
\n {record?.url}}>\n\n {record?.title}\n {record?.url}\n
\n {percent}
\n \n {percent }}\n />\n
;\n },\n },\n {\n title: () => {'Schema'.toUpperCase()},\n dataIndex: 'schema',\n key: 'schema',\n sortField: 'schema',\n align: 'center' as 'center',\n width: 150,\n render: (_, record: SingleCompetitorType) => {\n let schemaLength = 0;\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaLength += 1 : Array.isArray(item?.graph) && item?.graph?.map(graphItem => graphItem?.type ? schemaLength += 1 : '');\n });\n\n const schemaItemsList = [];\n Array.isArray(record?.schema) && record?.schema?.map(item => {\n item?.type ? schemaItemsList.push(item) : Array.isArray(item?.graph) && item?.graph?.map(graphItem => schemaItemsList.push(graphItem));\n });\n return \n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, 0, record?.schema[0])}>{reFormatSchemaType(String(record?.schema ? (record?.schema[0]?.graph ? record?.schema[0]?.graph[0]?.type : record?.schema[0]?.type) : '-'))} \n {schemaLength > 1 &&\n <>\n {schemaItemsList?.map((item, idx) =>\n <>\n {idx == 0 ? '' :\n setShowCompetitorTermsTableDetail(true, record?.title, record?.url, idx, item)}\n style={{width: 'auto', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: '#2D6CCA', cursor: 'pointer', paddingLeft: '20px'}}>\n {reFormatSchemaType(String(item?.type))}
\n }\n ,\n )}}>\n ,
\n {'links'.toUpperCase()},\n dataIndex: 'internalLinks',\n key: 'internalLinks',\n sortField: 'internalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.internalLinks?.length - b?.internalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.internalLinks?.length == 0 ?\n
- \n
{item} \n
{'links'.toUpperCase()},\n dataIndex: 'externalLinks',\n key: 'externalLinks',\n sortField: 'externalLinks',\n align: 'center' as 'center',\n sorter: (a: any, b: any) => a?.externalLinks?.length - b?.externalLinks?.length,\n width: 80,\n render: (_, record: SingleCompetitorType) => {\n return <>\n {record?.externalLinks?.length == 0 ?\n
- \n
{item} \n
|
{allSchemasCount}|
{nullCount}|
{item?.count}\n
\n\n \n
\n ;\n };\n\n return <>\n \n {dataObj && Object?.entries(dataObj)?.map((item, index) => {\n const mainLebel = item[0];\n const mainValue = item[1];\n return
\n \n {mainLebel && mainLebel != '0' ? mainLebel == 'type' ? `@${mainLebel}` : mainLebel : ''} \n {typeof mainValue !== 'object' ? {typeof mainValue == 'boolean' ? `${mainValue ? 'Yes' : 'No'}` : (\n urlValidationRegex2?.test(String(mainValue)) ? {String(mainValue)} : (\n moment(mainValue, formats, true)?.isValid() || mainLebel?.includes('date') ? moment(mainValue)?.utc()?.format('DD MMM YYYY') : `${mainValue}`\n )\n )} :\n renderSchemaData(mainValue)}\n
;\n })}\n {competitorTitle}
\n {competitorUrl}\n \n @context \n {competitorSchemaObject?.context ?? '-'} \n @graph \n {renderSchemaData(competitorSchemaObject?.graph ? competitorSchemaObject?.graph[competitorSchemaGraphIdx] : competitorSchemaObject)}\n
\n \n
\n);\nconst focusTermsTooltip = (hostname, url, keyword, score) => (\n \n
\n {hostname}
\n {url}\n \n {`is `}\n {score > 0 ? ranking : not ranking }\n {`for `}\n {keyword}\n
\n {/* used {keyword} {score} times
*/}\n \n
\n);\nexport const CompetingFocusTermsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {settings: {customer: {profile: {isSubscriber}}}} = useStore('');\n const {contentOptimizer: {currentPage: {analytics, isCompetingFocusTermsDrawerOpen, closeCompetingFocusTermsDrawer, isOpeningKwSuggestionsFromContentResearch, setIsOpeningKwSuggestionFromContentResearch}}} = useStore('');\n const [selectedKeyword, setSelectedKeyword] = useState('');\n const [selectedCompTabKw, setSelectedCompTabKw] = useState\n
\n {hostname}
\n {url}\n \n {score > 0 ? `uses ` : `did not use `}\n {keyword} \n {score > 0 && <>{score} \n {score == 1 ? `time` : `times`}}\n
\n \n \n exportSingleNode(allRef.current)}\n >\n \n
\n \n Competing Focus Terms \n Check what focus terms your competitors are using \n
\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => (\n {i === 0 ? 'YOU' : i} \n ))}\n
\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n {x?.hostname}\n \n\n \n );\n })}\n
\n \n \n Created From Scratch\n \n
\n );\n }\n return (\n \n {selectedKeyword}
*/}\n \n {item.keyword} \n ))}\n \n
\n \n {analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.contentScores?.map((score, i) => (\n {percent}}\n />\n ))}\n
\n \n FOCUS TERMS\n DISTRIBUTION\n
\n \n
\n \n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.focusTermsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item?.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n
\n ))}\n {item.name}
\n {item.values?.map((score, i) => (\n \n \n exportSingleNode(keywordSuggestionsRef.current)}\n >\n \n
\n \n {/* Keywords Suggestions */}\n Check out what keywords your competitors are using \n
\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => (\n {i + 1} \n ))}\n
\n \n {analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.slice(0, 10).map((x, i) => {\n return (\n \n \n \n {x.url}\n \n
\n }\n key={x?.url}\n >\n \n Content Score: \n {x.contentScore}\n
\n \n Word Count: \n {x.wordCount}\n
\n {selectedKeyword}
*/}\n \n {item.keyword} \n ))}\n \n
\n \n TARGET KEYWORD\n USAGE\n
\n \n
\n \n x?.keyword === selectedKeyword)?.sites?.[i]?.hostname, analytics?.keywordSuggestionsGridData?.find(x => x?.keyword === selectedKeyword)?.sites?.[i]?.url, item.name, score)\n }>\n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: score ? '#2AC155' : '#F44343'}}> \n \n ))}\n
\n ))}\n {item.name}
\n {item.values?.map((score, i) => (\n Need some inspiration? Here you can generate unlimited article ideas on any topic you can think of.
\n\n \n \n );\n});\n","import {useState, useEffect} from 'react';\nimport styles from './style.module.scss';\nimport {faDownload} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {\n Button,\n} from '@/components/common-components/components';\nimport {CopyOutlined} from '@ant-design/icons';\n\nimport {Divider, Tooltip} from 'antd';\nimport {faCheck} from '@fortawesome/pro-regular-svg-icons';\nimport {SCA_PAGE_CONTENT_IDEA_COPY, SCA_PAGE_CONTENT_IDEA_DOWNLOAD} from '@/constants/events';\n\nimport {MixPanel} from '@/utils/mixpanel';\nimport {useTranslation} from 'next-i18next';\nimport parse from 'html-react-parser';\n\ninterface Props {\n idea: string;\n}\n\nexport const SingleContentIdea = ({idea}: Props) => {\n const [copySuccess, setCopySuccess] = useState(false);\n const [convertedText, setConvertedText] = useState(idea);\n\n const {t} = useTranslation('landing-page-optimizer');\n\n useEffect(() => {\n // Removing the leading space from string\n const newLineIndex = idea?.search('\\n');\n const textWithoutLeadingSpace = idea?.slice(0, newLineIndex + 1) + idea?.slice(newLineIndex + 2);\n const firstTitle = idea?.slice(0, newLineIndex + 1);\n const result = textWithoutLeadingSpace.replace(firstTitle, '' + firstTitle + '');\n\n setConvertedText(result);\n }, [idea]);\n\n\n const downloadFileToTxt = () => {\n const element = document.createElement('a');\n const file = new Blob([idea], {type: 'text/plain'});\n element.href = URL.createObjectURL(file);\n const breakFileName = idea.split(' ').length;\n const fileName = breakFileName > 4 ? idea.split(' ').slice(0, 4).join('-') : idea.split(' ').slice(0, breakFileName).join('-');\n element.download = `${fileName}`;\n document.body.appendChild(element);\n element.click();\n };\n\n return (\n\n
\n );\n};\n","// import {useState} from 'react';\nimport {ContentIdeasStore} from '@/store/content-optimizer/contentIdeas';\nimport CsvDownloader from 'react-csv-downloader';\nimport {Divider} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport {SingleContentIdea} from './SingleContentIdea';\nimport {ExportOutlined} from '@ant-design/icons';\nimport {Button} from '@/components/common-components/components';\n\ninterface Props {\n store: ContentIdeasStore;\n}\n\nexport const ContentIdeas = observer(({store}: Props) => {\n const csvModel = store?.wordsArray.map(item => ({\n title: item.split('\\n')[0],\n text: item.split('\\n')[1],\n }));\n\n const csvColumns = [\n {\n id: 'title',\n displayName: 'Title',\n },\n {\n id: 'text',\n displayName: 'Text',\n },\n ];\n return <>\n {store?.wordsArray.length ? \n {convertedText && parse(convertedText.trim())}\n
\n\n {`${idea.replace(/(\\r\\n|\\n|\\r)/gm, '').length} characters`}\n
\n \n {\n downloadFileToTxt();\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_DOWNLOAD, {\n 'description': 'Content idea downloaded',\n });\n }}/>\n {\n navigator.clipboard.writeText(idea);\n setCopySuccess(true);\n\n MixPanel.track(SCA_PAGE_CONTENT_IDEA_COPY, {\n 'description': 'Content idea copied',\n });\n }}>\n \n
\n \n {`${store?.wordsArray?.length} ideas generated for \"${store?.keyword}\" `}\n
\n \n \n
\n \n \n );\n});\n","import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip, Spin} from 'antd';\nimport styles from './style.module.scss';\nimport {faCheck, faPlus, faTimes} from '@fortawesome/pro-light-svg-icons';\nimport {useStore} from '@/store/root-store';\nimport {LoadingOutlined} from '@ant-design/icons';\nimport {observer} from 'mobx-react';\nimport classNames from 'classnames';\n\ninterface Props {\n keyword: string;\n isIncluded?: boolean;\n}\n\nexport const SimilarKeyword = observer(({keyword, isIncluded}: Props) => {\n const {\n OverviewPage: {\n addToLoadingArray,\n loadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const {settings: {customer: {profile: {quotaUtilization}, getCustomerQuota}}, plans: {showSidebarPaymentDrawer}} = useStore('');\n\n const antIcon = \n Content Helper\n
\n \n \n \n
;\n});\n","import {useEffect, useState, useCallback} from 'react';\nimport {useStore} from '@/store/root-store';\nimport {\n Drawer,\n Progress,\n Tooltip, Select} from 'antd';\nimport {observer} from 'mobx-react';\nimport styles from './style.module.scss';\nimport styled from 'styled-components';\nimport {formatNumber, numberWithCommas} from '@/utils/number';\nimport {Table, BarChartColumn, SkeletonRingLoader, Pagination, SkeletonHorizontalLoaderGray, Button} from '@/components/common-components';\nimport ReactEcharts from 'echarts-for-react';\nimport {EChartOption} from 'echarts';\nimport moment from 'moment';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {getProgressColor} from '@/utils/colors';\nimport {faArrowUp} from '@fortawesome/pro-regular-svg-icons';\nimport {faCaretDown} from '@fortawesome/pro-solid-svg-icons';\nimport {toJS} from 'mobx';\nimport numeral from 'numeral';\nimport Flag from '@/components/common-components/components/flag';\nimport {SimilarKeyword} from './SimilarKeyword';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {NextImg} from '@/utils/nextImg';\n\nexport const ContentResearchDrawer = observer(() => {\n const [isHovered, setIsHovered] = useState(false);\n\n\n const {\n countries: {getSpecificCountryByCode},\n OverviewPage: {\n isContentResearchDrawerOpen,\n loading,\n keywordDetail,\n closeContentResearchDrawer,\n getKeywordDetail,\n removeFromLoadingArray,\n },\n contentOptimizer: {currentPage},\n } = useStore('');\n const countryName = getSpecificCountryByCode(keywordDetail?.countryCode);\n\n const [activeKw, setActiveKw] = useState{keyword ? keyword : '-'}
\n \n\n {loadingArray && loadingArray.includes(keyword) ?\n \n \n\n }\n\n
\n onRemoveKeywordFinish()}>\n \n \n Remove\n
:\n // adding a check to disable button if total target kw limit is reached\n currentPage?.feTargetKeywords?.length < 15 ?\n onAddKeywordFinish()}>\n
:\n \n
\n {data?.competition || '-'}
,\n },\n {\n title: 'CONTENT SCORE',\n dataIndex: 'contentScore',\n sorter: true,\n sortField: 'contentScore',\n width: 100,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n
;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sorter: true,\n sortField: 'dr',\n width: 80,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n
;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n width: 110,\n align: 'center' as 'center',\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'}
;\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readAbility',\n dataIndex: 'readAbility',\n align: 'center' as 'center',\n width: 110,\n render: (_, data) => {\n return {data?.readAbility ? data?.readAbility : '-'}
;\n },\n\n },\n ];\n\n const topCompetitorColumns = [\n {\n title: 'SITE / URL',\n dataIndex: 'hostname',\n key: 'hostname',\n width: 300,\n align: 'left' as 'left',\n fixed: 'left' as 'left',\n render: (_, data) => {\n return \n
;\n },\n\n },\n {\n title: 'POS',\n dataIndex: 'position',\n key: 'position',\n width: 50,\n sortField: 'position',\n align: 'left' as 'left',\n render: (_, data) => {\n return \n
\n {data.hostname}
\n {data.url}
\n {data?.position}
;\n },\n },\n {\n title: ()=> CONTENTSCORE
,\n dataIndex: 'contentScore',\n sortField: 'contentScore',\n sorter: true,\n width: 130,\n align: 'center' as 'center',\n key: 'contentScore',\n render: (_, data) => {\n const percent = data?.contentScore ? data?.contentScore % 1 === 0 ? data?.contentScore : parseFloat(data?.contentScore.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n
;\n },\n },\n {\n title: 'DR',\n dataIndex: 'dr',\n sortField: 'dr',\n sorter: true,\n width: 60,\n align: 'center' as 'center',\n key: 'dr',\n render: (_, data) => {\n const percent = data?.dr ? data?.dr % 1 === 0 ? data?.dr : parseFloat(data?.dr.toFixed(2)) : 0;\n return \n {percent}}\n className={styles.progress}\n />\n
;\n },\n },\n {\n title: 'WORD COUNT',\n key: 'wordCount',\n sortField: 'wordCount',\n sorter: true,\n align: 'center' as 'center',\n width: 100,\n dataIndex: 'wordCount',\n render: (_, data) => {\n return {data?.wordCount ? numberWithCommas(data?.wordCount) : '-'}
;\n },\n\n\n },\n {\n title: 'READABILITY',\n key: 'readability',\n dataIndex: 'readability',\n align: 'center' as 'center',\n width: 170,\n render: (_, data) => {\n return {data?.readability ? data?.readability : '-'}
;\n },\n\n },\n ];\n\n const squareTooltip = (hostname, url, keyword, score) => (\n \n
\n );\n\n const SimilarKeywordConfig = [\n {\n title: 'KEYWORD',\n dataIndex: 'keyword',\n key: 'keyword',\n align: 'left' as 'left',\n width: 240,\n render: (_, record) => {\n return (\n
\n {hostname}
\n {url}\n \n {score > 0 ? `uses ` : `did not use `}\n {keyword} \n {score > 0 && <>{score} \n {score == 1 ? `time` : `times`}}\n
\n {numeral(data?.sv).format('0.[0][a]')}
;\n },\n },\n\n {\n title: 'CPC',\n dataIndex: 'cpc',\n align: 'center' as 'center',\n width: 70,\n key: 'cpc',\n sortField: 'cpc',\n sorter: true,\n render: (_, data) => {\n return {`$${data?.cpc}`}
;\n },\n },\n ];\n // useEffect(() => {\n // if (isContentResearchDrawerOpen && !isInitialDataFetch) {\n // getKeywordDetail(currentPage?.content?.targetKeywords?.filter(item => item.keyword === activeKw)[0]?.id);\n // }\n // }, [activeKw]);\n\n return \n
\n \n\n {loading ? :\n :\n : :\n
\n {keywordDetail?.countryCode ?
}\n\n {loading ? \n KD: 75 ? '#F44343' : keywordDetail?.kd < 76 && keywordDetail?.kd > 50 ? '#e4a469' : keywordDetail?.kd < 51 && keywordDetail?.kd > 25 ? '#bfe15e' : '#1d754e' : '#696777'}}>•{keywordDetail?.kd || '-'}\n
}\n {loading ? SV: {numeral(keywordDetail?.sv).format('0.[0][a]')}
}\n\n {loading ? Total Search Results: {keywordDetail?.totalSearchResults ? numeral(keywordDetail?.totalSearchResults).format('0.[0][a]') : '0'}
}\n \n
\n \n
\n Ranking Potential
\n {keywordDetail?.rankingPotential ?\n \n \n
: null }\n {keywordDetail?.rankingPotential}
\n \n
\n\n\n \n
\n Search Volume
\n {loading ? {formatNumber(keywordDetail?.sv)}
\n \n data.date) : [],\n type: 'category',\n show: true,\n axisLabel: {\n interval: 10,\n formatter: label => {\n const date = moment(label);\n return `{month|${date.format('MMM')}}-{year|${date.format('YY')}}`;\n },\n rich: {\n month: {\n color: '#77757D',\n lineHeight: 15.54,\n },\n year: {\n color: '#77757D',\n fontSize: 12,\n lineHeight: 12.95,\n },\n },\n },\n splitLine: {\n show: false,\n },\n },\n yAxis: {\n type: 'value',\n show: true,\n axisLabel: {\n formatter: label => {\n return `${formatNumber(label)}`;\n },\n },\n splitLine: {\n lineStyle: {\n color: '#E8E8E8',\n type: 'dashed',\n width: 1},\n show: true,\n },\n },\n grid: {\n height: '70%',\n left: '10%',\n top: '9%',\n },\n series: [\n {\n data: keywordDetail?.svTrend?.map(data => data.volume) || [],\n type: 'line',\n areaStyle: {},\n symbolSize: 2,\n symbol: '',\n },\n ],\n }} />\n
}\n\n \n :\n
\n Common Citations
\n {loading ? \n {keywordDetail?.commonCitations?.length ? keywordDetail?.commonCitations?.map((citation, index) => {\n return (citation?.url && !citation?.url.startsWith('javascript:')) &&
}\n \n
;\n }) : {citation.url && addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${citation.url}`} />}
\n \n \n
\n {citation?.title}
\n\n {citation?.url ?\n {citation?.url} : null}\n {citation?.metaDesc && citation?.metaDesc?.length > 70 ?\n {citation?.metaDesc.substring(0, 70) + '...'}
\n : {citation?.metaDesc}
}\n {citation?.serps ? \n Used by:\n
: null}\n\n \n {citation?.serps?.map((serp, idx) => idx < 5 && (\n \n addDefaultSrc(e)}\n src={`https://www.google.com/s2/favicons?sz=16&domain_url=${serp.url}`} /> \n \n ))}\n {citation?.serps?.length > 9 && (\n {`+${citation?.serps?.length - 9}`}\n )}\n
\n {serp.title}
\n {serp?.url ? {serp.url} : null}\n {serp.metaDesc && serp?.metaDesc?.length > 70 ? serp?.metaDesc?.substring(0, 70) + '...' : serp.metaDesc}
\n {`Position: ${serp.position}`}
\n }\n overlayClassName={styles.serpTooltip}>\n No data available
}\n {/* return \n
;\n })} */}\n \n\n
\n {getDomain(item?.url)}
\n \n {item?.title}\n
\n \n \n Top competitor content \n\n \n
\n \n \n Similar keywords \n\n \n {\n closeContentResearchDrawer();\n currentPage.setIsOpeningKwSuggestionFromContentResearch(true);\n currentPage.openCompetingFocusTermsDrawer();\n }}>View all keywords\n
\n\n \n
\n \n\n
\n ;\n});\n\nconst PageTitle = styled.div`\n font-weight: 600;\n margin-bottom: 10px;\n margin-left: 40px;\n font-size: 20px;\n`;\nconst Header = styled.div`\n display: flex;\n margin-bottom: 10px;\n padding-left: 40px;\n`;\n\nconst TitleContainer = styled.div`\nheight: 60px;\nbackground: #2D2F34;\npadding: 18px;\nborder-radius: 8px 8px 0px 0px;\n`;\nconst Title = styled.div`\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n line-height: 22px;\n`;\n\nconst SectionHeader = styled.div`\n background: #F7F7F8;\n border-radius: 3px;\n margin-right: 4px;\n margin-left: 4px;\n display: flex;\n color: #121212;\n padding: 15px 10px;\n font-size: 12px;\n font-weight: 600;\n`;\n\nconst MiddleContainer = styled.div`\n display: flex;\n padding: 0 40px 30px 40px;\n`;\n\nconst Square = styled.div<{ isHovered: boolean }>`\n width: 40px;\n height: 25px;\n border-radius: 3px;\n background-color: red;\n cursor: pointer;\n color: transparent;\n \n opacity: ${p => p.isHovered && '0.5'};\n \n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n color: white;\n opacity: 1;\n }\n`;\n\nconst Dot = styled.div`\n border-radius: 50%;\n height: 5px;\n margin-right: 5px;\n width: 5px;\n`;\n\nconst Rank = styled.div`\n background-color: #d3d3d7;\n width: 40px;\n height: 25px;\n font-size: 12px;\n color: #4E5156;\n justify-content: center;\n display: flex;\n align-items: center;\n`;\n\n\nconst Site = styled.div`\n writing-mode: tb-rl;\n transform: rotate(-180deg);\n font-size: 12px;\n color: #2D6CCA;\n width: 40px;\n display: flex;\n align-items: center;\n`;\n\nconst IsRanking = styled.span`\n padding: 2px 7px;\n background-color: #1FAC47;\n border-radius: 3px;\n color: #fff;\n margin-right: 5px;\n`;\n","import KeywordDetailContent from '@/components/dashboard/pages/keyword-researcher-v2/keyword-detail-drawer-content';\nimport {useStore} from '@/store/root-store';\nimport {CloseOutlined} from '@ant-design/icons';\nimport {Drawer} from 'antd';\nimport {observer} from 'mobx-react-lite';\n\nexport const KeywordsDrawer = observer(() => {\n const {contentOptimizer: {currentPage}} = useStore('');\n\n return \n \n Relevant terms used by Competitors \n\n \n {loading ? : <>\n \n COMPETITOR RANK\n \n \n \n {keywordDetail && keywordDetail?.termsGrid?.focusTermUsageBySites?.map((item, i) => (\n
\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => (\n {i + 1} \n ))}\n
\n \n {keywordDetail && keywordDetail?.termsGrid?.sites?.map((x, i) => {\n if (!x?.hostname) {\n return (\n \n Created From Scratch\n \n );\n }\n return (\n \n \n {/* {x?.hostname} */}\n \n
\n\n\n \n FOCUS TERMS\n DISTRIBUTION\n
\n \n
\n \n \n {\n setIsHovered(true);\n }} onMouseLeave={() => {\n setIsHovered(false);\n }} style={{backgroundColor: getProgressColor(score ?? 0, 0, 3, 10)}}>{score} \n \n ))}\n
\n ))}}\n {item.name}
\n {item.values?.map((score, i) => (\n \n {icon}\n
\n {title}
\n \n {description}\n
\n \n }\n >\n \n {warningBar && warningBar}\n {/* if we have 4 columns */}\n {colTitle3 && colTitle4 ?\n \n {colTitle1}\n
\n \n \n {colTitle2.title}\n
\n \n {colTitle3 ?\n \n {colTitle3}\n
\n : null}\n {colTitle4 ?\n \n {colTitle4}\n
\n : null}\n \n {colTitle1}\n
\n \n {\n if (colTitle2.sorter && colTitle2.sortKey && data && data.length) {\n sortData(colTitle2.sortKey);\n }\n }}>\n {colTitle2.title}\n {colTitle2.sorter && colTitle2.sortKey && data && data.length ?\n
\n \n \n
:\n null}\n\n \n {pageSize && (pageSize < data?.length) && (\n <>\n\n setPageNumber(pageNumber)}\n disabled={!plan}\n />\n \n )}\n {filters && filters.length >= 1 ?\n ( setIsFilterOpened(!isFilterOpened)}\n className={styles.filters}>\n {/* e.stopPropagation()}>\n
\n )\n }\n ) : null }\n \n {footer}\n \n \n );\n};\n","import React, {Dispatch, SetStateAction, useState} from 'react';\nimport styled from 'styled-components';\nimport {observer} from 'mobx-react-lite';\nimport {Modal} from '@/components/common-components';\nimport {Divider} from 'antd';\nimport {GrayButton} from '@/components/common-components/v2';\n\ninterface Props {\n visible: boolean;\n schema: any;\n setShowModal: Dispatch\n {`${t('filters')}: ${filters.filter(filter => filter.checked).length}`}\n \n {isFilterOpened ? }\n \n
\n {\n isFilterOpened && (\n \n {filters.map((filter, idx) => (\n filter.disabled ?\n \n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n :\n {\n filter.onChange();\n setIsFilterOpened(!isFilterOpened);\n }}>\n {filter.label}\n \n ))\n }\n
\n \n
;\n })}\n {data?.graph?.length > 1 ? \n {Object.entries(item)?.map(x => {\n return <>\n {`${x[0]}`} \n {`${x[0]}` == 'potentialAction' ? '' : (`${x[0]}` == 'url' ? {`${x[1]}`} :\n {`${typeof(x[1])!=='object' ? x[1] : '-'}`} )}\n {`${x[0]}` == 'potentialAction' ? item.potentialAction?.length > 0 && item?.potentialAction?.map((z, id) => {\n return
\n \n
;\n }) : ''}\n ;\n })}\n \n {z?.type} \n {z?.queryInput} \n
\n \n setExpanded(!expanded)}>\n {expanded ? 'Hide schema' : 'Show full schema'}\n
: ''}\n }\n {`x ${sizeArray[0]}`}
{sizeArray[1]}
;\n return returnSize;\n } else {\n return '-';\n }\n };\n\n const brokenHeaders = {sizeArray[1]}
{currentPage?.analysis?.brokenHeaders?.map((item, i) => {\n return {item.type}{(i + 1) < currentPage?.analysis?.brokenHeaders?.length && `, `};\n })}{translateWord(currentPage?.analysis?.status?.headers)}
;\n\n const getMissingAltText = () => {\n if (showMissingAltText && currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '');\n } else if (currentPage?.analysis?.images?.img) {\n return currentPage?.analysis.images.img;\n }\n };\n\n const getMissingAltTotal = () => {\n if (!currentPage?.analysis?.images?.img?.length) return null;\n if (currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length) {\n return currentPage?.analysis.images.img.filter(image => !image.alt || image.alt === '').length;\n } else {\n return null;\n }\n };\n\n const generateInternalLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getInternalBrokenLinksCount || currentPage?.analysis?.getInternalBrokenLinksCount === 0) {\n const msg = currentPage?.analysis?.getInternalBrokenLinksCount > 1 || currentPage?.analysis?.getInternalBrokenLinksCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getInternalBrokenLinksCount} ${msg}`);\n if (currentPage?.analysis?.getInternalBrokenLinksCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getInternalRedirectsCount || currentPage?.analysis?.getInternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getInternalRedirectsCount > 1 || currentPage?.analysis?.getInternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getInternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.internal?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const imagesFilter = [{\n label: 'Show only missing alt text',\n checked: showMissingAltText,\n disabled: currentPage?.analysis?.images?.img?.filter(image => !image.alt || image.alt === '')?.length == 0,\n onChange: () => {\n setShowMissingAltText(!showMissingAltText);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_IMAGES_SHOW_MISSING_ALT, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for images with missing alt text',\n });\n }\n },\n }];\n\n const externalLinksFilters = [{\n label: 'Show only links with issues',\n disabledTooltip: 'There are no links with issues on this page',\n checked: isActiveExternalBrokenLinks,\n disabled: currentPage?.analysis?.links?.external?.filter(link => link.statusCode && link.statusCode && link.statusCode > 299)?.length == 0,\n onChange: () => {\n setIsActiveExternalBrokenLinks(!isActiveExternalBrokenLinks);\n // monitoring for false value even tho we need true\n // the reason is that the event doesn't notice the change immediately\n if (!isActiveExternalBrokenLinks) {\n MixPanel.track(SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN, {\n 'pageId': currentPage?.content.uuid,\n 'description': 'Filtering for broken external links',\n });\n }\n },\n }];\n\n const generateExternallLinksDesc = () => {\n const msgArr = [];\n let labelColor = '#fff';\n\n if (currentPage?.analysis?.getExternalBrokenCount || currentPage?.analysis?.getExternalBrokenCount === 0) {\n const msg = currentPage?.analysis?.getExternalBrokenCount > 1 || currentPage?.analysis?.getExternalBrokenCount == 0 ? 'link issues' : 'link issue';\n msgArr.push(`${currentPage?.analysis?.getExternalBrokenCount} ${msg}`);\n if (currentPage?.analysis?.getExternalBrokenCount > 0) {\n labelColor = '#F44343';\n }\n }\n\n if (currentPage?.analysis?.getExternalRedirectsCount || currentPage?.analysis?.getExternalRedirectsCount === 0) {\n const msg = currentPage?.analysis?.getExternalRedirectsCount > 1 || currentPage?.analysis?.getExternalRedirectsCount == 0 ? 'redirects' : 'redirect';\n msgArr.push(`${currentPage?.analysis?.getExternalRedirectsCount} ${msg}`);\n }\n if (currentPage?.analysis?.links?.external?.length) {\n return <>{msgArr[0] && {msgArr[0]}, } {msgArr[1] && {msgArr[1]}};\n } else {\n return '0';\n }\n };\n\n const getExternalLinks = () => {\n if (isActiveExternalBrokenLinks && currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.external) {\n return currentPage?.analysis.links.external?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const getInternalLinks = () => {\n if (isActiveInternalBrokenLinks && currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.filter(link => link.statusCode && link.statusCode > 299);\n } else if (currentPage?.analysis?.links?.internal) {\n return currentPage?.analysis.links.internal?.slice()?.sort((a, b) => (a.statusCode > b.statusCode) ? -1 : ((b.statusCode > a.statusCode) ? 1 : 0));\n }\n };\n\n const displayStatusCode = (statusCode: number) => {\n if (statusCode) {\n if (statusCode >= 200 && statusCode < 300) {\n return {statusCode};\n } else if (statusCode >= 300 && statusCode < 400) {\n return {statusCode};\n } else if (statusCode >= 400) {\n if (statusCode === 429) {\n return {statusCode};\n } else {\n return {statusCode};\n }\n }\n } else {\n return 'N/A';\n }\n };\n\n const displayFollowCode = (followCode: string) => {\n if (followCode) {\n if (followCode === 'nofollow') {\n return 'NF';\n } else {\n return DF;\n }\n } else {\n return '-';\n }\n };\n\n return <>\n \n \n {t('head')}\n \n {currentPage?.analysis?.metaSummary?.map(meta => {\n return (\n \n
\n )}\n />\n );\n })}\n \n {meta.value}
\n {meta.suggestion}
\n {`<${header.type}> `}\n {heading}\n {` `}
;\n })}\n \n }\n >\n {header.type.toUpperCase()}
\n \n {header.count}
\n \n {header.type.toUpperCase()}
\n \n {header.count}
\n \n {header.type.toUpperCase()}
\n \n {header.count}
\n \n \n
}\n dataRenderer={(image, i) => {\n return (\n <>\n {\n navigator.clipboard.writeText(image.src);\n }}>{image.src}
\n {image.alt || '-'}
\n \n {video.src}
\n )}\n {video.title || t('no-title')}
\n \n {iframe.src}
\n )}\n {iframe.title || t('no-title')}
\n \n {link.anchor && link.anchor !== '\\n\\n' ? link.anchor.length > 27 ? link.anchor.substring(0, 27) + '...' : link.anchor : '-'}
\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n{displayFollowCode(link.rel[0])}
\n \n{displayStatusCode(link.statusCode)}
\n \n{link.anchor && link.anchor !== '\\n\\n' ? link.anchor.length > 27 ? link.anchor.substring(0, 27) + '...' : link.anchor : '-'}
\n \n {link.foundIn ? `${link.foundIn}` : '-'}
\n \n{displayFollowCode(link.rel[0])}
\n \n{displayStatusCode(link.statusCode)}
\n \n{social.type}
\n {social.url}\n \n {\n navigator.clipboard.writeText(js.src);\n }}>{js.src}
\n \n handleOnSelectChange(value)}\n dropdownStyle={{minWidth: '250px', fontSize: '12px'}}\n dropdownClassName={styles.keywordDropdownList}\n className={classNames(styles.selectInput, compListCollapsed && styles.minified)}\n suffixIcon={
;\n};\n","import {Checkbox} from '@/components/common-components/v2';\nimport {useStore} from '@/store/root-store';\nimport {opaqueColor} from '@/utils/colors';\nimport {faCopy} from '@fortawesome/pro-regular-svg-icons';\nimport {faCheck, faPlus} from '@fortawesome/pro-solid-svg-icons';\nimport {faSquareCheck} from '@fortawesome/pro-light-svg-icons';\nimport {faXmark} from '@fortawesome/pro-light-svg-icons';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {Tooltip} from 'antd';\nimport {EditorState, Modifier, SelectionState, ContentState} from 'draft-js';\nimport {debounce} from 'lodash';\nimport {observer} from 'mobx-react';\nimport {useCallback, useState} from 'react';\nimport styled from 'styled-components';\n// import {convertHtmlToEditorState} from '@/utils/htmlToDraft';\n\ninterface Props {\n activeCompetitor: any;\n htmlToDraft: any;\n setShowBulkAddContentBtn?: (value: boolean) => void;\n showBulkAddContentBtn?: boolean;\n setCheckedCount?: (value: number) => void;\n checkedCount?: number;\n setCheckedHeadingsWithTags?: (value: string) => void;\n checkedHeadingsWithTags?: string;\n setCheckedIndexData?: (value: any) => void;\n checkedIndexData?: any;\n}\n\nexport const HeadingsTree = observer(({\n activeCompetitor,\n htmlToDraft,\n setShowBulkAddContentBtn,\n showBulkAddContentBtn,\n setCheckedCount,\n checkedCount,\n setCheckedIndexData,\n checkedIndexData}: Props) => {\n const {contentOptimizer: {currentPage}} = useStore('');\n const {contentOptimizer:\n {currentPage: {\n setCopiedHeadings,\n }}} = useStore('');\n\n\n const [addedHeadings, setAddedHeadings] = useState([]);\n const [copiedHeading, setCopiedHeading] = useState({\n tag: '',\n text: '',\n });\n\n const [filters, setFilters] = useState([\n {\n tag: 'h1',\n active: true,\n },\n {\n tag: 'h2',\n active: true,\n },\n {\n tag: 'h3',\n active: true,\n },\n {\n tag: 'h4',\n active: true,\n },\n {\n tag: 'h5',\n active: true,\n },\n {\n tag: 'h6',\n active: true,\n },\n ]);\n\n const onCheckboxChecked = (checked: boolean, tag: string) => {\n const curFilters = [...filters];\n\n const updatedFilters = curFilters.map(filter => {\n if (filter.tag == tag) {\n return {\n ...filter,\n active: checked,\n };\n } else {\n return {...filter};\n }\n });\n\n setFilters(updatedFilters);\n };\n\n const checkboxClickHandler = (e, headingContent, headingTag, idx) => {\n if (e?.target?.checked) {\n setCheckedCount(checkedCount + 1);\n const newItem = {'id': idx, 'headingContent': headingContent, 'headingTag': headingTag};\n setCheckedIndexData([...checkedIndexData, newItem]);\n } else {\n setCheckedCount(checkedCount - 1);\n\n const updatedCheckedIndexData = checkedIndexData.filter(item => item?.id !== idx);\n setCheckedIndexData(updatedCheckedIndexData);\n }\n };\n\n const handleCopyClick = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n navigator.clipboard.writeText(updatedCopiedHeadings);\n };\n\n // const [blockskMap, setBlocksMap] = useState([]);\n\n // const mapHeadingsToDraftBlockTypes = {\n // 'h1': 'header-one',\n // 'h2': 'header-twp',\n // 'h3': 'header-three',\n // 'h4': 'header-four',\n // 'h5': 'header-five',\n // 'h6': 'header-six',\n // }\n\n // useEffect(() => {\n // if (!currentPage?.getCurrentEditorState) return;\n\n // const contentState = currentPage.getCurrentEditorState.getCurrentContent();\n\n // const map = convertToRaw(contentState).blocks\n // setBlocksMap(map);\n\n // }, [currentPage?.getCurrentEditorState]);\n\n\n // const checkIfEditorContainsHeading = (text: string, type: string) => {\n // if (!blockskMap || !blockskMap.length) return false;\n\n // const included = blockskMap.find(block => block.type == mapHeadingsToDraftBlockTypes[type] && block.text == text);\n\n // return included;\n // }\n\n const debouncedChange = debounce((state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations = false) => {\n // we are then calling the edit content method which will fire the API call and send new state to the BE\n currentPage.editContent(state, isNewDecorations);\n }, 2000);\n\n\n const debouncedUpdate = useCallback(\n (state: EditorState, focusTerms, focusTermsClassNames, isNewDecorations) => debouncedChange(state, focusTerms, focusTermsClassNames, isNewDecorations),\n // eslint-disable-next-line\n []\n );\n\n const insertText = async (textToAdd: any, headingType?: string, cleanText?: string) => {\n // NEW FLOW start\n const {contentBlocks, entityMap} = htmlToDraft(textToAdd);\n // const contentState = convertHtmlToEditorState(textToAdd);\n\n const selection = currentPage.currentEditorState.getSelection();\n\n const newSelection = new SelectionState({\n anchorKey: selection.getAnchorKey(),\n anchorOffset: selection.getEndOffset(),\n focusKey: selection.getAnchorKey(),\n focusOffset: selection.getEndOffset(),\n });\n\n\n const fragment = ContentState.createFromBlockArray(contentBlocks, entityMap).getBlockMap();\n // const fragment = contentState.getCurrentContent().getBlockMap();\n\n const nonStyledState = Modifier.replaceWithFragment(\n currentPage.currentEditorState.getCurrentContent(),\n newSelection,\n fragment,\n );\n\n // WE are calculating nodes to toggle blue background on new Ai generated nodes\n let firstNewBlockId: number;\n const currentBlock = selection.getAnchorKey();\n const nextBlock = currentPage.currentEditorState.getCurrentContent().getBlockAfter(selection.getAnchorKey())?.getKey();\n\n const existingNodes = document.querySelectorAll('[data-block=\"true\"]');\n existingNodes?.forEach((elem, id) => {\n if (elem.getAttribute('data-offset-key') && elem.getAttribute('data-offset-key') == `${currentBlock}-0-0`) {\n firstNewBlockId = id + 1;\n }\n });\n\n\n const updatedState = EditorState.push(currentPage.currentEditorState, nonStyledState, 'insert-fragment');\n currentPage.setCurrentEditorState(updatedState);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('[data-block=\"true\"]');\n if (newTextElems.length) {\n for (let i = firstNewBlockId; i <= newTextElems.length; i++) {\n if (newTextElems[i]?.getAttribute('data-offset-key') && newTextElems[i]?.getAttribute('data-offset-key') != `${nextBlock}-0-0` && newTextElems[i]?.getAttribute('data-offset-key') != `${currentBlock}-0-0`) {\n newTextElems[i].classList.add('newTextBlock');\n } else {\n return;\n }\n }\n }\n }, 500);\n\n debouncedUpdate(updatedState, currentPage.analytics?.focusTerms, currentPage.focusTermsClassNames, false);\n\n setTimeout(() => {\n const newTextElems = document.querySelectorAll('.newTextBlock');\n if (newTextElems.length) {\n newTextElems.forEach(elem => {\n elem.classList.remove('newTextBlock');\n });\n }\n }, 3500);\n\n const curAddedHeadings = [...addedHeadings];\n const updatedAddedHeading = [];\n checkedIndexData?.map(item => {\n updatedAddedHeading?.push({type: item?.headingTag, text: item?.headingContent});\n });\n if (headingType && cleanText) {\n setAddedHeadings([\n ...curAddedHeadings,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n } else {\n setAddedHeadings([\n ...curAddedHeadings,\n ...updatedAddedHeading,\n {\n type: headingType,\n text: cleanText,\n },\n ]);\n }\n // NEW FLOW END\n };\n\n const addHeadingsHandler = () => {\n setCopiedHeadings('');\n let updatedCopiedHeadings = '';\n checkedIndexData?.map(item => {\n updatedCopiedHeadings += `<${item?.headingTag}>${item?.headingContent}`;\n });\n setCopiedHeadings(updatedCopiedHeadings);\n insertText(`${updatedCopiedHeadings}`);\n setShowBulkAddContentBtn(true);\n setCheckedCount(0);\n setCheckedIndexData([]);\n };\n\n return \n {compListCollapsed ? 'Kw' : 'Keyword'}\n
\n Page structure
\n \n \n {copiedHeading.tag == heading.tag && copiedHeading.text == heading.content ? <>\n
}>\n Current Article Outline
\n Headings Outline
\n \n {\n onResizeCallback(elRef.offsetWidth);\n }}\n enable={{\n top: false,\n right: false,\n bottom: false,\n left: false,\n topRight: false,\n bottomRight: false,\n bottomLeft: false,\n topLeft: false,\n }}\n className={styles.resize}>\n {store?.content?.isAnalyzing && !store?.content?.analyzingError && (
\n );\n});\n","import {useEffect} from 'react';\nimport {WarningOutlined} from '@ant-design/icons';\nimport {useRouter} from 'next/router';\nimport {RootStoreType, useStore} from '@/store/root-store';\nimport {observer} from 'mobx-react-lite';\nimport {useTranslation} from 'next-i18next';\nimport styles from './styles.module.scss';\n// import {Drawer} from 'antd';\nimport {EditorState, SelectionState} from 'draft-js';\nimport {mapFocusTerms, multiWordCountRegex, prepareFinalTerms} from './LeftSide/EditorSection/content-editor/utils';\nimport {decoratedState} from './LeftSide/EditorSection/content-editor/decorators';\nimport firebase from 'firebase/app';\nimport 'firebase/database';\n// import {ContentGenerator} from './ContentGenerator/ContentGenerator';\nimport {LeftSide} from './LeftSide/LeftSide';\n// import {AiOutlineDrawer} from './AiOutlineDrawer';\n// import {CaAiQuotaInfo} from '@/components/common-components/v2/CaAiQuotaInfo';\n// import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\n// import {faArrowLeft, faXmark} from '@fortawesome/pro-regular-svg-icons';\nimport {RightSidebarV2} from './RightSidebar/v2-sidebar';\nimport {MainLoader} from '@/components/common-components/v2/MainLoader';\nimport {FREDDY_EVENT_SCA_ARTICLE_CREATED, triggerFreddySurvey} from '@/utils/scripts';\nimport {headerStore} from '@/store/storeCompTest';\nexport const PageEditor = observer(\n ({rootStore, isPublic}: { rootStore: RootStoreType; isPublic: boolean }) => {\n const {contentOptimizer, settings} = rootStore;\n const {currentPage, pages, aiOutline: {\n loadAiWriterHistory,\n refetchOneClickDraftResultForArticleCreation,\n }} = contentOptimizer;\n const {\n isUploading,\n isExportingPage,\n isExportingPageLoader,\n setIsPublic,\n // isOpenContentGeneratorDrawer,\n focusTermsClassNames,\n setFocusTermsClassNames,\n // setIsOpenContentGeneratorDrawer,\n setSideBarWidth,\n setViewers,\n viewers,\n isSideBarHidden,\n isInitialEditorStateFetched,\n content,\n editTitle,\n highlights,\n } = currentPage;\n const {aiInProgress} = content;\n const {\n customer: {\n profile: {\n id,\n emailAddress,\n },\n getCustomerQuota,\n },\n } = settings;\n const resultId = contentOptimizer.aiOutline.id;\n\n const {contentOptimizer: {\n currentPage: {\n feTargetKeywords,\n isLinkActive,\n },\n aiMetaData: {\n loadAiMetaData,\n metaData,\n },\n }} = useStore('');\n\n useEffect(() => {\n if (pages?.count === 2) {\n triggerFreddySurvey(id, emailAddress, FREDDY_EVENT_SCA_ARTICLE_CREATED);\n }\n }, [pages?.count]);\n\n // const {setShowOutlinesInDrawer, v2AiOutline, showOutlinesInDrawer} = aiOutline;\n // const [allRef, setAllRef] = useState\n\n\n {!currentPage.error ? (\n <>\n \n {!currentPage.isLinkActive && ((currentPage.newPage && currentPage.currentStep === 1) || <>\n
\n \n );\n },\n);\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"notification\":\"styles_notification__OR6ac\",\"contactLink\":\"styles_contactLink__dGgfv\",\"success\":\"styles_success__g7z1D\",\"info\":\"styles_info__efwL4\",\"warning\":\"styles_warning__TRTcI\",\"error\":\"styles_error__PUH5a\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"customInput\":\"style_customInput__xWOlg\",\"customSelect\":\"style_customSelect__5SwsV\",\"individualCustomSelect\":\"style_individualCustomSelect__WX92V\",\"customGeneralSelect\":\"style_customGeneralSelect__OeVke\",\"user\":\"style_user__wmBrz\",\"avatar\":\"style_avatar__mO1Yn\",\"info\":\"style_info__bJG8w\",\"email\":\"style_email__7HMCL\",\"permission\":\"style_permission__eKrIo\",\"shareModal\":\"style_shareModal__tgI8u\",\"icon\":\"style_icon__7Sv9l\",\"back\":\"style_back__XA9rM\",\"header\":\"style_header__P07YH\",\"users\":\"style_users__Xet9k\",\"input\":\"style_input__CbDPX\",\"permissions\":\"style_permissions__1_Cd5\",\"notification\":\"style_notification__69SZ_\",\"checkbox\":\"style_checkbox__HLruZ\",\"inputContainer\":\"style_inputContainer__5l1dT\",\"textarea\":\"style_textarea__lBED_\",\"dropdown\":\"style_dropdown__BLJU4\",\"hideDropdown\":\"style_hideDropdown__EAZwo\",\"cancelModalButton\":\"style_cancelModalButton__0Jn_a\",\"shareModalFooter\":\"style_shareModalFooter__c_I4D\",\"suggestion\":\"style_suggestion__sQOqS\",\"name\":\"style_name__YXf18\",\"subTitle\":\"style_subTitle__hpMvF\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__bvdyc\",\"popoverDivider\":\"style_popoverDivider__7kxDv\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__f7Uga\",\"contentIdeasTitle\":\"style_contentIdeasTitle__NFfEv\",\"descriptionText\":\"style_descriptionText__lFbSB\",\"input\":\"style_input__NVKIY\",\"inputLabel\":\"style_inputLabel__di3As\",\"countrySelector\":\"style_countrySelector__RsNJa\",\"selectInput\":\"style_selectInput__bfqDn\",\"generateIdeasButton\":\"style_generateIdeasButton__wefT5\",\"generatedItemsNumb\":\"style_generatedItemsNumb__oULgy\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__Um6PF\",\"ContentIdea\":\"style_ContentIdea___8T06\",\"controlButtons\":\"style_controlButtons__3DdPK\",\"downloadButton\":\"style_downloadButton__b7Dxj\",\"copyButton\":\"style_copyButton__DS99q\",\"refreshAiOutlineBtn\":\"style_refreshAiOutlineBtn__NfuS_\",\"unsplashContainer\":\"style_unsplashContainer__tKyCE\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"toolbar\":\"style_toolbar__Vwy8G\",\"leftSection\":\"style_leftSection__N1651\",\"rightSection\":\"style_rightSection__E_CRH\",\"share\":\"style_share__NTvX5\",\"robotIcon\":\"style_robotIcon__d_APK\",\"contentIdeasBtnLabel\":\"style_contentIdeasBtnLabel__4qIOI\",\"shareBtnLabel\":\"style_shareBtnLabel__o5HXJ\",\"undoBtn\":\"style_undoBtn__gR9Ad\",\"redoBtn\":\"style_redoBtn__oFeoL\",\"editor\":\"style_editor__Zg73v\",\"zoom05\":\"style_zoom05__1Dz2Y\",\"zoom075\":\"style_zoom075__JA_q0\",\"zoom09\":\"style_zoom09__pWjeK\",\"zoom1\":\"style_zoom1__2IWB9\",\"zoom12\":\"style_zoom12__O5tgJ\",\"zoom15\":\"style_zoom15__3U5We\",\"zoom2\":\"style_zoom2__RtpNm\",\"expandedEditor\":\"style_expandedEditor__6u5oc\",\"divider\":\"style_divider__Y6Ylq\",\"button\":\"style_button__UOe75\",\"expandBtn\":\"style_expandBtn__eggx8\",\"copyTooltip\":\"style_copyTooltip__S3tye\",\"writeForMeContainer\":\"style_writeForMeContainer__5aagG\",\"writeForMeFeatherIcon\":\"style_writeForMeFeatherIcon__yxu8G\",\"editorTopInfo\":\"style_editorTopInfo__xoncP\",\"leftEditorTopInfo\":\"style_leftEditorTopInfo__L9LlC\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__VSP5g\",\"button\":\"style_button__QUeN9\",\"active\":\"style_active__Fv0RE\",\"urlPopup\":\"style_urlPopup__D9ZJn\",\"inputContainer\":\"style_inputContainer__bm_d7\",\"textLabel\":\"style_textLabel__IaVSL\",\"urlInput\":\"style_urlInput__hn8MM\",\"inputControlls\":\"style_inputControlls__aQiLB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__62ic4\",\"button\":\"style_button__jl08j\",\"active\":\"style_active__7OpW7\",\"urlPopup\":\"style_urlPopup__QdWSN\",\"inputContainer\":\"style_inputContainer__cNQp7\",\"textLabel\":\"style_textLabel__XLCPG\",\"urlInput\":\"style_urlInput__g2XBm\",\"inputControlls\":\"style_inputControlls___Lrie\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__q5NYO\",\"button\":\"style_button__rOfd5\",\"active\":\"style_active__8ok_g\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__JEFtz\",\"button\":\"style_button__tWAPP\",\"active\":\"style_active__1Ub_o\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__vN_zL\",\"header-modal\":\"style_header-modal__zaVfr\",\"header-modal__option\":\"style_header-modal__option__uBrLT\",\"header-modal__selected\":\"style_header-modal__selected__HRX68\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__Y7Msi\",\"button\":\"style_button__qE27E\",\"active\":\"style_active__vcuPU\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7_9Fm\",\"button\":\"style_button__I4eBO\",\"active\":\"style_active__vWrUg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__F4Eq3\",\"button\":\"style_button__zXaNR\",\"active\":\"style_active__QB8X9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__7hrU8\",\"button\":\"style_button__lBpTe\",\"active\":\"style_active__Vy5N_\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"header-toolkit\":\"style_header-toolkit__ngc_6\",\"button\":\"style_button__bwqJh\",\"active\":\"style_active__pcv99\",\"urlPopup\":\"style_urlPopup__MeYFu\",\"inputContainer\":\"style_inputContainer__Yr1Ib\",\"textLabel\":\"style_textLabel__paAwp\",\"urlInput\":\"style_urlInput__u0l_s\",\"inputControlls\":\"style_inputControlls__GUFA1\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"button\":\"step-one_button__LmGnF\",\"purple\":\"step-one_purple__Dr_VM\",\"teal\":\"step-one_teal__pq6oT\",\"welcome\":\"step-one_welcome__uDuo3\",\"welcomeHeader\":\"step-one_welcomeHeader__qKSL7\",\"welcomeSubHeader\":\"step-one_welcomeSubHeader__yAtvD\",\"welcomeCards\":\"step-one_welcomeCards__lU5iT\",\"welcomeCard\":\"step-one_welcomeCard__K1Ils\",\"welcomeCardHeader\":\"step-one_welcomeCardHeader__YmBsP\",\"welcomeCardSubHeader\":\"step-one_welcomeCardSubHeader__v1GbY\",\"divider\":\"step-one_divider___K9R9\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"uploadForm\":\"styles_uploadForm__RQvO_\",\"urlinput\":\"styles_urlinput__NNaUR\",\"uploadBtn\":\"styles_uploadBtn__zNHxo\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"keywordContainer\":\"style_keywordContainer__vPXS3\",\"keywordEditIcons\":\"style_keywordEditIcons__3jaVk\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__S1Uen\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__zFqeU\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__5qWYw\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Fg9Sz\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__UBnRt\",\"keywordLocationIcon\":\"style_keywordLocationIcon__uVBJh\",\"showIcons\":\"style_showIcons__gIQdT\",\"keywordDetailsButtonContainer\":\"style_keywordDetailsButtonContainer__nKs7u\",\"keywordDetailsIcon\":\"style_keywordDetailsIcon__6AAJ0\",\"editKwButtonContainer\":\"style_editKwButtonContainer__437ne\",\"editKwButtonIcon\":\"style_editKwButtonIcon__7aEsS\",\"keywordName\":\"style_keywordName__KZoSi\",\"targetKwContainer\":\"style_targetKwContainer__W_edh\",\"keywordMetric\":\"style_keywordMetric__BgvpY\",\"keywordMetricContainer\":\"style_keywordMetricContainer__1Xtmz\",\"expandingContainer\":\"style_expandingContainer__Ty15F\",\"expandBtn\":\"style_expandBtn__bfM2c\",\"keywordsAndSuggestionsContainer\":\"style_keywordsAndSuggestionsContainer__WHZZr\",\"collapsed\":\"style_collapsed___mhNq\",\"targetKeywordsSectionContainer\":\"style_targetKeywordsSectionContainer__MA1nu\",\"expanded\":\"style_expanded__jeR4g\",\"targetKeywordsContainer\":\"style_targetKeywordsContainer__RASzp\",\"locationToggler\":\"style_locationToggler__pes3z\",\"targetKeywordsTitle\":\"style_targetKeywordsTitle__Xiu43\",\"selectRelatedKeywords\":\"style_selectRelatedKeywords__UsR3o\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__iu89Z\",\"suggestedKwSectionTitle\":\"style_suggestedKwSectionTitle__UtMLo\",\"targetKwLoadingMsg\":\"style_targetKwLoadingMsg__vEgdP\",\"kwSuggestionsContainer\":\"style_kwSuggestionsContainer__2wt_G\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__ACSfR\",\"singleSugestedKwInnerContainer\":\"style_singleSugestedKwInnerContainer__b0ror\",\"svAndCpc\":\"style_svAndCpc__c_8wW\",\"controllsBar\":\"style_controllsBar__ALl9x\",\"clickToAdd\":\"style_clickToAdd__xtgcn\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__80skR\",\"suggestedKwTitle\":\"style_suggestedKwTitle__9QaV3\",\"closeSuggestedKW\":\"style_closeSuggestedKW__330Se\",\"secondary-text\":\"style_secondary-text__emnsR\",\"keywords\":\"style_keywords__wjpPt\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__Lm1gP\",\"cpcMetricsProgressBar\":\"style_cpcMetricsProgressBar__LTmQK\",\"focusTermPopover\":\"style_focusTermPopover__pkvY4\",\"popoverTitle\":\"style_popoverTitle__pH9eH\",\"popoverCountrySv\":\"style_popoverCountrySv__3zElP\",\"sv\":\"style_sv__qOMD7\",\"emoji\":\"style_emoji__xv7Ls\",\"popOverTitle\":\"style_popOverTitle__v_wFU\",\"competitors\":\"style_competitors__YGYr0\",\"competitor\":\"style_competitor__GWmTF\",\"popoverDivider\":\"style_popoverDivider__XCRSU\",\"headingsPopover\":\"style_headingsPopover__jTD85\",\"headingTooltipValue\":\"style_headingTooltipValue__dRrjD\",\"countrySelectorPopover\":\"style_countrySelectorPopover__RhvA2\",\"divider\":\"style_divider__0ifEI\",\"columnTitlesRow\":\"style_columnTitlesRow__oKXV2\",\"columnTitle\":\"style_columnTitle__fLfkI\",\"defaultLocationName\":\"style_defaultLocationName__K60S8\",\"locationInfo\":\"style_locationInfo__DGWFc\",\"setAsDefaultText\":\"style_setAsDefaultText__q4qk_\",\"countryReach\":\"style_countryReach__5HPf_\",\"singleCountryRow\":\"style_singleCountryRow__6YTEm\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__lSqDc\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__OhW7Z\",\"newKwFormContainer\":\"style_newKwFormContainer__ysNll\",\"addNewKwBtn\":\"style_addNewKwBtn__aHUY2\",\"addKeywordStyle\":\"style_addKeywordStyle___NjDc\",\"plusIconStyle\":\"style_plusIconStyle__dmf5B\",\"disabledBtn\":\"style_disabledBtn__z9Cbs\",\"addNewKwForm\":\"style_addNewKwForm__5iXKx\",\"newKwInputControllsContainer\":\"style_newKwInputControllsContainer__Hc69J\",\"newKwInputContainer\":\"style_newKwInputContainer__bkNBM\",\"customInputField\":\"style_customInputField__g9Ppg\",\"addNewKwBtnLabel\":\"style_addNewKwBtnLabel__SWOIT\",\"quota\":\"style_quota__MfYRt\",\"quotaValues\":\"style_quotaValues__6t772\",\"plusIcon\":\"style_plusIcon__lL8Wh\",\"newEmphasizedFormStyle\":\"style_newEmphasizedFormStyle__xmFMZ\",\"pulse-purple\":\"style_pulse-purple__P7U1V\",\"newFormStyle\":\"style_newFormStyle__lqdiW\",\"editKwForm\":\"style_editKwForm__Q_jdR\",\"editKwInputContainer\":\"style_editKwInputContainer__WBOeM\",\"editKwControllsContainer\":\"style_editKwControllsContainer__D2l73\",\"populateButton\":\"style_populateButton__aGc27\",\"confirmButton\":\"style_confirmButton__DZXoJ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentOptimizerContainer\":\"bread-crumb_contentOptimizerContainer__rqiMo\",\"divider\":\"bread-crumb_divider__VKsLJ\",\"scrolledEditor\":\"bread-crumb_scrolledEditor__4iLHS\",\"contentOptimizerHeader\":\"bread-crumb_contentOptimizerHeader__mSsmj\",\"title\":\"bread-crumb_title__8VW90\",\"back\":\"bread-crumb_back__VYwHf\",\"share\":\"bread-crumb_share__7_i4v\",\"backWrapper\":\"bread-crumb_backWrapper__XPOW2\",\"headerExtra\":\"bread-crumb_headerExtra__lVFkV\",\"kebab\":\"bread-crumb_kebab__NIs_t\",\"kebabMenu\":\"bread-crumb_kebabMenu__oJYmb\",\"kebabMenuItem\":\"bread-crumb_kebabMenuItem__YYQHl\",\"redText\":\"bread-crumb_redText__WFg6A\",\"exportBtn\":\"bread-crumb_exportBtn__qzHGF\",\"modal\":\"bread-crumb_modal__QLBQN\",\"modalTitle\":\"bread-crumb_modalTitle__0lf8D\",\"websiteLabel\":\"bread-crumb_websiteLabel__uP_MN\",\"editContainer\":\"bread-crumb_editContainer__ok1vS\",\"btn\":\"bread-crumb_btn__lZxTx\",\"exportToPdfButton\":\"bread-crumb_exportToPdfButton__HCYl1\",\"exportToDocsButton\":\"bread-crumb_exportToDocsButton__dtrrC\",\"exportDropdown\":\"bread-crumb_exportDropdown__7llmi\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"headerKeywords\":\"styles_headerKeywords__xxGL0\",\"popoverDivider\":\"styles_popoverDivider__zaO9y\",\"draftToolkit\":\"styles_draftToolkit__n9jPZ\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"content-editor_container__QYw4p\",\"left-side\":\"content-editor_left-side__l1TXd\",\"pageEditorError\":\"content-editor_pageEditorError__H_8Vw\",\"headerKeywords\":\"content-editor_headerKeywords__Nu5m7\",\"popoverDivider\":\"content-editor_popoverDivider__m2Vuv\",\"draftToolkit\":\"content-editor_draftToolkit__jDD0p\",\"loaderSpinnerContainer\":\"content-editor_loaderSpinnerContainer__3w2sl\",\"loaderSpinner\":\"content-editor_loaderSpinner__IxzP_\",\"spin\":\"content-editor_spin__6tOJb\",\"selectionTooltip\":\"content-editor_selectionTooltip__Qo0Ri\",\"arrowBottom\":\"content-editor_arrowBottom__3KZVT\",\"textInputNotification\":\"content-editor_textInputNotification__lnemm\",\"contentGeneratorDrawer\":\"content-editor_contentGeneratorDrawer__XXSAo\",\"closeIcons\":\"content-editor_closeIcons__5_3Bw\",\"outlineDrawerBackArrow\":\"content-editor_outlineDrawerBackArrow__GwHmD\",\"contentGeneratorTitle\":\"content-editor_contentGeneratorTitle__Agz_h\",\"selectedTextInfoContainer\":\"content-editor_selectedTextInfoContainer__WRKBY\",\"dataAndIcon\":\"content-editor_dataAndIcon__6OcYR\",\"textAndUrl\":\"content-editor_textAndUrl__XUxuw\",\"text\":\"content-editor_text__21AKd\",\"url\":\"content-editor_url__v_O1a\",\"textUrlControlls\":\"content-editor_textUrlControlls__thYuv\",\"urlPopup\":\"content-editor_urlPopup__gHOHE\",\"inputContainer\":\"content-editor_inputContainer__Mb2tQ\",\"textLabel\":\"content-editor_textLabel__mnezc\",\"urlInput\":\"content-editor_urlInput__2P2Tu\",\"inputControlls\":\"content-editor_inputControlls__qFkMX\",\"linkSuggestionsPopover\":\"content-editor_linkSuggestionsPopover__FFCdv\",\"extensionButton\":\"content-editor_extensionButton__bBbw0\",\"iconButton\":\"content-editor_iconButton__Cfbam\",\"ctaTitle\":\"content-editor_ctaTitle__ssOd0\",\"extensionButtonStyle\":\"content-editor_extensionButtonStyle__PN0ie\",\"closeIcon\":\"content-editor_closeIcon__UKkJM\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"modal\":\"style_modal__rZesC\",\"tableOuterClusters\":\"style_tableOuterClusters__qcXJL\",\"roundEdgesTable\":\"style_roundEdgesTable__iZjyo\",\"ant-table-content\":\"style_ant-table-content__S_Fgs\",\"purpleRow\":\"style_purpleRow__bot_O\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"citationsContainer\":\"style_citationsContainer__oVqah\",\"citationsInnerContainer\":\"style_citationsInnerContainer__ZHHEU\",\"singleCitation\":\"style_singleCitation__qbxUz\",\"citationIcon\":\"style_citationIcon___x2Qc\",\"citationInfo\":\"style_citationInfo__tZ76P\",\"citationName\":\"style_citationName__pdvkB\",\"citationUrl\":\"style_citationUrl__RdI_o\",\"citationText\":\"style_citationText__BdN5t\",\"serpUsedByContainer\":\"style_serpUsedByContainer__azyj8\",\"citationSerpsContainer\":\"style_citationSerpsContainer__iipYx\",\"serpIcon\":\"style_serpIcon__w_LvR\",\"metaDescTooltip\":\"style_metaDescTooltip__nuDt4\",\"serpTooltip\":\"style_serpTooltip__QLWro\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__6RNd6\",\"serpTitle\":\"style_serpTitle__RXoga\",\"serpUrl\":\"style_serpUrl__tu4XQ\",\"emptyDataBox\":\"style_emptyDataBox__Mo6mN\",\"emptyImg\":\"style_emptyImg__9U7Nu\",\"emptyDataTitle\":\"style_emptyDataTitle__R5BVL\",\"subTitle\":\"style_subTitle__rYSu7\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"questionsContainer\":\"style_questionsContainer__yjLcX\",\"questionsInnerContainer\":\"style_questionsInnerContainer__2asTx\",\"questionsNameAndCopy\":\"style_questionsNameAndCopy__lm2Dj\",\"customQuestionsName\":\"style_customQuestionsName___Vs5R\",\"serpUsedByContainer\":\"style_serpUsedByContainer__AobiD\",\"citationSerpsContainer\":\"style_citationSerpsContainer__jAx_o\",\"serpIcon\":\"style_serpIcon__6QGH4\",\"emptyDataBox\":\"style_emptyDataBox__1nQ8c\",\"emptyImg\":\"style_emptyImg__3_6YA\",\"emptyDataTitle\":\"style_emptyDataTitle__ApBiU\",\"focusTermPopover\":\"style_focusTermPopover__eCy11\",\"popOverTitle\":\"style_popOverTitle__q_bNa\",\"popoverDivider\":\"style_popoverDivider__0eu5_\",\"copyTooltip\":\"style_copyTooltip__kgoSh\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__7gwcB\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__cm2nS\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__RT8Gn\",\"copyIcon\":\"style_copyIcon__j24nu\",\"totalQuestions\":\"style_totalQuestions__2A_bv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__zQsc0\",\"limitedAccess\":\"style_limitedAccess__B2vHw\",\"flexRow\":\"style_flexRow__R2pUv\",\"quota\":\"style_quota__iFHMf\",\"focusTermDropdown\":\"style_focusTermDropdown__L17PC\",\"scoreContainer\":\"style_scoreContainer__stcBp\",\"scoreDescription\":\"style_scoreDescription__QkW_1\",\"scoreDescTitle\":\"style_scoreDescTitle__qa_Kd\",\"scoreDescText\":\"style_scoreDescText__Hprrn\",\"speedIndexContainer\":\"style_speedIndexContainer__Dejs9\",\"speedIndexDot\":\"style_speedIndexDot__ykTus\",\"refecthButtonContainer\":\"style_refecthButtonContainer__NDBTa\",\"popoverInfoContainer\":\"style_popoverInfoContainer__jZwn6\",\"customSpinner\":\"style_customSpinner__I9jMh\",\"keywords\":\"style_keywords__VUAeg\",\"keywordMetric\":\"style_keywordMetric__jFkNF\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__nk_Rf\",\"viewers\":\"style_viewers__3GdID\",\"avatar\":\"style_avatar__nAZ3X\",\"progress\":\"style_progress__Emagh\",\"smallProgress\":\"style_smallProgress__b2LvX\",\"needHelp\":\"style_needHelp__pVjFU\",\"userIcon\":\"style_userIcon__X7Oyb\",\"readabilityLetter\":\"style_readabilityLetter__RlwFP\",\"readabilityAActive\":\"style_readabilityAActive__etxiG\",\"readabilityBActive\":\"style_readabilityBActive__1xJXN\",\"readabilityCActive\":\"style_readabilityCActive__u9Z0Q\",\"readabilityDActive\":\"style_readabilityDActive__xdRpu\",\"readabilityEActive\":\"style_readabilityEActive__VQ8_a\",\"readabilitySecondary\":\"style_readabilitySecondary__2EAQH\",\"focusTermsCollapse\":\"style_focusTermsCollapse__kVGtj\",\"header\":\"style_header__YUb4w\",\"number\":\"style_number__q8kh0\",\"expandedIcon\":\"style_expandedIcon__l8nCj\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin___4hbN\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__ePTwm\",\"focusTermContent\":\"style_focusTermContent__CK3KM\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__DQAwe\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__EA8m7\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__QpYDT\",\"copyIcon\":\"style_copyIcon__3wT4i\",\"focusTermAndTags\":\"style_focusTermAndTags__Kp9wt\",\"icon\":\"style_icon__moQAn\",\"focusTermName\":\"style_focusTermName__Ly6am\",\"foundInElement\":\"style_foundInElement__tEiL_\",\"customFocusTermName\":\"style_customFocusTermName__LzC2O\",\"brandedLabel\":\"style_brandedLabel__6T1gS\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__rwsPG\",\"focusTermUsageCount\":\"style_focusTermUsageCount__1j6I7\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__qBdnF\",\"removeFocusTerms\":\"style_removeFocusTerms__07IkA\",\"removeTermLabel\":\"style_removeTermLabel__VbKWK\",\"removeTermIcon\":\"style_removeTermIcon__cKkeI\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__u3c18\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__SLkEY\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__xzq3T\",\"writingStylePopover\":\"style_writingStylePopover__sHjLJ\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__iCD9H\",\"focusTermPopover\":\"style_focusTermPopover__FKP8t\",\"innerPopover\":\"style_innerPopover__UbNja\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__RFjzG\",\"withArrow\":\"style_withArrow__I_XFV\",\"popoverTitle\":\"style_popoverTitle__lUKZy\",\"popoverCountrySv\":\"style_popoverCountrySv__geNG6\",\"sv\":\"style_sv__kQDDv\",\"emoji\":\"style_emoji__YGsrS\",\"popOverTitle\":\"style_popOverTitle__ahuD1\",\"competitors\":\"style_competitors__hwtcD\",\"competitor\":\"style_competitor__IqYyC\",\"singleCompetitor\":\"style_singleCompetitor__FwGi3\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__4CKN9\",\"snippetsContainer\":\"style_snippetsContainer__ot3Ml\",\"singleSnippet\":\"style_singleSnippet__XCQdn\",\"popoverDivider\":\"style_popoverDivider__chO8P\",\"popOverTermsTitle\":\"style_popOverTermsTitle__NKa1t\",\"headingsPopover\":\"style_headingsPopover__hbinC\",\"headingTooltipValue\":\"style_headingTooltipValue__bTPOI\",\"collapseContainer\":\"style_collapseContainer__TNTaa\",\"collapsableContainer\":\"style_collapsableContainer__HGsnN\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__MGXVA\",\"collapseButton\":\"style_collapseButton__kR3ue\",\"commonPopover\":\"style_commonPopover__kfD05\",\"editKeywordsBtn\":\"style_editKeywordsBtn__IvUg6\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__b8_ix\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__lUYBT\",\"isKeywordRemoving\":\"style_isKeywordRemoving__0Y5Pv\",\"suggestedKwContainer\":\"style_suggestedKwContainer__IrJwP\",\"svAndCpc\":\"style_svAndCpc__eV3Ml\",\"clickToAdd\":\"style_clickToAdd__Rf3jy\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__e16rv\",\"closeSuggestedKW\":\"style_closeSuggestedKW__vmyEL\",\"cancelButton\":\"style_cancelButton__vFlju\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon__hp2tW\",\"keywordContainer\":\"style_keywordContainer__o4y1J\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__HyXGY\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__n0rhQ\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__0GIsE\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__Nbr1J\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__C4CXq\",\"keywordLocationIcon\":\"style_keywordLocationIcon__YjZTQ\",\"showIcons\":\"style_showIcons__PKtA1\",\"editKwButtonContainer\":\"style_editKwButtonContainer__5310p\",\"editKwButtonIcon\":\"style_editKwButtonIcon__09bVC\",\"keywordName\":\"style_keywordName__85ap5\",\"keywordMetricContainer\":\"style_keywordMetricContainer__0AxnT\",\"link\":\"style_link__vZDiF\",\"orderContentBtn\":\"style_orderContentBtn__uNKgi\",\"footerText\":\"style_footerText__iKsz1\",\"divider\":\"style_divider__mevUB\",\"viewSchemaBtn\":\"style_viewSchemaBtn__pU_vK\",\"tabs\":\"style_tabs__m6jOQ\",\"truncateText\":\"style_truncateText__hYHYr\",\"darkenTechnical\":\"style_darkenTechnical__gwrKF\",\"importUrlButton\":\"style_importUrlButton__KuVWa\",\"scoreDescHeader\":\"style_scoreDescHeader__hWDqY\",\"popOver\":\"style_popOver__f04Uy\",\"subtitle\":\"style_subtitle__OIvMk\",\"scrollBarSidebar\":\"style_scrollBarSidebar__Br9J8\",\"focusTermsExpanded\":\"style_focusTermsExpanded__6qt2U\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__9vao9\",\"selectContainer\":\"style_selectContainer___uIb5\",\"customSelectInput\":\"style_customSelectInput__eHqgt\",\"globeContainer\":\"style_globeContainer__63VkK\",\"globeIcon\":\"style_globeIcon__jyZcv\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__QGb2A\",\"countryInfo\":\"style_countryInfo__x__GX\",\"countrySearch\":\"style_countrySearch__BmySQ\",\"topDiv\":\"style_topDiv__wvomn\",\"locationArea\":\"style_locationArea__zWDch\",\"addKwBtnContainer\":\"style_addKwBtnContainer__FBfop\",\"tooltipInner\":\"style_tooltipInner___CBL_\",\"writingStyleContainer\":\"style_writingStyleContainer__keOla\",\"singleReadabilityItem\":\"style_singleReadabilityItem__Fe4pT\",\"activeReadabilityItem\":\"style_activeReadabilityItem__UpNZT\",\"prevReadabilityItem\":\"style_prevReadabilityItem__BGp7b\",\"nextReadabilityItem\":\"style_nextReadabilityItem__EGWMl\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__pUSoR\",\"addNewKwForm\":\"style_addNewKwForm__UIbcE\",\"populateButton\":\"style_populateButton__uUxBA\",\"customInputField\":\"style_customInputField__PqCdR\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs__e5i_W\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__ymRtc\",\"questionsTab\":\"style_questionsTab__BzJZ3\",\"countrySelectorPopover\":\"style_countrySelectorPopover__rkd0q\",\"columnTitlesRow\":\"style_columnTitlesRow__gDyYX\",\"columnTitle\":\"style_columnTitle__NsuCR\",\"defaultLocationName\":\"style_defaultLocationName__t5x2F\",\"locationInfo\":\"style_locationInfo__xzAIt\",\"setAsDefaultText\":\"style_setAsDefaultText__URXN3\",\"countryReach\":\"style_countryReach__Vqlx_\",\"singleCountryRow\":\"style_singleCountryRow__pNmS5\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__1cgyK\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__mvCk5\",\"copyTooltip\":\"style_copyTooltip__M8waz\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__RCmbz\",\"miniMetrics\":\"style_miniMetrics__uglSl\",\"miniMetricsLabel\":\"style_miniMetricsLabel__C7fe6\",\"miniMetricsValue\":\"style_miniMetricsValue__lweAH\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__L1MLr\",\"longLoadingBanner\":\"style_longLoadingBanner__n1_Co\",\"customSchemaBtn\":\"style_customSchemaBtn__L967y\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"linkToolTip\":\"style_linkToolTip__bhIce\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsContainer\":\"style_competitorsContainer__SfNOS\",\"competitorsInnerContainer\":\"style_competitorsInnerContainer___TbD7\",\"singleCompetitor\":\"style_singleCompetitor__U87HC\",\"competitorDetailsContainer\":\"style_competitorDetailsContainer__StWBo\",\"competitorPosition\":\"style_competitorPosition__M88ib\",\"competitorContentScore\":\"style_competitorContentScore__KDgTT\",\"competitorWordCount\":\"style_competitorWordCount__GBsaT\",\"splitter\":\"style_splitter__eGmIb\",\"progress\":\"style_progress__2Uzzo\",\"competitorIcon\":\"style_competitorIcon__FaDSp\",\"competitorInfo\":\"style_competitorInfo__V54hG\",\"competitorName\":\"style_competitorName__F92CB\",\"competitorUrl\":\"style_competitorUrl__s2401\",\"competitorText\":\"style_competitorText__Fzphu\",\"emptyDataBox\":\"style_emptyDataBox__4N8UY\",\"emptyImg\":\"style_emptyImg__CYXAU\",\"emptyDataTitle\":\"style_emptyDataTitle__Js1W9\",\"selectInput\":\"style_selectInput___gVgJ\",\"keywordChecked\":\"style_keywordChecked__C87zU\",\"ant-select\":\"style_ant-select__7CoFi\",\"ant-select-disabled\":\"style_ant-select-disabled__ju49Y\",\"ant-select-selector\":\"style_ant-select-selector__r_4up\",\"ant-select-single\":\"style_ant-select-single__R__La\",\"ant-select-customize-input\":\"style_ant-select-customize-input__4fC4G\",\"tooltipOverlay\":\"style_tooltipOverlay__6zcSe\",\"competitorTooltipUrl\":\"style_competitorTooltipUrl__U2ss8\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"analyticsCollapseCard\":\"style_analyticsCollapseCard__sEtSW\",\"expandIcon\":\"style_expandIcon__nKE6c\",\"header\":\"style_header__hnfX_\",\"headerRight\":\"style_headerRight__YroUz\",\"title\":\"style_title__ICalb\",\"divider\":\"style_divider__zJoLJ\",\"colTitle\":\"style_colTitle__nPW60\",\"pageText\":\"style_pageText__eXO_c\",\"analyticsHideArrow\":\"style_analyticsHideArrow__dF_7X\",\"paginationStyle\":\"style_paginationStyle__DHqNy\",\"singlePageBlur\":\"style_singlePageBlur__xKJPI\",\"filters\":\"style_filters__l5Lmi\",\"filtersText\":\"style_filtersText__Ri9O_\",\"filtersItems\":\"style_filtersItems__wtY3s\",\"chevron\":\"style_chevron__PPxCQ\",\"OptionContainer\":\"style_OptionContainer__9w4R7\",\"checkboxLabel\":\"style_checkboxLabel__mF6_s\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__DXBXv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorIcon\":\"style_competitorIcon__77Of4\",\"pageTitleUrl\":\"style_pageTitleUrl__l8xBO\",\"selectInput\":\"style_selectInput__bKQhM\",\"tableOuterPages\":\"style_tableOuterPages__AgusG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"tooltipOverlay\":\"style_tooltipOverlay__l3WUN\",\"truncate\":\"style_truncate__5_fss\",\"tabsContainer\":\"style_tabsContainer__UYJo0\",\"tooltipContent\":\"style_tooltipContent__yIv6r\",\"title\":\"style_title__vbncV\",\"stat\":\"style_stat__2U44j\",\"label\":\"style_label__oCj7Z\",\"value\":\"style_value__OatCd\",\"competingTermsDrawerStyle\":\"style_competingTermsDrawerStyle__98Cfv\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"selectInput\":\"style_selectInput__RDSGZ\",\"minified\":\"style_minified__rLAna\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"competitorsHeadingsDrawerStyle\":\"style_competitorsHeadingsDrawerStyle__ejLJA\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"contentIdeasDrawer\":\"style_contentIdeasDrawer__fymKP\",\"popoverDivider\":\"style_popoverDivider__TIZ7J\",\"contentIdeasDrawerContent\":\"style_contentIdeasDrawerContent__4jpzP\",\"contentIdeasTitle\":\"style_contentIdeasTitle__rDNWa\",\"descriptionText\":\"style_descriptionText__dkTjD\",\"input\":\"style_input__ULYYv\",\"inputLabel\":\"style_inputLabel__ItSkl\",\"countrySelector\":\"style_countrySelector__DElA_\",\"selectInput\":\"style_selectInput__bf__m\",\"generateIdeasButton\":\"style_generateIdeasButton__AqGzy\",\"generatedItemsNumb\":\"style_generatedItemsNumb__iz2UY\",\"ContentIdeaContainer\":\"style_ContentIdeaContainer__4mBeR\",\"ContentIdea\":\"style_ContentIdea__2PlUV\",\"controlButtons\":\"style_controlButtons__YpGL7\",\"downloadButton\":\"style_downloadButton__iWffV\",\"copyButton\":\"style_copyButton___gD7q\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"overViewContainer\":\"style_overViewContainer__gRQCk\",\"title\":\"style_title__HNTaD\",\"boldTitle\":\"style_boldTitle__6f4Ii\",\"searchVolume\":\"style_searchVolume__kmSSg\",\"commonCitations\":\"style_commonCitations__g_Ylt\",\"citationScroll\":\"style_citationScroll__spbFE\",\"singleCitation\":\"style_singleCitation__0mNxO\",\"citationIcon\":\"style_citationIcon__UfZKe\",\"citationInfo\":\"style_citationInfo__fh1eJ\",\"citationName\":\"style_citationName__0_jeb\",\"citationUrl\":\"style_citationUrl____8Xs\",\"citationText\":\"style_citationText__j1sAb\",\"serpUsedByContainer\":\"style_serpUsedByContainer__82DwT\",\"citationSerpsContainer\":\"style_citationSerpsContainer__8KMGG\",\"serpIcon\":\"style_serpIcon__2dcxZ\",\"serpTooltip\":\"style_serpTooltip__mFPIs\",\"citationSerpMetaDesc\":\"style_citationSerpMetaDesc__tXyUj\",\"serpTitle\":\"style_serpTitle__KxJsy\",\"serpUrl\":\"style_serpUrl__oCtSk\",\"rankingContainer\":\"style_rankingContainer__V9EQL\",\"statusBar\":\"style_statusBar__qUtAS\",\"barTitle\":\"style_barTitle__yUiCm\",\"barSubTitle\":\"style_barSubTitle__ltuLr\",\"createButton\":\"style_createButton__4IncC\",\"rankingTable\":\"style_rankingTable__hRQEi\",\"firstColumnText\":\"style_firstColumnText__WROJq\",\"progress\":\"style_progress__Ft_pg\",\"dot\":\"style_dot__n0CLC\",\"topCompetitorTable\":\"style_topCompetitorTable__StrGn\",\"td\":\"style_td__vaRRm\",\"th\":\"style_th__e9zfY\",\"similarKeywordsTable\":\"style_similarKeywordsTable__53Snx\",\"paginationContainer\":\"style_paginationContainer__jJX9i\",\"titleText\":\"style_titleText__Z96eD\",\"urlText\":\"style_urlText__Qo1bK\",\"competitorImg\":\"style_competitorImg__Ct7If\",\"topTagsContainer\":\"style_topTagsContainer__30JuF\",\"topTags\":\"style_topTags__lUSuL\",\"addToProjectBtnExpanded\":\"style_addToProjectBtnExpanded___r13i\",\"addToProjectBtn\":\"style_addToProjectBtn__t13df\",\"disabledBtn\":\"style_disabledBtn__iGVvR\",\"addedToProjectBtnExpanded\":\"style_addedToProjectBtnExpanded__y3OYB\",\"iconRemove\":\"style_iconRemove__r5k98\",\"iconAdded\":\"style_iconAdded__KtJk2\",\"addedToProjectBtn\":\"style_addedToProjectBtn__AQ2cX\",\"viewAllKWButton\":\"style_viewAllKWButton__mqQ1f\",\"tooltipOverlay\":\"style_tooltipOverlay__EQTVG\",\"truncate\":\"style_truncate___oeK6\",\"contentResearchDrawerStyle\":\"style_contentResearchDrawerStyle__zXIxG\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"flexCol\":\"style_flexCol__V9bN1\",\"limitedAccess\":\"style_limitedAccess__9hmvs\",\"flexRow\":\"style_flexRow__TypB_\",\"quota\":\"style_quota__rhh52\",\"focusTermDropdown\":\"style_focusTermDropdown__AOpQn\",\"scoreContainer\":\"style_scoreContainer__loUPZ\",\"scoreDescription\":\"style_scoreDescription__fydWp\",\"scoreDescTitle\":\"style_scoreDescTitle__N5Fq9\",\"scoreDescText\":\"style_scoreDescText__49I_N\",\"speedIndexContainer\":\"style_speedIndexContainer__hpZ7E\",\"speedIndexDot\":\"style_speedIndexDot__XHb3w\",\"refecthButtonContainer\":\"style_refecthButtonContainer__jX7gt\",\"popoverInfoContainer\":\"style_popoverInfoContainer__zv0v3\",\"customSpinner\":\"style_customSpinner___6GwX\",\"keywords\":\"style_keywords__fho0v\",\"keywordMetric\":\"style_keywordMetric__8JKbU\",\"keywordMetricProgressBar\":\"style_keywordMetricProgressBar__UMcSb\",\"viewers\":\"style_viewers__L2oXV\",\"avatar\":\"style_avatar__fZe_c\",\"progress\":\"style_progress__JMqDz\",\"smallProgress\":\"style_smallProgress__gDgKa\",\"needHelp\":\"style_needHelp__wFCHN\",\"userIcon\":\"style_userIcon__ByzNC\",\"readabilityLetter\":\"style_readabilityLetter__hQD0j\",\"readabilityAActive\":\"style_readabilityAActive__X2_dk\",\"readabilityBActive\":\"style_readabilityBActive__fAWmd\",\"readabilityCActive\":\"style_readabilityCActive__i1lv3\",\"readabilityDActive\":\"style_readabilityDActive__VivCX\",\"readabilityEActive\":\"style_readabilityEActive__H5ftS\",\"readabilitySecondary\":\"style_readabilitySecondary__QWVvd\",\"focusTermsCollapse\":\"style_focusTermsCollapse__UdsfG\",\"header\":\"style_header__PDtnu\",\"number\":\"style_number__G29Vf\",\"expandedIcon\":\"style_expandedIcon__VyaR6\",\"analyticsCollapseCardMargin\":\"style_analyticsCollapseCardMargin__fA2SL\",\"analyticsCollapseMarginTop\":\"style_analyticsCollapseMarginTop__PWpsl\",\"focusTermContent\":\"style_focusTermContent__erOS3\",\"focusTermAndProgressContainer\":\"style_focusTermAndProgressContainer__ih_4n\",\"focusTermNameAndCopy\":\"style_focusTermNameAndCopy__lXX3f\",\"includeMoreSingleTerm\":\"style_includeMoreSingleTerm__uE5uE\",\"copyIcon\":\"style_copyIcon__Yl1p4\",\"focusTermAndTags\":\"style_focusTermAndTags__e71fF\",\"icon\":\"style_icon__SlMha\",\"focusTermName\":\"style_focusTermName__2byG0\",\"foundInElement\":\"style_foundInElement__W0Nx4\",\"customFocusTermName\":\"style_customFocusTermName__Ms_Z_\",\"brandedLabel\":\"style_brandedLabel__RK_ob\",\"iconAndRemoveBtnContainer\":\"style_iconAndRemoveBtnContainer__z9yEJ\",\"focusTermUsageCount\":\"style_focusTermUsageCount__2P6MT\",\"reduceUsageFocusTerms\":\"style_reduceUsageFocusTerms__pHGc3\",\"removeFocusTerms\":\"style_removeFocusTerms__ERiTh\",\"removeTermLabel\":\"style_removeTermLabel__Hngc_\",\"removeTermIcon\":\"style_removeTermIcon__M1_JE\",\"checkOutlinedRemove\":\"style_checkOutlinedRemove__Oa1Mz\",\"focusTermUsageCountSca\":\"style_focusTermUsageCountSca__DyVeh\",\"focusTermsUsedIn\":\"style_focusTermsUsedIn__glCbD\",\"writingStylePopover\":\"style_writingStylePopover__C3ut3\",\"writingStylePopoverContent\":\"style_writingStylePopoverContent__5vHOV\",\"focusTermPopover\":\"style_focusTermPopover__VnTU3\",\"innerPopover\":\"style_innerPopover__lSYg1\",\"innerSingleCompetitorUrl\":\"style_innerSingleCompetitorUrl__24Dg6\",\"withArrow\":\"style_withArrow__5GtWL\",\"popoverTitle\":\"style_popoverTitle__ExoBo\",\"popoverCountrySv\":\"style_popoverCountrySv__XjYX9\",\"sv\":\"style_sv__uUHFn\",\"emoji\":\"style_emoji__YIvMa\",\"popOverTitle\":\"style_popOverTitle__QEfN0\",\"competitors\":\"style_competitors___oTWx\",\"competitor\":\"style_competitor__xaN9N\",\"singleCompetitor\":\"style_singleCompetitor__y4FaW\",\"singleCompetitorUrl\":\"style_singleCompetitorUrl__IGy_S\",\"snippetsContainer\":\"style_snippetsContainer__ujuID\",\"singleSnippet\":\"style_singleSnippet__VPWpj\",\"popoverDivider\":\"style_popoverDivider__boUZ7\",\"headingsPopover\":\"style_headingsPopover__y8sGr\",\"headingTooltipValue\":\"style_headingTooltipValue__fgpE6\",\"collapseContainer\":\"style_collapseContainer__pts2d\",\"collapsableContainer\":\"style_collapsableContainer__H44WO\",\"colaapseButtonArrow\":\"style_colaapseButtonArrow__88ikQ\",\"collapseButton\":\"style_collapseButton__so3g3\",\"commonPopover\":\"style_commonPopover__GswDO\",\"editKeywordsBtn\":\"style_editKeywordsBtn__u6kSF\",\"keywordSuggestionsContainer\":\"style_keywordSuggestionsContainer__NVC47\",\"singleSuggestedKwContainer\":\"style_singleSuggestedKwContainer__PZNMQ\",\"isKeywordRemoving\":\"style_isKeywordRemoving__juQLI\",\"suggestedKwContainer\":\"style_suggestedKwContainer__szYtD\",\"svAndCpc\":\"style_svAndCpc__KtqVX\",\"clickToAdd\":\"style_clickToAdd__GtPlI\",\"suggestedKWTitleContainer\":\"style_suggestedKWTitleContainer__uAxIa\",\"closeSuggestedKW\":\"style_closeSuggestedKW__g89NG\",\"cancelButton\":\"style_cancelButton__CSqoR\",\"addNewKeywordLocationIcon\":\"style_addNewKeywordLocationIcon___PuoH\",\"keywordContainer\":\"style_keywordContainer__4fdS3\",\"keywordContainerTitleContainer\":\"style_keywordContainerTitleContainer__2uDTM\",\"keywordDrawerIcon\":\"style_keywordDrawerIcon__Num0E\",\"removeKwButtonContainer\":\"style_removeKwButtonContainer__Qqz06\",\"removeKwButtonIcon\":\"style_removeKwButtonIcon__aT7_s\",\"keywordLocationIconContainer\":\"style_keywordLocationIconContainer__ceI0z\",\"keywordLocationIcon\":\"style_keywordLocationIcon__eF4lH\",\"showIcons\":\"style_showIcons__iTCoZ\",\"editKwButtonContainer\":\"style_editKwButtonContainer__saLfy\",\"editKwButtonIcon\":\"style_editKwButtonIcon__gMi05\",\"keywordName\":\"style_keywordName__q2NAW\",\"keywordMetricContainer\":\"style_keywordMetricContainer___q6X_\",\"link\":\"style_link__01A4S\",\"orderContentBtn\":\"style_orderContentBtn__DE32O\",\"footerText\":\"style_footerText__s81Rx\",\"divider\":\"style_divider__kuakJ\",\"viewSchemaBtn\":\"style_viewSchemaBtn__4XAB1\",\"tabs\":\"style_tabs__yKF1D\",\"truncateText\":\"style_truncateText__uv_Dk\",\"darkenTechnical\":\"style_darkenTechnical__xbbue\",\"importUrlButton\":\"style_importUrlButton__gFSge\",\"scoreDescHeader\":\"style_scoreDescHeader__jw8OS\",\"popOver\":\"style_popOver__TgfyK\",\"subtitle\":\"style_subtitle__py_8r\",\"scrollBarSidebar\":\"style_scrollBarSidebar__7vCov\",\"focusTermsExpanded\":\"style_focusTermsExpanded__K1IrF\",\"technicalPropgressInfoContainer\":\"style_technicalPropgressInfoContainer__gHhKR\",\"selectContainer\":\"style_selectContainer__dc_Qg\",\"customSelectInput\":\"style_customSelectInput__4LY7U\",\"globeContainer\":\"style_globeContainer__wDM6e\",\"globeIcon\":\"style_globeIcon__Grl8C\",\"PropertyDropDownCountries\":\"style_PropertyDropDownCountries__a4Cas\",\"countryInfo\":\"style_countryInfo__fnbn7\",\"countrySearch\":\"style_countrySearch__67Vea\",\"topDiv\":\"style_topDiv__VdAWB\",\"locationArea\":\"style_locationArea__aoXon\",\"addKwBtnContainer\":\"style_addKwBtnContainer__fZ77F\",\"tooltipInner\":\"style_tooltipInner__vtG3X\",\"writingStyleContainer\":\"style_writingStyleContainer___9YQW\",\"singleReadabilityItem\":\"style_singleReadabilityItem__eEjir\",\"activeReadabilityItem\":\"style_activeReadabilityItem__wuJaK\",\"prevReadabilityItem\":\"style_prevReadabilityItem__Tp5ZP\",\"nextReadabilityItem\":\"style_nextReadabilityItem__bvcj1\",\"writingStyleLevelContainer\":\"style_writingStyleLevelContainer__q2__N\",\"addNewKwForm\":\"style_addNewKwForm__RKuU2\",\"populateButton\":\"style_populateButton__GrfTY\",\"customInputField\":\"style_customInputField__zvN4C\",\"customFocusTermsTabs\":\"style_customFocusTermsTabs___0OIs\",\"focusTermsTabTitleValue\":\"style_focusTermsTabTitleValue__Gd2PJ\",\"questionsTab\":\"style_questionsTab__dppHa\",\"countrySelectorPopover\":\"style_countrySelectorPopover__T8e40\",\"columnTitlesRow\":\"style_columnTitlesRow__NMSYq\",\"columnTitle\":\"style_columnTitle__7VIWu\",\"defaultLocationName\":\"style_defaultLocationName__F5x15\",\"locationInfo\":\"style_locationInfo__NpXoS\",\"setAsDefaultText\":\"style_setAsDefaultText__cnlk2\",\"countryReach\":\"style_countryReach__pE0aL\",\"singleCountryRow\":\"style_singleCountryRow__pUxir\",\"singleCountryRowSelected\":\"style_singleCountryRowSelected__3i839\",\"isEditDefaultLocation\":\"style_isEditDefaultLocation__qu_SS\",\"copyTooltip\":\"style_copyTooltip__3916s\",\"miniMainmetricsBar\":\"style_miniMainmetricsBar__pm0sj\",\"miniMetrics\":\"style_miniMetrics__zV6fP\",\"miniMetricsLabel\":\"style_miniMetricsLabel__EtBkz\",\"miniMetricsValue\":\"style_miniMetricsValue__TOlMK\",\"longLoadingBannerContainer\":\"style_longLoadingBannerContainer__kw3Fc\",\"longLoadingBanner\":\"style_longLoadingBanner__Xqc_5\",\"customSchemaBtn\":\"style_customSchemaBtn__R0sVb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"sidebarError\":\"error_sidebarError__2cjOS\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"resize\":\"v2-sidebar_resize__QB3FU\",\"sidebar\":\"v2-sidebar_sidebar__q6cEA\",\"ant-typography\":\"v2-sidebar_ant-typography__ta5hf\",\"title\":\"v2-sidebar_title__OlAx5\",\"subTitle\":\"v2-sidebar_subTitle__LhneY\",\"secondary-text\":\"v2-sidebar_secondary-text__4LWw2\",\"divider\":\"v2-sidebar_divider__9z9OB\",\"link\":\"v2-sidebar_link___z0EU\",\"fullWidth\":\"v2-sidebar_fullWidth__k3Ujx\",\"back\":\"v2-sidebar_back__FYZmn\",\"close\":\"v2-sidebar_close__0lvVI\",\"edit\":\"v2-sidebar_edit__YifNd\",\"green\":\"v2-sidebar_green__KFjaa\",\"orange\":\"v2-sidebar_orange__cSWrx\",\"red\":\"v2-sidebar_red__JmlMA\",\"disable\":\"v2-sidebar_disable__nfA52\",\"upgradeCard\":\"v2-sidebar_upgradeCard__c27O9\",\"upgradeCardTitle\":\"v2-sidebar_upgradeCardTitle__HzPcb\",\"fullAccess\":\"v2-sidebar_fullAccess__tvMBu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"styles_container__NBfKV\",\"left-side\":\"styles_left-side__LpfI5\",\"pageEditorError\":\"styles_pageEditorError__I7i3p\",\"headerKeywords\":\"styles_headerKeywords__2WBVR\",\"popoverDivider\":\"styles_popoverDivider__1cFJJ\",\"draftToolkit\":\"styles_draftToolkit__UgO6K\",\"loaderSpinnerContainer\":\"styles_loaderSpinnerContainer__unc8w\",\"loaderSpinner\":\"styles_loaderSpinner__qi_LK\",\"spin\":\"styles_spin__YiR1L\",\"selectionTooltip\":\"styles_selectionTooltip__DsvgJ\",\"arrowBottom\":\"styles_arrowBottom__usbcz\",\"textInputNotification\":\"styles_textInputNotification__5FRSY\",\"contentGeneratorDrawer\":\"styles_contentGeneratorDrawer__T7pXe\",\"closeIcons\":\"styles_closeIcons__8uuC5\",\"outlineDrawerBackArrow\":\"styles_outlineDrawerBackArrow__mEByX\",\"contentGeneratorTitle\":\"styles_contentGeneratorTitle__fm_kc\",\"selectedTextInfoContainer\":\"styles_selectedTextInfoContainer__lwCTc\",\"dataAndIcon\":\"styles_dataAndIcon__NAyfz\",\"textAndUrl\":\"styles_textAndUrl__cOjPy\",\"text\":\"styles_text__TfrwZ\",\"url\":\"styles_url__p8_St\",\"textUrlControlls\":\"styles_textUrlControlls__L9_rW\",\"urlPopup\":\"styles_urlPopup__3ZEur\",\"inputContainer\":\"styles_inputContainer__ACZFh\",\"textLabel\":\"styles_textLabel__yKZPz\",\"urlInput\":\"styles_urlInput__DVTni\",\"inputControlls\":\"styles_inputControlls__Ynfjt\",\"linkSuggestionsPopover\":\"styles_linkSuggestionsPopover__2c_Jo\"};"],"names":["notificationType","Notification","type","text","showContactSupportLink","param","settings","customer","isGHLAccount","useStore","openLiveChat","chatBtn","document","querySelector","click","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","jsxs","div","className","classnames","styles","jsx","NextImg","src","span","onClick","CaAiQuotaInfo","observer","quotaUtilization","mode","size","customLabel","isMinified","colorSetup","useState","dark","textColor","light","gray","sizeSetup","small","fontSize","normal","profile","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__","Wrapper","Label","ca","allowedAiContentGeneration","consumed","total","styled","_templateObject","p","_templateObject1","VideoPlayerModal","iconPath","title","subTitle","button1","videoLink","button2","FontAwesomeIcon","icon","faCheck","style","marginRight","buttonMinimize","onClickButton1","onClickButton2","button3","onClickButton3","home","videoPlayerModal","setVideoPlayerModal","minimized","setMinimized","Fragment","ModalStyled","destroyOnClose","width","display","alignSelf","visible","onClose","maskStyle","background","justifyContent","marginBottom","TitleText","SubTitleText","Button","color","variant","faArrowDownLeftAndArrowUpRightToCenter","iframe","height","frameBorder","allow","allowFullScreen","borderRadius","SmallPopupStyled","position","CloseOutlinedStyled","faArrowUpRightAndArrowDownLeftFromCenter","Modal","_templateObject3","_templateObject4","Table","props","block","blockProps","editor","getData","get","target","concat","createPortal","jsx_runtime","EditorBlock","data","tableKey","tableShape","colgroup","isArray","table","borderCollapse","margin","id","dangerouslySetInnerHTML","__html","tbody","map","row","i","tr","cell","j","element","th","border","padding","backgroundColor","textAlign","colSpan","colspan","rowSpan","rowspan","data-position","defaultValue","td","BlockImage","image","useRef","contentState","content","alt","getEntityAt","getEntity","widthImg","includes","heightImg","ref","iframeRegex","test","srcMatch","match","widthMatch","heightMatch","titleMatch","urlPattern","referrerPolicy","getNumberFromEnglishCounting","WriteForMe","htmlToDraft","contentOptimizer","currentPage","contentFragment","getCustomerQuota","isFullBtn","setIsFullBtn","currentEditorState","focusTermsClassNames","isSideBarHidden","antIcon","LoadingOutlined","spin","antIconLarge","useEffect","preventingDefaultMenu","e","stopPropagation","querySelectorAll","forEach","elem","addEventListener","removeEventListener","setTimeout","editorWrapperElem","getElementById","editorElem","clientWidth","offsetWidth","getEditorRealMargin","window","debouncedChange","debounce","state","focusTerms","isNewDecorations","editContent","debouncedUpdate","useCallback","getSelection","editorState","insertText","isBlock","firstNewBlockId","contentBlocks","entityMap","fragment","html","selection","newSelection","SelectionState","anchorKey","getKey","anchorOffset","getText","length","focusKey","focusOffset","getAnchorKey","getEndOffset","ContentState","createFromBlockArray","getBlockMap","nonStyledState","Modifier","replaceWithFragment","getCurrentContent","currentBlock","nextBlock","getBlockAfter","existingNodes","getAttribute","updatedState","EditorState","push","setCurrentEditorState","setAiTooltip","show","newTextElems","classList","add","analytics","remove","getParams","currentContent","fetchAndInsertText","action","selectedText","start","getAnchorOffset","getFocusOffset","end","getBlockForKey","isCollapsed","slice","fetchFragment","aiTooltip","Promise","reject","isTextSelected","isEmptyContent","Container","Tooltip","WriteForMeStyled","cursor","fragmentLoading","Spin","marginTop","indicator","faFeather","WriteForMeMiniStyled","BasedOn","isSelection","UsedQuota","used","_templateObject2","CustomBlock","blockRef","Option","Select","isOpen","setIsOpen","require","typesMap","hotKeysLabelMap","blockType","getType","dropdownRef","handleClickOutside","event","current","contains","onEditorChange","prevSelection","prevEditorState","forceSelection","BlockContainer","blockHeight","offsetHeight","topOffset","writeForMeTopOffset","isScaPublicPage","DropdownContainer","onContextMenu","currentValue","open","onChange","value","hasFocus","isBackward","newEditorState","RichUtils","toggleBlockType","dropdownStyle","dropdownMatchSelectWidth","suffixIcon","faCaretDown","Object","keys","idx","CustomBlock_templateObject","CustomBlock_templateObject1","Input","CommonInput","UploadFromUrlForm","store","form","Form","useForm","t","useTranslation","onUploadHandler","url","setIsCreateFromUrl","uploadFromUrl","updateContentLoadedAt","setCurrentStep","initialValues","onFinish","Item","name","rules","required","message","validator","_","isURL","require_protocol","resolve","inputType","placeholder","buttonType","loading","isUploading","Step1","setIsCreateFromScratch","setIsFirstArticleEdit","router","useRouter","onStartFromScratchClick","setIsFetchingTargetKw","analysis","clearUrl","createWithContent","createFromText","routes","landingPageOptimizer","query","uuid","undefined","shallow","br","Welcome","currentStep","styleMap","ContentEditor","getEditorState","showAiBanner","editorContainer","heroSection","lastScrollPosition","setLastScrollPosition","addHeroImageLoading","setAddHeroImageLoading","localStorage","setItem","aiOutline","aiMetaData","pages","getHeroImageById","clearFocusTermsClusters","getCurrentEditorState","zoomLevel","newPage","clearFeTargetKeywords","clearTargetKeywords","isInitialEditorStateFetched","setIsEditorScrolled","isEditorScrolled","setFocusTermsSorter","resetRepollCounters","clearAllTaData","setIsUnspashDrawerOpen","updateHeroImage","isHeroImageLoading","setContentType","clearAiOutline","isOpenAiOutlineDrawer","setIsOpenAiOutlineDrawer","clearV2AiOutline","setIsOpenAiContentToolsDrawer","clearTemplateOutlines","clearTemplates","setIsOpenAiWriterDrawer","clearOneClickIdea","clearOneClickOutlines","setAiWriter","aiWriterController","setAiTemplate","aiTemplatesController","clearMetaData","navBar","setIsDockedSider","heroImage","aiInProgress","setHeroImage","heroImageAltText","antIconOrange","windowHeight","innerHeight","showForm","label","key","removeSizeDataFromBlock","delete","set","blockMap","handleTabInTable","direction","collapsed","targetKey","targetBlock","getBlockBefore","merge","getLength","splitBlock","getLastBlock","createEmpty","setBlockType","isTargetTable","endOffset","setSelectionIfNone","getHasFocus","moveSelectionToStart","toggleInlineStyle","inlineStyle","customStyleMap","existingMatch","getCurrentInlineStyle","filter","split","toList","kebabCase","endsWith","rexp","RegExp","newString","replace","toggleListType","listType","getCurrentBlockType","handleDeleteKey","startBlock","getStartKey","endBlock","getEndKey","handleKeypressWhenSelectionNotCollapsed","toggleBlockData","newData","selectionState","newContentState","setBlockData","setIndent","listMax","indentMax","setDepth","adjustment","startKey","endKey","blocks","toSeq","skipUntil","k","takeUntil","depth","getDepth","maxDepth","newDepth","Math","max","min","selectionBefore","selectionAfter","isEditorFocus","focus","setIsEditorFocus","oneClick","getSingleUrlParam","writeWithAi","onEditorBlockTypeChange","getCurrentBlock","blockKey","currentSelection","handleChangeBlockType","keysMap","curPressKeys","checkKey","preventDefault","keyCode","multipleExist","keysArray","every","clearPressKeysArr","checkTitle","titleArray","handleAddHeroImage","targetKeywordsCount","cleanedHtml","res","loadPage","notification","error","warning","scrollTo","top","addHtmlToDocument","newHtml","hasText","reset","convertHtmlToEditorState","newBlockMap","newContent","currentEditor","blur","chars","prevBlock","firstCell","getStartOffset","firstTableKey","lastCell","lastTableKey","sameTable","startOffset","v","toOrderedMap","has","genKey","ContentBlock","Map","firstBlock","removeRange","first","butLast","subSelection","notLastTable","notFirstTable","notTable","separatorBlock","notTableStart","find","selectionKey","handlePastedText","pastedHtml","replaceText","moveFocusToEnd","getFirstBlock","blockRendererFn","contentBlock","component","editable","templateUsed","templateIcon","templateName","templateDesc","isStandaloneTool","toJS","isUseMask","onScroll","scrollTop","classNames","isExportingPage","getZoomLevel","editorHeightOffset","breadcrumbHeight","keywordsHeight","opaqueColor","alignItems","boxShadow","faBrainCircuit","fontWeight","marginLeft","faArrowRight","HeroImageWrapper","SkeletonRingLoader","HeroSection","HeroImage","ButtonsContainer","getPopupContainer","trigger","ButtonWrapper","faArrowsRotate","faICursor","faTrash","AiBanner","shouldPopulatePageHtml","Editor","editorKey","draftEditorState","scrollY","blockStyleFn","handleKeyCommand","command","offset","blockBefore","currentBlockType","acceptSelection","onBackspace","getFocusKey","float","keyBindingFn","KeyBindingUtil","hasCommandModifier","getDefaultKeyBinding","content_editor_templateObject","content_editor_templateObject1","content_editor_templateObject2","img","content_editor_templateObject3","content_editor_templateObject4","_templateObject5","User","avatar","email","isOwner","permission","onPermissionChange","activePermission","setActivePermission","Avatar","CaretDownFilled","share_modal_Option","ShareModal","pagePermissions","shareDialog","setEmail","setPermission","globalPermission","setGlobalPermission","isEditableByAnyone","handleGlobalPermissionsUpdate","location","existingPermission","existingViewPermission","isViewableByAnyone","navigator","clipboard","writeText","href","success","editPagePermissions","closeDialog","MixPanel","track","SCA_PAGE_SHARED","handleInviteUser","closeAfterSubmit","emails","warn","closable","closeIcon","faXmark","bodyStyle","Title","Head","InputContainer","V2Button","disabled","emailReg","EmailError","Body","ul","li","createdByUser","users","sort","user","toLowerCase","Divider","Footer","GrayButton","paddingBottom","paddingTop","share_modal_templateObject1","share_modal_templateObject2","share_modal_templateObject3","share_modal_templateObject4","share_modal_templateObject5","_templateObject6","_templateObject7","AiTooltip","activeOption","setActiveOption","urlCopy","setUrlCopy","setIsCopy","onLinkRemove","updatedSelection","toggleLink","sendTextToEditor","insertLinkToText","decorator","createCompositeDecorators","formatUrl","urlValue","entityKey","newContentWithEntity","createEntity","getLastCreatedEntityKey","newNewContent","textValue","withLinkText","withProperCursor","getSelectionAfter","isLinkEdit","bottom","left","onMouseDown","flexDirection","ButtonV2","paddingLeft","faEarthAmerica","faPen","isLink","faLinkSimpleSlash","word","faCopy","internalLinkSuggestions","link","keyword","trim","Popover","placement","overlayClassName","overlayStyle","SuggestionsContainerTitle","faCircleInfo","SuggestionsTitle","results","suggestion","SingleLinkContainer","Left","Link","Right","isUsed","SuggestionsMenuItem","faLink","faAngleRight","AiTooltip_templateObject","AiTooltip_templateObject1","AiTooltip_templateObject2","AiTooltip_templateObject3","AiTooltip_templateObject4","AiTooltip_templateObject5","AiTooltip_templateObject6","a","AiTooltip_templateObject7","Unsplash","contentType","UNSPLASH_ACCESS_KEY","UnsplashReact","namedExports","searchInput","onAddImage","imageUrl","onImageUpload","insertImage","accessKey","Uploader","withDefaultProps","InsertIntoApplicationUploader","onFinishedUploading","FreeStockTab","gap","Radio","RadioStyled","ImageComponent","setImagesList","historyCopyStatus","setShowSelectedHistoryImage","setShowHistoryImage","rootElement","setImagesAddedCount","imagesAddedCount","elemIdx","setElemIdx","imagesLoadedCount","setImagesLoadedCount","setShowAddHeroCheck","setShowAddToArticleCheck","setShowCopiedCheck","showAddHeroCheck","showAddToArticleCheck","showCopiedCheck","templatesHistory","currentElement","IntersectionObserver","entries","entry","intersectionRatio","unobserve","imagesLoading","item","imageList","images","root","threshold","observe","handleHistoryImageCopyClick","execCommand","result","inputs","fieldValue","selectedHistoryImageAdd","index","imgOnLoad","onMouseLeave","Col","onMouseOver","ColCardContainer","hide","ColCardImage","String","onLoad","button","copyIconWhite","viewImageCheck2","imageComponent_templateObject","imageComponent_templateObject1","ImageListComponent","buttonTitle","dummyImages","imagesDummy","setImagesDummy","imagesList","Row","gutter","overflow","maxHeight","val","CardStyle","load","Card","AICreateImagesTab","activeTab","isUnsplashDrawerOpen","setHistoryCopyStatus","aspectRatio","setAspectRatio","imagesAspectRatio","setImagesAspectRatio","isRealistic","setIsRealistic","loadAiTemplateOutlinesHistory","loadAiGeneratedImage","setDummyImages","setImageGenerateInputValue","imageGenerateInputValue","historyLoading","setCopyStatus","projects","setShowScaTopUpModal","isWhitelabel","isAllowedAiContentGenerationQuotaLimitReached","plans","showSidebarPaymentDrawer","setButtonTitle","showError","setShowError","showSelectedHistoryImage","showHistoryImage","selectSuffixIcon","filteredObj","projectId","defaultAiSettings","onGenerateBtnClick","subtitle","QuotaWrapper","QuotaInfoDetail","consumedData","totalData","heading","description","ctaLabel","showCta","customCta","isCenter","InputWrapper","CommonInputStyled","onFocus","whiteSpace","SettingContainer","SelectContainer","OptionLabel","SelectStyled","grayBackground","aspectRatioOptions","Checkbox","autoFocus","defaultChecked","checked","ModalImage","centered","footer","onOk","onCancel","ai_create_images_tab_templateObject","ai_create_images_tab_templateObject1","ai_create_images_tab_templateObject4","ai_create_images_tab_templateObject5","ai_create_images_tab_templateObject6","AddImageDrawer","checkTab","setActiveTab","handleClose","URL","queryParams","URLSearchParams","search","newURL","origin","pathname","toString","hash","history","pushState","path","Drawer","mask","maskClosable","TabsStyled","Tabs","tabBarGutter","activeKey","copyAndModifyQueryParams","TabPane","tab","AddImageDrawer_templateObject","EditorSection","isCopy","setEditorHeightOffset","setShowAiBanner","showEditAltModal","setShowEditAltModal","altText","setAltText","setElement","modalEditorStates","setModalEditorStates","hideButton","setHideButton","noFirstVisit","getItem","handleModalOpen","currentAlt","handleUpdateAlt","tagkey","attributes","blockList","next","newEntity","entity","mergeEntityData","promptForLink","pageX","pageY","closeContextMenu","headerKeywordsRef","updateKeywordsRef","isNil","isManualUpdate","debouncedHighlightingChange","decorated","changeType","acceptedTypes","decoratedState","debouncedHighlighting","errorMessage","isImportError","isCreatedFromScratch","prevOffset","blockWithLinkAtBeginning","linkKey","characterList","getCharacterList","initialSelectedText","generateSelectedText","lastWasEnd","selectedBlocks","blockArray","selectedTextFromBlocks","join","xSelection","x","prevChar","nextChar","prevEntity","nextEntity","finalPrevOffset","finalNextOffset","char","blockLength","finalAnchorOffset","rangeCount","getRangeAt","getBoundingClientRect","noEntityCase","noSelectionLeft","noSelectionTop","noSelectionBottom","tempX","clientY","clientX","linkInstance","startsWith","getLastChangeType","lastChangedBlockKey","lastChangedBlock","lastChangedBlockType","addCrossIcon","isExtensionInstalled","handleShowNotification","checkDate","getCount","date1","hoursDifference","Number","diffInMs","abs","date2","now","Date","maxWidth","checkCount","CloseOutlined","rel","transform","zIndex","InputTitle","InputStyled","ButtonsWrapper","CancelButton","ButtonStyled","EditorSection_templateObject","EditorSection_templateObject1","EditorSection_templateObject3","EditorSection_templateObject5","Header_Option","Header","blockTypeEnhancement","CaretDownOutlined","pointerEvents","UnorderedList","UnorderedListOutlined","Bold","inlineStyleEnhancement","BoldOutlined","Italic","ItalicOutlined","Underline","UnderlineOutlined","OrderedList","OrderedListOutlined","Code","CodeOutlined","Anchor","updateText","showNewUrlEditor","setShowNewUrlEditor","editorValues","setEditorValues","selectionRange","setSelectionRange","customSelection","dateRef","onkeydown","ctrlKey","shiftKey","metaKey","iconClicked","LinkOutlined","AnchorRemove","entityTypeEnhancement","removeLink","faUnlink","AddImage","openDrawer","faImage","Dragger","Upload","BrowseImage","loader","setLoader","isError","setIsError","altValue","parentElement","setImgFile","setImage","contentStateWithEntity","AtomicBlockUtils","insertAtomicBlock","formData","FormData","append","imgFile","CONTENT_ASSISTANT_API","uploadImage","ele","which","handleImageChange","selectedFile","reader","FileReader","onloadend","readAsDataURL","RequiredFileType","faTrashXmark","StyleDragger","multiple","showUploadList","customRequest","file","onDrop","getFile","dataTransfer","files","faCloudArrowUp","InputWraper","AtributeWrapper","Pwrapper","CancelBtn","AddBtn","browseFile_templateObject","browseFile_templateObject1","browseFile_templateObject2","UploadURL","imgRegex","imageFormat","urlUpload_templateObject","urlUpload_templateObject1","urlUpload_templateObject2","UploadImage","FileBtn","faFileImage","Popup","StyledInputContainer","StyledTabs","defaultActiveKey","UploadImage_templateObject2","UploadImage_templateObject3","InsertIframe","showIframeEditor","setShowIframeEditor","setUrl","contentData","iframeUrl","faRectangleCode","LargeBadge","alpha","StyledPopup","StyledUrlContainer","InsertButton","insertIframe_templateObject1","Textarea","Toolkit","isTaActive","setIsSideBarHidden","setZoomLevel","isPublic","updatingFolder","isLinkgraph","newState","undo","UndoOutlined","redo","RedoOutlined","faWandMagicSparkles","arrowPointAtCenter","faChevronRight","transition","useClickedOnPageHandler","callback","SingleKeywordDataCard","getSpecificCountryByCode","kw","keywordsFormProps","countries","Text","Typography","updateKeyword","useWatch","keywordResearcherV2","postNewKeywords","keywordDetails","loadKeywordDetailList","loadKeywordDetails","setDetailsRepolling","isKwNameEdit","setIsKwNameEdit","showLocationSelector","setShowLocationSelector","isEditDefaultLocation","setIsEditDefaultLocation","popRef","showKwErrorMsg","setShowKwErrorMsg","showMessage","r","removeTargetKeywords","err","payload","keywordsArray","feTargetKeywords","feKw","updateFeTargetKeywords","locationId","countryCode","editKeywords","response","status","allowedFocusTerms","isEmpty","setFieldsValue","postAndGetData","keywords","kwClickHandler","targetKeywords","setIsDrawerFromCa","setActiveTargetKw","setIsOpenKeywordDrawer","values","formKeyword","formatArray","preparedKeyword","kwArray","locationSelected","reach","updatelocationData","keywordForFrontendArray","JSON","stringify","SCA_PAGE_UPDATE_KEYWORD_LOCATION","locationDebouncerChange","country","updateCountriesList","openLocationSelector","searchForLocation","shouldUpdate","resetFields","faTimes","toUpperCase","overlayInnerStyle","faLocationDot","mouseLeaveDelay","mouseEnterDelay","openClassName","faArrowLeft","faSearch","faInfoCircle","faGlobe","formatNumber","faMapMarkerAlt","serpTaskStatus","Flag","code","searchVolumeFormatter","sv","Globe","globalSv","svTopCountries","indx","_countryCode","searchVolume","Progress","showInfo","strokeWidth","percent","round","trailColor","strokeColor","getProgressColor","SkeletonHorizontalLoaderGray","lightLoader","skeletonHeight","skeletonMarginTop","kd","getInverseProgressColor","costPerClickFormatter","cpc","TargetKeywords","expanded","isAddingNewKw","setIsAddingNewKw","newKwValue","setNewKwValue","kwLengthErr","setKwLengthErr","targetrKeywordsContainer","addHorizontalScroll","topScroll","leftScroll","scrollX","onscroll","deltaY","scrollLeft","newKwLocation","setNewKwLocation","popoverRef","onAddKeywordFinish","format","faPlus","numberWithCommas","textOverflow","faExclamationTriangle","SCA_PAGE_ADD_KEYWORD","SuggestedKeywordCard","isRemoving","setIsRemoving","addSuggestedKwToTargetKw","passedKw","stagedForAddingKw","SCA_PAGE_ADD_KEYWORD_SUGGESTION","removeTargetKeyword","removeSuggestedKeyword","strong","KeywordSuggestions","keywordSuggestionsContainer","showAllSuggestionsHandler","kwSuggestions","isFetchingSuggestedKw","editorText","TargetKeywordsAndSuggestions","isExpanded","setIsExpanded","containerRef","parentRef","ChevronDown","faChevronDown","faChevronsDown","faChevronUp","MetaIdeasList","metaIdeas","onIdeaUse","metaCopied","setMetaCopied","copyMetaHandler","desc","IdeasContainer","idea","SingleIdeaContainer","MetaTitle","metaTitle","MetaDesc","metaDesc","MetaIdeasList_templateObject","MetaIdeasList_templateObject1","MetaIdeasList_templateObject2","MetaIdeasList_templateObject3","MetaTagGenerator","updateMetaData","setIsExternalTitleEdit","isMetaUpdating","editTitle","setLoading","loadAiMetaData","metaData","showMetaDataModal","setShowMetaDataModal","customMetaTitle","setCustomMetaTitle","customMetaDesc","setCustomMetaDesc","showAiMetaResults","setShowAiMetaResults","antdIcon","updateMetadata","meta_title","meta_desc","checkPageTitle","regexp","aiButtonTooltipMsg","msg","generateSingleMetaIcon","metaValue","faHexagonExclamation","metaValueMinLength","metaValueMaxLength","largerThenMax","smallerThanMin","idealSize","missing","largerBy","smallerBy","statusMsg","faTriangleExclamation","faCircleCheck","updateMetaDataHandler","aiMetaDataHandler","targetKwArr","aiSuggestionMsg","metaDataTooltipContent","destroyTooltipOnHide","onVisibleChange","MetaDataBtnStyled","OneClickPublisherV2","extractOptions","wpArray","syncedAt","postStatus","synced","publishedAtUrl","topicalMapName","errorId","setErrorId","smallPageLoad","setUnsavedChanges","unsavedChangesInContent","wpPublish","fetchWpPublishData","postingData","showDataModal","setShowDataModal","publishWpPage","setShowAddSiteModal","isApiError","isShopifyApiError","updateApiError","setShowIndividualPopover","showIndividualPopover","setLoadingData","loadShopifyBlogs","blogs","creatingPage","creatingBlog","createNewShopifyPage","createNewShopifyBlog","getVendorAccounts","vendorAccounts","ottoV2Store","loadIssueTableData","ottoUrls","selectedWpSite","setSelectedWpSite","triggerSites","setTriggerSites","selectedShopifySite","setSelectedShopifySite","showWpVideo","setShowWpVideo","filteredObject","setFilteredObject","selectedUser","setSelectedUser","selectedWpSiteUsers","setSelectedWpSiteUsers","setTrigger","showSynchronizeTypeDropdown","setShowSynchronizeTypeDropdown","synchronizeType","setSynchronizeType","parent","setParent","project","setProject","reloadProjectUuid","refOne","refTwo","newBtnLabelOptions","setNewBtnLabelOptions","currentProject","offerPublishUrl","importedFromUrl","wpPublishedAtUrl","cleanWpArr","getDomain","showWpFormType","setShowWpFormType","syncWp","createNewWp","syncShopify","shopifySynced","createNewShopify","wpPostCategories","wpPostStatus","wpPostType","wpPublishedAtWebsiteId","defaultWpPostCategories","defaultWpPostStatus","defaultWpPostType","defaultWpWebsiteId","shopifyContentType","wpPostParent","shopDomain","wpWebsite","wpPostCategory","account_id","accountId","postParent","wpNewPostCategory","author","wpPostAuthorId","selectedWPsiteData","articles","updatedArticles","setShopifyInitialValues","newBtnLabel","setNewBtnLabel","syncBtnLabel","setSyncBtnLabel","Group","antdIconLarge","wpPostMetaDesc","getTopLinkUrl","getTopLinkId","publishWpPageHandler","notificationV2","topicalMapObject","obj","issueType","params","issue_type","page_size","pageSize","page","is_loading","pageId","pageUrl","postType","postAuthor","postCategories","selectedVendor","shopifySite","shop_domain","shopifyPayload","blog_title","ca_page_id","post_type","tags","new_post","permalink","getSyncedPill","SyncedPill","faCircleXmark","setFields","errors","categories","options","category","children","wpPublisherSyncSection","WpUpdatePostSection","isActive","CustomRadioButton","VideoTutorialBtn","InputsContainer","wpSyncedAt","shopifySyncedAt","wpSynced","shopifyContentUrl","WpLastSyncLeft","moment","WpSyncedPostDetails","sanitizeUrl","faUpRightFromSquare","InputLabelWrapper","FormLabel","initialValue","PurpleRadioButton","blueColor","getFieldValue","StyledFormItem","blog","on","userEmail","itemsArray","areCategoriesSame","Array","PublishButton","htmlType","wpPublisherNewPostSection","WpNewPostSection","borderRadiusTop","wpSite","OptionalTag","pattern","wordCount","wpPublishTooltipContent","WpPublishTooltipContentWrapper","ErrorNotificationContainer","ErrorNotification","textDecoration","onClickShopify","alignConfig","points","handleClick","shopifyBlogId","shopifyBlogTitle","shopifyPostType","shopifyAuthor","shopifyAccountId","shopifyTags","Dropdown","overlay","DropdownContentContainer","align","SynchronizeType","isCleanedHtmlUpdated","_content_wpPostAuthorId","faWordpressSimple","faCaretRight","isShopifyCustomer","faShopify","SynchronizeBtn","faRotate","OneClickPublisherV2_templateObject","OneClickPublisherV2_templateObject1","OneClickPublisherV2_templateObject2","OneClickPublisherV2_templateObject3","OneClickPublisherV2_templateObject4","OneClickPublisherV2_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject19","TitleEditor","languages","contentLoadedAt","isAnalyzing","isExternalTitleEdit","viewers","setShowQuickSyncModal","showQuickSyncModal","userAiSettings","updateUserAiSettings","getUserAiSettings","titleLeft","setTitleLeft","setTitle","modalUrl","setModalUrl","editPageUrl","setEditPageUrl","isCloseClicked","setIsCloseClicked","showDownloadConfirmationModal","setShowDownloadConfirmationModal","submitDisabled","setSubmitDisabled","renderWithbrowser","setRenderWithBrowser","keepContentModal","setKeepContentModal","titleContainerWidth","setTitleContainerWidth","calculateWidth","collapsedViewers","setCollapsedViewers","titleRef","getTitleLeft","urlInput","debouncedChangeFocusOut","URL_PATTERN","popupRef","language","setLanguage","defaultLanguage","onLanguageChangeHandler","option","selectSufixIcon","onEditUrlSubmit","updateUrlHandler","shouldOverwriteContent","renderWIthBrowser","SCA_PAGE_URL_UPDATE","titleWidth","ctx","createElement","getContext","measureText","formatedTitleWidth","WpInstructionsModal","WpAddSiteModal","CommonModal","EditUrlModalTitle","EditUrlModalSub","EditUrlLink","EditUrlModalButtons","CheckboxStyled","input","onBlur","readOnly","ScaArticleStatusSelectorV2","articleUuid","articleStatus","ProjectsSelector","projectName","pageUuid","minifiedVersion","EditUrlContainer","valuePropName","Loader","faArrowDownToBracket","faArrowUpFromBracket","opacity","StyledSelect","showSearch","filterOption","indexOf","onMouseEnter","lang","formatCountryCode","title_editor_templateObject","title_editor_templateObject2","title_editor_templateObject3","title_editor_templateObject4","title_editor_templateObject5","dropdownColors","grey","listItemsBackgroundColor","borderColor","BreadCrumb","headerTopRef","isKebabOpen","setIsKebabOpen","isModalOpen","setIsModalOpen","exportToDocsLoading","setExportToDocsLoading","briefAntIcon","copySuccess","setCopySuccess","clearAnalytics","isExporting","isSaving","exportToGoogledoc","deleteDialog","incrementInTotalArticle","setPageRemovedFromEditor","isAllowedPagesQuotaLimitReached","clientHeight","createPage","PAGES_API","SCA_CREATE_PAGE","exportToGoogleDocs","exportPageToGoogleDocs","PageHeader","onBack","login","backIcon","extra","ShareButton","openDialog","faShareNodes","ExportButton","faFileArrowDown","faEllipsisV","ButtonComponent","googledocLink","SCA_PAGE_EXPORT_TO_DOCS","GoogleOutlined","resp","exportArticleAsHtml","setAttribute","encodeURIComponent","body","appendChild","removeChild","allowedPages","DeleteModal","removeFromEditorCallback","h1","Btn","TopSection","minWidth","DraftToolkit","TextSuggestions","setIsTaActive","setFocusTermsForInsertion","stagingTaSuggestions","taActiveTerm","setTaActiveTerm","setStagingTaSuggestions","highlightedNodeId","setHighlightedNodeId","showOriginalBlockId","setShowOriginalBlockId","updatingTa","totalOccurances","setTotalOccurances","getElementsByClassName","class","onArrowClickHandler","updatedValues","term","order","nodesWithTerm","_higlightedNode_dataset","higlightedNode","dataset","blockIndex","elemOffset","offsetTop","Heading","blocksRenderer","blocksArray","domNode","attribs","typeDettector","onBlockStatusChange","prepDataArr","itemIndex","onDotClickHandler","updateImageStyle","replaceAll","TextContainer","regExp","isSuggestion","SingleBlockWithSuggestion","showingOriginalBlock","currNodeId","data-block-index","termIncluded","right","textTransform","parse","faRotateLeft","BlockWrapper","Controller","DotsContainer","Dot","Arrow","faArrowUp","faArrowDown","checkCurBlockStatus","highlightedNode","elementStatus","_highlightedNode_dataset","TextSuggestions_templateObject","TextSuggestions_templateObject1","TextSuggestions_templateObject2","TextSuggestions_templateObject3","TextSuggestions_templateObject4","TextSuggestions_templateObject5","TextSuggestions_templateObject6","TextSuggestions_templateObject7","TextSuggestions_templateObject8","TextSuggestions_templateObject9","TextSuggestions_templateObject10","TextSuggestions_templateObject11","TextSuggestions_templateObject12","MissingPlacementsBanner","setShow","termsWithNoSuggestions","setTermsWithNoSuggestions","getlinksForInsertion","linksAssistantSuggestions","prepArr","linksIncluded","noPlacementsTermsCount","autoAdjustOverflow","MissingPlacementsBanner_templateObject","SingleTerm","finalTermsList","setFinalTermsList","setVisible","kwUpdate","termIndex","setTermIndex","getstagingLinkSuggestions","setStagingLinkSuggestions","setLinkActiveTerm","linkActiveTerm","onTermClickHandler","curTerm","newClass","incDec","cardClick","scrollTerms","acceptedStatus","dismissedStatus","CardTitle","isTerm","faCircleX","faCircleDashed","StatusTitle","isVal","DividerLine","SuggestionCard","newItems","updateTerm","SingleTerm_templateObject","SingleTerm_templateObject1","SingleTerm_templateObject2","SingleTerm_templateObject3","SingleTerm_templateObject4","SingleTerm_templateObject6","LinksList","taLinkSuggestionLoading","setFilter","loadLinksData","expectedData","outerArray","linksData","innerArray","uniqueData","seenSet","Set","array","stringRepresentation","suggestionList","allLinks","arrayToObject","givenValue","expectedValue","internalLinkSuggestionsV2","getTerms","elements","DOMParser","parseFromString","innerText","formattedArray","arr","arrTwo","indexx","filteredValue","addData","firstTerm","LinkAssistantRightSidebar","inputValue","activeKeywordsList","setIsLinkActive","setLinksForInsertion","stagingLinkSuggestions","setIsTaUpdating","fetchLinkSuggestions","setActiveKeywordsList","updated","setUpdated","setInputValue","anyButtonClicked","setAnyButtonClicked","activeKwArr","active","onCheckboxClicked","elemId","filteredKw","findIndex","onCancelClickHandler","onSubmitHandler","finalHtmlOutput","updatedEditorState","keywordsDropdown","KeywordsDropdownContainer","OverlayTitle","addLink","allLink","urlWithProtocols","links","stringToArray","keywordNewLineReg","popoverContent","CustomTextarea","paddingToNumber","paddingToText","isKeyWordv2","autoSize","minHeight","autoSizeCheck","nativeEvent","LinkSubmitBtns","selectedLink","TaWrapper","TermsMainWrapper","TitleContainer","Description","ActionButtonsContainer","some","linkAssistantRightsideBar_templateObject","linkAssistantRightsideBar_templateObject1","linkAssistantRightsideBar_templateObject3","linkAssistantRightsideBar_templateObject4","linkAssistantRightsideBar_templateObject5","linkAssistantRightsideBar_templateObject7","viewSuggestionsOption","css","blinkAnimation","keyframes","linkAssistantRightsideBar_templateObject9","linkAssistantRightsideBar_templateObject10","linkAssistantRightsideBar_templateObject11","linkAssistantRightsideBar_templateObject12","TextSuggestionsLinks","isLinkActive","doc","TextSuggestionsLinks_templateObject","TextSuggestionsLinks_templateObject1","TextSuggestionsLinks_templateObject2","TextSuggestionsLinks_templateObject3","TextSuggestionsLinks_templateObject4","TextSuggestionsLinks_templateObject5","LeftSide","sideBarWidth","LeftSideContainer","isLinkSuggestionActive","isNewPage","LeftSide_templateObject","Error","WarningOutlined","h3","SingleCluster","SORT_DIRECTION","removingTerms","cluster","isClusterRemoving","tableData","setTableData","sortField","setSortField","sortDirection","setSortDirecion","removeClusterHandler","isBulkRemovingCluster","bulkRemoveTerms","setTerms","dataFiltered","filterDataInMemory","handleTableChange","pagination","filters","sorter","column","sortFieldName","dataSource","loadingRows","columns","dataIndex","render","record","foundIn","FoundInLabel","isBranded","formatLargeNumber","defaultSortOrder","usedCount","idealCountMax","RemoveClusterBtn","rowKey","SingleCluster_templateObject","SingleCluster_templateObject1","BulkRemoveTermsModal","clusteredTerms","setClusteredTerms","clusterToRemove","setClusterToRemove","clusterTerms","clusters","tempArr","focusTermsSorter","tempCluster","b","clusterTitle","termsArr","ModalTitle","CollapseStyled","expandIconPosition","Collapse","Panel","header","ClusterHeader","ClusterName","ClusterDesc","clusterSv","BulkRemoveTermsModal_templateObject","BulkRemoveTermsModal_templateObject1","BulkRemoveTermsModal_templateObject2","BulkRemoveTermsModal_templateObject3","BulkRemoveTermsModal_templateObject5","TermsDropdownController","onViewChange","currentView","onChangeIncludeBranded","includeBranded","onTermsFilter","onSortTerms","showExportModal","setShowExportModal","showBulkRemoveTermsModal","setShowBulkRemoveTermsModal","getTermsCount","termsFiltersSetup","setTermsFiltersSetup","handleOnSortChange","downloadFileToTxt","pageTitle","articleUrl","imagesCount","count","videosCount","videos","iframesCount","iframes","internalLinksCount","internal","externallLinksCount","external","socialCount","social","javascriptCount","js","headersSum","headers","headersCount","pageTechnicalsString","includedFocusterms","notIncludedFocusTerms","ft","requiredCountMin","questionsSting","questions","q","convertedText","Blob","createObjectURL","download","getXlsExportLink","token","getTokenFromCookies","baseUrl","getApiUrl","BaseApi","CA_ENDPOINT","termsFilterHandler","updatedTermsSetup","updatedFilteredTermsArr","tooltipStyle","isNotPublic","viewChangeDropdown","TermsViewDropdownContainer","CheckboxStyledHighlights","highlights","setHighlights","PTag","BulkRemoveTermsBtn","TermsContainer","ExportModalTitle","ExportModalDesc","ExportModalButtonsContainer","faFileSpreadsheet","faFileLines","faGoogle","TermsFilterContainer","customBackground","GroupTermsContainer","Menu","sorters","Sort","faArrowUpArrowDown","SortTxt","isRemovingFocusTerms","AddButton","setShowAddFocusTermModal","ExportBtn","AdjustBtnContainer","GearIcon","faSliders","TermsDropdownController_templateObject","TermsDropdownController_templateObject1","TermsDropdownController_templateObject2","TermsDropdownController_templateObject4","TermsDropdownController_templateObject5","TermsDropdownController_templateObject7","TermsDropdownController_templateObject9","TermsDropdownController_templateObject10","TermsDropdownController_templateObject11","TermsDropdownController_templateObject12","TermsDropdownController_templateObject13","TermsDropdownController_templateObject14","TermsDropdownController_templateObject15","TermsDropdownController_templateObject16","TermsDropdownController_templateObject17","TermsDataController","onFilter","isClustersExpanded","setIsClustersExpanded","termsSearchQuery","setTermsSearchQuery","termsSearchInputValue","setTermsSearchInputValue","secondAntIcon","handleOnClusterClick","filteredSearch","clusterName","termSearchHandler","formatInput","trimmedArr","SearchAndSort","prefix","faMagnifyingGlass","ClustersWrapper","ClustersContainer","expandedClusters","ClusterTooltipSingleRow","ClusterTooltipLabel","ClusterTooltipValue","SingleClusterContainer","activeCluster","TermsDataController_templateObject","TermsDataController_templateObject1","TermsDataController_templateObject2","TermsDataController_templateObject3","TermsDataController_templateObject4","TermsDataController_templateObject5","TermsDataController_templateObject6","TermsDataController_templateObject7","AntdInput","focusTerm","removeTermHandler","removeTerms","termContainerSetup","hoverBackground","fitTermInQuota","quote","startIndex","h5","targetKewyordsOnlyArr","getTwoGreenPercentageColor","percentage","requiredCountMax","competitors","competitor","getSiteName","hostname","snippets","snippet","normalizedScore","source","LowerSection","isAnyFocusTermLink","wikipediaLink","wikidataLink","knowledgeGraphLink","crunchbaseLink","ReferencesWrapper","ReferencesTitle","LinksWrapper","SingleLink","faWikipediaW","TermContainer","TermName","BrandedLabel","CopyIcon","FocusTermsTab_SingleTerm_templateObject","FocusTermsTab_SingleTerm_templateObject1","FocusTermsTab_SingleTerm_templateObject2","FocusTermsTab_SingleTerm_templateObject3","FocusTermsTab_SingleTerm_templateObject4","FocusTermsTab_SingleTerm_templateObject5","FocusTermsTab_SingleTerm_templateObject6","SingleTerm_templateObject7","SingleTerm_templateObject8","SingleTerm_templateObject9","SingleTerm_templateObject10","SingleTerm_templateObject11","TermsDropdowns","includedBranded","setIncludeBranded","setQuery","termsToShow","setTermsToShow","isCopied","setIsCopied","standardTerms","setStandardTerms","queryParam","prepTermsArr","filteredTerms","termsToShowParam","TopicalTermsContainer","focusMode","focusTermsExpanded","CopyButton","TermsDropdowns_templateObject","TermsDropdowns_templateObject1","TermsDropdowns_templateObject2","FocusTermsTab","includedTerms","includeMoreTerms","includeLessTerms","EmptyDataBox","FocusTermsTab_templateObject","LinkSuggestionsDropdownController","isSynced","setIsSynced","isSyncing","setIsSyncing","onLinksSync","getInternalLinkSuggestionsv2","FocusModeBtn","setFocusTermsExpanded","faDownLeftAndUpRightToCenter","faUpRightAndDownLeftFromCenter","FocusModeLabel","ExportIcon","faFileDownload","RefetrchBtnContainer","faSyncAlt","LinkSuggestionsDropdownController_templateObject","LinkSuggestionsDropdownController_templateObject2","LinkSuggestionsDropdownController_templateObject3","LinkSuggestionsDropdownController_templateObject4","SingleSuggestion","customCallback","isRemovingTerm","setIsRemovingTerm","isBookmarked","setIsBookmarked","removeInternalLinkSuggestion","bookmarkInternalLinkSuggestion","TitleAndStar","faStarSolid","faStar","SingleISugesstion_templateObject","SingleISugesstion_templateObject1","SingleISugesstion_templateObject2","SingleISugesstion_templateObject3","SingleISugesstion_templateObject4","SingleISugesstion_templateObject5","InternalLinksSuggestions","isQueried","DropdownsContainer","InternalLinkSuggestions_templateObject","SingleCitation","citation","addDefaultSrc","onError","substring","serps","serp","CommonCitations","commonCitations","SidebarTooltip","SuggestionsDataController","visibleKeywords","updateKeywords","linksDropDownFromSuggestion","showEditor","setShowEditor","hostnameEditor","EditorContainer","FormStyled","updateHostname","InputStyeld","ButtonContainer","isUpdatingHostname","UpdateButton","topMessage","HostnameContainer","HostnameLink","addProtocolToDomain","HostnameLinkBtnContainer","AddNewUrlBtn","ViewDropdownContainer","viewControlls","ViewControllsContainer","SearchAndSortWraper","SearchContainer","SuggestionsDataController_templateObject","SuggestionsDataController_templateObject1","SuggestionsDataController_templateObject3","SuggestionsDataController_templateObject4","SuggestionsDataController_templateObject5","SuggestionsDataController_templateObject6","SuggestionsDataController_templateObject7","SuggestionsDataController_templateObject9","CommonBtn","SuggestionsDataController_templateObject12","SuggestionsDataController_templateObject17","SuggestionsDataController_templateObject19","_templateObject20","_templateObject21","LinkSuggestionsTab","perc","setCurrentView","searchQuery","setSearchQuery","dataArr","setDataArr","initialDataArr","setInitialDataArr","setIsQueried","selectedOption","setSelectedOption","domain","setDomain","isVisiblePopover","setIsVisiblePopover","updateLoading","setUpdateLoading","urlsError","setUrlsError","isFetchingIntLinksSug","onDataFilter","filterDataHandler","formattedArr","customDataArr","foundLinks","n","filteredSelectedLinks","foundLink","calculateUsagePercentage","postLInkSuggestion","initValues","handleRadioChange","submitUrl","apiError","kwArr","SuggestionsBannerContainer","TooltipTitle","TooltipDescription","exportLinkIcon","Pill","StyledPopover","PopoverContentWrapper","PopoverTitle","providedUrl","AddDomainSection","DomainDetails","AddDomainTitle","AddDomainDesc","AddDomainInput","ProvideUrlsSection","ProvideUrlsDetails","ErrorMessageForURL","Dismiss","Update","onOpenChange","LinkSuggestionsTab_templateObject","LinkSuggestionsTab_templateObject1","LinkSuggestionsTab_templateObject2","LinkSuggestionsTab_templateObject3","LinkSuggestionsTab_templateObject4","LinkSuggestionsTab_templateObject6","LinkSuggestionsTab_templateObject7","LinkSuggestionsTab_templateObject8","LinkSuggestionsTab_templateObject9","LinkSuggestionsTab_templateObject10","LinkSuggestionsTab_templateObject11","LinkSuggestionsTab_templateObject12","LinkSuggestionsTab_templateObject14","LinkSuggestionsTab_templateObject15","LinkSuggestionsTab_templateObject16","LinkSuggestionsTab_templateObject18","SingleQuestion","question","aiCopied","setAiCopied","setCreatingPage","isAiGenerating","setIsAiGenerating","justify","faMessageCheck","faFilePlus","QuestionsTab","level","htmlString","string","copiedText","textContent","htmlContent","plainTextContent","copyToClipboardWithHtmlAndText","AddFocusTermModal","showAddFocusTermModal","terms","addFocusTerms","isFocusTermsLoading","handleAddFocusTerms","StyledModal","Desc","TextArea","AddFocusTermModal_templateObject1","AddFocusTermModal_templateObject2","AddFocusTermModal_templateObject3","AddFocusTermModal_templateObject4","FocusTermsTabs","setActiveKey","onChangeTab","SCA_PAGE_FOCUS_TERMS_TAB_OPEN","SCA_PAGE_QUESTIONS_TAB_OPEN","SCA_PAGE_LINK_SUGGESTIONS_TAB_OPEN","CommonTabsStyled","tabBarStyle","editorScrolled","TabTitleContainer","totalUsedTerms","totalUsedQuestions","totalUsedSuggestions","CommonTabs","CommonTabPane","FocusTermsTabs_templateObject2","SingleMetrics","tooltipLabel","showTooltip","headingData","StyledLable","StyledIcon","RangeValues","h2","h2Min","h2Max","h3Min","h3Max","internalLinks","internalLinksMin","internalLinksMax","externalLinks","externalLinksMin","externalLinksMax","isWithinRecomendedRange","SingleMetrics_templateObject","SingleMetrics_templateObject1","SingleMetrics_templateObject2","SingleMetrics_templateObject3","ContentScore","scoreCounts","scoreExtended","internalLinksData","externalLinksData","avg","h1value","h1Min","h1Max","h2value","h3value","setViewSuggestionsOption","setLinksDropDownFromSuggestion","isWordCountLoading","isScoreLoading","score","suggestedWordCountLimits","viewSuggestionHandler","shouldShowTooltip","tooltipMsg","cur","openText","scrollToText","anchorTag","scrollIntoView","behavior","countsSetup","lower","upper","paragraphs","paragraphsMin","paragraphsMax","headings","headingsMin","headingsMax","StyleHeadingsTooltipTitle","internalLinksLength","externalLinksLength","StyledLinksTabs","StyledRecommender","StyledRecomentedValue","StyledSuggestionLink","showAsLink","StyledCurrentValue","StyledFontAwesomeIcon","StyledLinksDiv","StyledLinkItem","faArrowUpRightFromSquare","ReactEcharts","grid","series","axisLine","roundCap","lineStyle","progress","startAngle","radius","endAngle","pointer","offsetCenter","itemStyle","axisTick","splitLine","distance","splitNumber","axisLabel","detail","RightSection","ContentScore_templateObject","ContentScore_templateObject1","ContentScore_templateObject2","ContentScore_templateObject5","ContentScore_templateObject6","ContentScore_templateObject7","ContentScore_templateObject8","ContentScore_templateObject9","ContentScore_templateObject10","WordCount","WordCount_templateObject","WordCount_templateObject1","HeaderSection","MiniContainer","ScoreAndWordCount","ProgressStyled","strokeLinecap","gapDegree","gapPosition","MiniTitleContainer","HeaderSection_templateObject","HeaderSection_templateObject1","HeaderSection_templateObject2","HeaderSection_templateObject3","HeaderSection_templateObject5","HeaderSection_templateObject6","HeaderSection_templateObject7","termsForInsertion","termsAssistantSuggestions","overflowY","TermsAssistant_MissingPlacementsBanner_templateObject","dots","setDots","saved","dismissed","savedPlacements","dismissedPlacements","placements","Data","PlacementsInfo","generatePlacmenetsInfo","TermsList_SingleTerm_templateObject","TermsList_SingleTerm_templateObject1","TermsList_SingleTerm_templateObject2","TermsList_SingleTerm_templateObject3","TermsList_SingleTerm_templateObject4","TermsList","termOccurances","TermsSelectionDropdown","_filter","selectedTerms","setSelectedTerms","popoverVisible","setPopoverVisible","showLimitError","setShowLimitEror","fetchTaSuggestions","taSuggestionsLoading","handleCheckboxClick","updatedList","onTermsSearchHandler","onBulkSelectTop20Handler","addCompleteTerms","prepcCompleteTerms","completeTermsLength","prepIncludeMoreTerms","onUncheckAllClickHandler","onTriggerClickHandler","HeadingSection","SearchBox","QuotaInfo","ControllsBar","BulkControllBtn","SingleTermRow","opaque","TermUsage","BtnsContainer","Trigger","TermsSelectionDropdown_templateObject","TermsSelectionDropdown_templateObject1","TermsSelectionDropdown_templateObject2","TermsSelectionDropdown_templateObject3","TermsSelectionDropdown_templateObject4","TermsSelectionDropdown_templateObject6","TermsSelectionDropdown_templateObject7","TermsSelectionDropdown_templateObject8","TermsSelectionDropdown_templateObject9","TermsSelectionDropdown_templateObject11","TermsSelectionDropdown_templateObject12","TermsSelectionDropdown_templateObject13","TermsAssistantRightSidebar","RightSidebar_templateObject","RightSidebar_templateObject1","RightSidebar_templateObject2","RightSidebar_templateObject3","RightSidebar_templateObject4","RightSidebar_templateObject5","SingleCompetitor","contentScore","TopRankingCompetitors","topRankingCompetitorActiveKw","competitorsData","setTopRankingCompetitorsActiveKw","openCompetingFocusTermsDrawer","onSelect","dropdownClassName","DrawersTriggers","changeView","loadingTaSuggestions","setLoadingTaSuggestions","handleTriggerAssistant","finalPrepArr","buttonsConf","faListTree","hoverColor","openCompetitorsHeadingsDrawer","faMagicWandSparkles","tooltipContent","faWrench","faChartSimple","updatedButtonConf","SingleItem","DrawersTriggers_templateObject","DrawersTriggers_templateObject1","Analytics","ContentContainer","Analytics_templateObject","Analytics_templateObject1","KeywordSelector","isSubscriber","isCompetitorsTable","setFilteredCompetitorsData","setActiveKw","setCompetitors","activeKw","handleOnSelectChange","KeywordDropdownWrapper","KeywordSelector_templateObject","CompetitorsTable","filteredCompetitorsData","schemaTypesList","allSchemasCount","nullCount","selectedSchema","setSelectedSchema","setShowCompetitorTermsTableDetail","isSmallScreen","setIsSmallScreen","allowScroll","setAllowScroll","onWindowResize","innerWidth","average","reFormatSchemaType","schema","selectedSchemaValue","filteredItems","graph","graphItem","fixed","ellipsis","PageUrlWrapper","lineHeight","dr","parseFloat","toFixed","DRWrapper","schemaLength","schemaItemsList","BlueTextWithUnderline","ULStyled","LinksContainer","paddingRight","LinkWrapper","StyledAnchor","h1Count","h2Count","h3Count","TypesSchemaFilterWrapper","SchemaFilterTitle","SchemaFilterWrapper","SchemaFilter","scroll","y","_dir","CompetitorsTable_templateObject","CompetitorsTable_templateObject1","CompetitorsTable_templateObject2","CompetitorsTable_templateObject3","CompetitorsTable_templateObject4","CompetitorsTable_templateObject5","CompetitorsTable_templateObject6","CompetitorsTable_templateObject7","CompetitorsTable_templateObject8","CompetitorsTable_templateObject9","CompetitorsTable_templateObject10","CompetitorsTable_templateObject11","CompetitorsTable_templateObject12","CompetitorsDetail","competitorSchemaObject","competitorTitle","competitorUrl","competitorSchemaGraphIdx","formats","renderSchemaData","dataObj","LargeLine","mainLebel","mainValue","SchemaLabel","SchemaValue","urlValidationRegex2","isValid","utc","BackArrowContainer","SchemaContainer","SchemaHeader","SchemaPageTitle","context","CompetitorsDetail_templateObject","CompetitorsDetail_templateObject1","CompetitorsDetail_templateObject2","CompetitorsDetail_templateObject3","CompetitorsDetail_templateObject4","CompetitorsDetail_templateObject5","CompetitorsDetail_templateObject6","CompetitorsDetail_templateObject7","CompetitorsDrawerTab","setSchemaTypesList","setAllSchemasCount","setNullCount","showCompetitorTermsTableDetail","squareTooltip","IsRanking","IsNotRanking","focusTermsTooltip","CompetingFocusTermsDrawer","isCompetingFocusTermsDrawerOpen","closeCompetingFocusTermsDrawer","isOpeningKwSuggestionsFromContentResearch","setIsOpeningKwSuggestionFromContentResearch","selectedKeyword","setSelectedKeyword","selectedCompTabKw","setSelectedCompTabKw","isHovered","setIsHovered","maxElemHeight","setMaxElemHeight","allRef","keywordSuggestionsRef","elementsArray","elementsWidthArr","exportSingleNode","node","today","date","getFullYear","getMonth","getDate","html2canvas","then","canvas","toDataURL","onTabChange","schemaCountsHandler","competitorsTypes","countOccurrences","inputArray","counts","prototype","hasOwnProperty","call","afterVisibleChange","focusTermsGridData","TitleStyled","tabPosition","overflowX","Subtitle","data-html2canvas-ignore","SectionHeader","sites","Rank","Site","rotate","wrap","contentScores","focusTermUsageBySites","Square","keywordSuggestionsGridData","keywordSuggestionsUsageBySites","CompetingFocusTermsDrawer_templateObject","CompetingFocusTermsDrawer_templateObject1","CompetingFocusTermsDrawer_templateObject2","CompetingFocusTermsDrawer_templateObject3","CompetingFocusTermsDrawer_templateObject4","CompetingFocusTermsDrawer_templateObject5","CompetingFocusTermsDrawer_templateObject6","CompetingFocusTermsDrawer_templateObject7","CompetingFocusTermsDrawer_templateObject9","CompetingFocusTermsDrawer_templateObject10","CompetingFocusTermsDrawer_templateObject11","NewContentIdeaForm","drawerVisible","usaCode","selectedCountry","setSelectedCountry","onFormSubmit","topic","loadContentIdeasData","SCA_PAGE_CONTENT_IDEAS_GENERATE","SingleContentIdea","setConvertedText","newLineIndex","textWithoutLeadingSpace","firstTitle","breakFileName","fileName","faDownload","SCA_PAGE_CONTENT_IDEA_DOWNLOAD","SCA_PAGE_CONTENT_IDEA_COPY","CopyOutlined","ContentIdeas","csvModel","wordsArray","CsvDownloader","datas","filename","displayName","ExportOutlined","ContentIdeasDrawer","contentIdeas","setDrawerVisible","clearContentIdeas","setIsOpenContentGeneratorDrawer","SimilarKeyword","isIncluded","OverviewPage","addToLoadingArray","loadingArray","onRemoveKeywordFinish","ContentResearchDrawer","keywordDetail","isContentResearchDrawerOpen","closeContentResearchDrawer","getKeywordDetail","removeFromLoadingArray","countryName","similarKeywordsPageNumber","setSimilarKeywordsPageNumber","similarKeywordsPageSize","similarKeywordsData","setSimilarKeywordsData","similarKeywordsList","setSimilarKeywordsList","topCompetitorsData","setTopCompetitorsData","rankingPotentialData","setRankingPotentialData","handleFilterRenderData","dataArray","pageNumber","targetKwArray","similarKeywordsFormattedData","isKwIncluded","similarKeywords","onPaginationChange","relevanceData","competition","typicalTop10","averageContentScores","averageDr","averageWordCount","readAbility","averageReadability","SimilarKeywordConfig","BarChartColumn","numeral","PageTitle","skeletonMarginRight","totalSearchResults","rankingPotential","xAxis","svTrend","interval","formatter","rich","month","year","yAxis","volume","areaStyle","symbolSize","symbol","MiddleContainer","readability","Pagination","showSizeChanger","defaultPageSize","showQuickJumper","termsGrid","ContentResearchDrawer_templateObject","ContentResearchDrawer_templateObject1","ContentResearchDrawer_templateObject2","ContentResearchDrawer_templateObject3","ContentResearchDrawer_templateObject4","ContentResearchDrawer_templateObject5","ContentResearchDrawer_templateObject6","ContentResearchDrawer_templateObject7","ContentResearchDrawer_templateObject8","ContentResearchDrawer_templateObject9","ContentResearchDrawer_templateObject10","KeywordsDrawer","isOpenKeywordsDrawer","isDrawerFromCa","KeywordDetailContent","TechnicalsViewSwitcher","TechnicalsSwitcherContainer","ViewSwitcher_templateObject","PageSpeedIndex","refetchArticle","refetchPage","SpeedIndexContainer","psiMetrics","avgSpeedIndex","SpeedIndexDot","LastFetchContainer","updatedAt","faRotateRight","isInitialPageLoad","isTechnicalsDataLoading","PageSpeedIndex_templateObject","PageSpeedIndex_templateObject1","PageSpeedIndex_templateObject2","PageSpeedIndex_templateObject3","TechnicalScore","technicalsMsgColorMap","technicalScore","TitleAndWordCount","TechnicalScore_templateObject","TechnicalScore_templateObject1","TechnicalScore_templateObject2","TechnicalScore_templateObject3","auditLoader","setAuditLoader","onPageAuditPopoverVisible","setOnPageAuditPopoverVisible","contentAuditStore","loadContentAudit","setNewRecordId","antIconSecond","onRunPageAudit","countryCodeToUse","getId","shouldUseHeadlessBrowser","onPageAuditDetails","TopSeactionContainer","PopoverWrapper","getUniqueKeywords","existingValues","getFieldsValue","AntdCheckbox","PopoverKwContainer","PopoverBtnContainer","RunPageAuditBtn","faFileChartColumn","BtnText","Technicals_HeaderSection_templateObject","Technicals_HeaderSection_templateObject1","Technicals_HeaderSection_templateObject3","Technicals_HeaderSection_templateObject4","Technicals_HeaderSection_templateObject5","Technicals_HeaderSection_templateObject6","HeaderSection_templateObject8","AnalyticsCollapseCard","descriptionColor","colTitle1","colTitle2","sortKey","colTitle3","colTitle4","dataRenderer","isCollapse","defaultActive","plan","warningBar","setPageNumber","checkData","setCheckData","isFilterOpened","setIsFilterOpened","sortOrder","setSortOrder","formatData","setFormatData","sortData","sortBy","bordered","expandIcon","CaretUpFilled","faCaretUp","defaultCurrent","faFilter","ChevronUp","disabledTooltip","SchemaModal","setShowModal","dataList","setExpanded","dataForDisplay","ModalContentWrapper","MainContainer","potentialAction","z","wordBreak","queryInput","SchemaModal_templateObject","SchemaModal_templateObject1","SchemaModal_templateObject2","SchemaModal_templateObject3","SchemaModal_templateObject4","SchemaModal_templateObject5","SchemaModal_templateObject6","TechnicalsData","showMissingAltText","setShowMissingAltText","isActiveInternalBrokenLinks","setIsActiveInternalBrokenLinks","isActiveExternalBrokenLinks","setIsActiveExternalBrokenLinks","showSchemaModal","setShowSchemaModal","internalLinksFilters","statusCode","SCA_PAGE_INTERNAL_LINKS_SHOW_BROKEN","uiFormatImageSize","sizeArray","brokenHeaders","translateWord","getMissingAltTotal","imagesFilter","SCA_PAGE_IMAGES_SHOW_MISSING_ALT","externalLinksFilters","SCA_PAGE_EXTERNAL_LINKS_SHOW_BROKEN","displayStatusCode","displayFollowCode","followCode","jsonLd","metaSummary","meta","field","statusColor","suggestionColor","getStatusColor","Image","getMissingAltText","WarningMiniBar","Video","video","visitable","ExternalLink","generateInternalLinksDesc","msgArr","labelColor","getInternalBrokenLinksCount","getInternalRedirectsCount","anchor","generateExternallLinksDesc","getExternalBrokenCount","getExternalRedirectsCount","List","ButtonLink","linkgraphDomain","Technicals","DataContainer","Technicals_templateObject","Technicals_templateObject1","compListCollapsed","HeadingsTree","activeCompetitor","setShowBulkAddContentBtn","showBulkAddContentBtn","setCheckedCount","checkedCount","setCheckedIndexData","checkedIndexData","setCopiedHeadings","addedHeadings","setAddedHeadings","copiedHeading","setCopiedHeading","tag","setFilters","onCheckboxChecked","curFilters","checkboxClickHandler","headingContent","headingTag","handleCopyClick","updatedCopiedHeadings","textToAdd","headingType","cleanText","curAddedHeadings","updatedAddedHeading","addHeadingsHandler","FiltersWrapper","FiltersContainer","headingsHierarchy","BulkAddAction","faSquareCheck","ActionsWrapper","AddHeadings","CopyAction","CancelAction","FiltersTree","SingleHeading","itemId","HeadingTag","HeadingText","Copy","InsertText","calculateIndent","getTopMargin","calculateFontSize","generateColor","HeadingsTree_templateObject","HeadingsTree_templateObject1","HeadingsTree_templateObject2","HeadingsTree_templateObject3","HeadingsTree_templateObject4","HeadingsTree_templateObject5","HeadingsTree_templateObject6","HeadingsTree_templateObject7","HeadingsTree_templateObject8","HeadingsTree_templateObject9","HeadingsTree_templateObject10","HeadingsTree_templateObject11","HeadingsTree_templateObject12","HeadingsTree_templateObject13","CompetitorHeadingsDrawerContent","setCompListCollapsed","setCheckedHeadingsWithTags","checkedHeadingsWithTags","setActiveCompetitor","updatedCompetitors","currentArticleOutline","generateHeadingOutline","getBlocksAsArray","outline","lastIndexOf","isCurrentArticleOutline","faBars","faBarsSort","competitorsList","CompetitorsList","CurrentArticleOutline","Order","NameLogoUrl","Name","Url","Logo","NameAndUrl","Headingoutlines","DrawerContent_templateObject","DrawerContent_templateObject1","DrawerContent_templateObject2","DrawerContent_templateObject3","DrawerContent_templateObject4","DrawerContent_templateObject5","DrawerContent_templateObject6","DrawerContent_templateObject7","DrawerContent_templateObject8","DrawerContent_templateObject9","DrawerContent_templateObject10","DrawerContent_templateObject11","DrawerContent_templateObject12","DrawerContent_templateObject13","CompetitorsHeadingsDrawer","isCompetitorsHeadingsDrawerOpen","closeCompetitorsHeadingsDrawer","SidebarContent","showTechnicals","setShowTechincals","TechnicalsContainer","LoadingBannerContainer","LongLoadingBanner","isFetchingTargetKw","SidebarContent_templateObject","SidebarContent_templateObject1","SidebarContent_templateObject2","SidebarContent_templateObject3","SidebarContent_templateObject4","RightSidebarV2","onResizeCallback","isHidden","topPosition","setTopPosition","sideBarRef","sidebarUpdate","handleScroll","pageYOffset","passive","_document_querySelector","Resizable","onResize","dir","elRef","enable","topRight","bottomRight","bottomLeft","topLeft","analyzingError","ErrorView","PageEditor","rootStore","loadAiWriterHistory","refetchOneClickDraftResultForArticleCreation","isExportingPageLoader","setIsPublic","setFocusTermsClassNames","setSideBarWidth","setViewers","emailAddress","resultId","triggerFreddySurvey","FREDDY_EVENT_SCA_ARTICLE_CREATED","updateFocusTermsState","sortedFocusTerms","internalLinksClusters","variations","finalData","parts","prepareFinalTerms","regex","multiWordCountRegex","mapFocusTerms","dbRef","firebase","database","snapshot","exists","catch","console","onDisconnect","cancel","setRepollsAllowed","focusedState","moveFocusToStart","afterSelectionMove","firstKey","formattedEditorState","setIsInitialEditorStateFetched","loadProject","getAllProjects","setRefechForBulkArticleCreation","getTime","loadPages","activeProjectId","initialLoadPage","setNewPage","headerStore","setComponent","spend","quotaProps","MainLoader","module","exports"],"sourceRoot":""}\n
\n )\n }\n \n ) : (\n \n
\n )}\n