feat: BoldItalicUnderlineToggles component options

resolves #495 Squashed commit of the following: commit 4cac17b0d31fe88731cc6f5275c83e049bec9fef Author: Petyo Ivanov <[email protected]> Date: Sat Jun 22 07:21:14 2024 +0300 chore: eslint commit 54bee8223588ac082a2cf58c3a4d342e13745a07 Author: Dharanish V <[email protected]> Date: Fri Jun 14 22:38:47 2024 +0530 fix: add aria-label to CreateLink button (#492) * feat: Add aria-label to CreateLink button * feat: Update CreateLink button aria-label for localization * feat: Update CreateLink button aria-label for localization commit e427be8 Author: Adriano Scazzola <[email protected]> Date: Thu Jun 13 14:28:55 2024 -0300 Add property to display / hidde buttons on BoldItalicUnderlineToggles plugin
mdx-editor · Jun 22, 2024 · 3c7187b · 3c7187b
1 parent 52d45ea
commit 3c7187b
Showing 1 changed file with 35 additions and 22 deletions.
diff --git a/src/plugins/toolbar/components/BoldItalicUnderlineToggles.tsx b/src/plugins/toolbar/components/BoldItalicUnderlineToggles.tsx
@@ -33,36 +33,49 @@ const FormatButton: React.FC<FormatButtonProps> = ({ format, addTitle, removeTit
   )
 }
 
+export interface BoldItalicUnderlineTogglesProps {
+  options?: ('Bold' | 'Italic' | 'Underline')[]
+}
+
 /**
  * A toolbar component that lets the user toggle bold, italic and underline formatting.
  * @group Toolbar Components
  */
-export const BoldItalicUnderlineToggles: React.FC = () => {
+export const BoldItalicUnderlineToggles: React.FC = ({ options }: BoldItalicUnderlineTogglesProps) => {
   const t = useTranslation()
 
   return (
     <div className={styles.toolbarGroupOfGroups}>
-      <FormatButton
-        format={IS_BOLD}
-        addTitle={t('toolbar.bold', 'Bold')}
-        removeTitle={t('toolbar.removeBold', 'Remove bold')}
-        icon="format_bold"
-        formatName="bold"
-      />
-      <FormatButton
-        format={IS_ITALIC}
-        addTitle={t('toolbar.italic', 'Italic')}
-        removeTitle={t('toolbar.removeItalic', 'Remove italic')}
-        icon="format_italic"
-        formatName="italic"
-      />
-      <FormatButton
-        format={IS_UNDERLINE}
-        addTitle={t('toolbar.underline', 'Underline')}
-        removeTitle={t('toolbar.removeUnderline', 'Remove underline')}
-        icon="format_underlined"
-        formatName="underline"
-      />
+      {!options ||
+        (options.includes('Bold') && (
+          <FormatButton
+            format={IS_BOLD}
+            addTitle={t('toolbar.bold', 'Bold')}
+            removeTitle={t('toolbar.removeBold', 'Remove bold')}
+            icon="format_bold"
+            formatName="bold"
+          />
+        ))}
+      {!options ||
+        (options.includes('Italic') && (
+          <FormatButton
+            format={IS_ITALIC}
+            addTitle={t('toolbar.italic', 'Italic')}
+            removeTitle={t('toolbar.removeItalic', 'Remove italic')}
+            icon="format_italic"
+            formatName="italic"
+          />
+        ))}
+      {!options ||
+        (options.includes('Underline') && (
+          <FormatButton
+            format={IS_UNDERLINE}
+            addTitle={t('toolbar.underline', 'Underline')}
+            removeTitle={t('toolbar.removeUnderline', 'Remove underline')}
+            icon="format_underlined"
+            formatName="underline"
+          />
+        ))}
     </div>
   )
 }