mirror of
https://github.com/strapi/strapi.git
synced 2025-11-26 07:01:14 +00:00
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:
parent
69b7209c82
commit
30572eae26
@ -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',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user