fix: Removes fixed id binded to the WYSIWYG editor (#16822)

Co-authored-by: phunguyenmurcul <51897872+phunguyenmurcul@users.noreply.github.com>
Co-authored-by: Madhuri Sandbhor <madhurisandbhor@gmail.com>
This commit is contained in:
GitStart 2023-08-14 11:24:11 +05:00 committed by GitHub
parent 69b7209c82
commit 30572eae26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -64,22 +64,16 @@ const WysiwygNav = ({
</Select> </Select>
<MainButtons> <MainButtons>
<CustomIconButton disabled id="Bold" label="Bold" name="Bold" icon={<Bold />} /> <CustomIconButton disabled label="Bold" name="Bold" icon={<Bold />} />
<CustomIconButton disabled id="Italic" label="Italic" name="Italic" icon={<Italic />} /> <CustomIconButton disabled label="Italic" name="Italic" icon={<Italic />} />
<CustomIconButton <CustomIconButton disabled label="Underline" name="Underline" icon={<Underline />} />
disabled
id="Underline"
label="Underline"
name="Underline"
icon={<Underline />}
/>
</MainButtons> </MainButtons>
<MoreButton disabled id="more" label="More" icon={<More />} /> <MoreButton disabled label="More" icon={<More />} />
</StyledFlex> </StyledFlex>
{!isExpandMode && ( {!isExpandMode && (
<Button onClick={onTogglePreviewMode} variant="tertiary" id="preview"> <Button onClick={onTogglePreviewMode} variant="tertiary">
{formatMessage({ {formatMessage({
id: 'components.Wysiwyg.ToggleMode.markdown-mode', id: 'components.Wysiwyg.ToggleMode.markdown-mode',
defaultMessage: 'Markdown mode', defaultMessage: 'Markdown mode',
@ -110,21 +104,18 @@ const WysiwygNav = ({
<MainButtons> <MainButtons>
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('Bold', editorRef)} onClick={() => onActionClick('Bold', editorRef)}
id="Bold"
label="Bold" label="Bold"
name="Bold" name="Bold"
icon={<Bold />} icon={<Bold />}
/> />
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('Italic', editorRef)} onClick={() => onActionClick('Italic', editorRef)}
id="Italic"
label="Italic" label="Italic"
name="Italic" name="Italic"
icon={<Italic />} icon={<Italic />}
/> />
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('Underline', editorRef)} onClick={() => onActionClick('Underline', editorRef)}
id="Underline"
label="Underline" label="Underline"
name="Underline" name="Underline"
icon={<Underline />} icon={<Underline />}
@ -134,37 +125,27 @@ const WysiwygNav = ({
<MoreButton <MoreButton
ref={buttonMoreRef} ref={buttonMoreRef}
onClick={handleTogglePopover} onClick={handleTogglePopover}
id="more"
label="More" label="More"
icon={<More />} icon={<More />}
/> />
{visiblePopover && ( {visiblePopover && (
<Popover <Popover onDismiss={handleTogglePopover} centered source={buttonMoreRef} spacing={4}>
onDismiss={handleTogglePopover}
centered
source={buttonMoreRef}
spacing={4}
id="popover"
>
<Flex> <Flex>
<IconButtonGroupMargin> <IconButtonGroupMargin>
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)} onClick={() => onActionClick('Strikethrough', editorRef, handleTogglePopover)}
id="Strikethrough"
label="Strikethrough" label="Strikethrough"
name="Strikethrough" name="Strikethrough"
icon={<StrikeThrough />} icon={<StrikeThrough />}
/> />
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)} onClick={() => onActionClick('BulletList', editorRef, handleTogglePopover)}
id="BulletList"
label="BulletList" label="BulletList"
name="BulletList" name="BulletList"
icon={<BulletList />} icon={<BulletList />}
/> />
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)} onClick={() => onActionClick('NumberList', editorRef, handleTogglePopover)}
id="NumberList"
label="NumberList" label="NumberList"
name="NumberList" name="NumberList"
icon={<NumberList />} icon={<NumberList />}
@ -173,7 +154,6 @@ const WysiwygNav = ({
<IconButtonGroup> <IconButtonGroup>
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('Code', editorRef, handleTogglePopover)} onClick={() => onActionClick('Code', editorRef, handleTogglePopover)}
id="Code"
label="Code" label="Code"
name="Code" name="Code"
icon={<Code />} icon={<Code />}
@ -183,14 +163,12 @@ const WysiwygNav = ({
handleTogglePopover(); handleTogglePopover();
onToggleMediaLib(); onToggleMediaLib();
}} }}
id="Image"
label="Image" label="Image"
name="Image" name="Image"
icon={<Image />} icon={<Image />}
/> />
<CustomLinkIconButton <CustomLinkIconButton
onClick={() => onActionClick('Link', editorRef, handleTogglePopover)} onClick={() => onActionClick('Link', editorRef, handleTogglePopover)}
id="Link"
label="Link" label="Link"
name="Link" name="Link"
// eslint-disable-next-line jsx-a11y/anchor-is-valid // eslint-disable-next-line jsx-a11y/anchor-is-valid
@ -198,7 +176,6 @@ const WysiwygNav = ({
/> />
<CustomIconButton <CustomIconButton
onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)} onClick={() => onActionClick('Quote', editorRef, handleTogglePopover)}
id="Quote"
label="Quote" label="Quote"
name="Quote" name="Quote"
icon={<Quote />} icon={<Quote />}
@ -210,7 +187,7 @@ const WysiwygNav = ({
</StyledFlex> </StyledFlex>
{onTogglePreviewMode && ( {onTogglePreviewMode && (
<Button onClick={onTogglePreviewMode} variant="tertiary" id="preview"> <Button onClick={onTogglePreviewMode} variant="tertiary">
{formatMessage({ {formatMessage({
id: 'components.Wysiwyg.ToggleMode.preview-mode', id: 'components.Wysiwyg.ToggleMode.preview-mode',
defaultMessage: 'Preview mode', defaultMessage: 'Preview mode',