fix: Add option prop to StrikeThroughSupSubTogglesProps

mdx-editor · Jul 2, 2024 · c501db9 · c501db9
1 parent 40a6be9
commit c501db9
Showing 1 changed file with 34 additions and 22 deletions.
diff --git a/src/plugins/toolbar/components/BoldItalicUnderlineToggles.tsx b/src/plugins/toolbar/components/BoldItalicUnderlineToggles.tsx
@@ -78,35 +78,47 @@ export const BoldItalicUnderlineToggles: React.FC = ({ options }: BoldItalicUnde
   )
 }
 
+export interface StrikeThroughSupSubTogglesProps {
+  options?: ('Strikethrough' | 'Sub' | 'Sup')[]
+}
+
 /**
  * A toolbar component that lets the user toggle strikeThrough, superscript and subscript formatting.
  * @group Toolbar Components
  */
-export const StrikeThroughSupSubToggles: React.FC = () => {
+export const StrikeThroughSupSubToggles: React.FC = ({ options }: StrikeThroughSupSubTogglesProps) => {
   const t = useTranslation()
+  const showAllButtons = typeof options === 'undefined'
+
   return (
     <div className={styles.toolbarGroupOfGroups}>
-      <FormatButton
-        format={IS_STRIKETHROUGH}
-        addTitle={t('toolbar.strikethrough', 'Strikethrough')}
-        removeTitle={t('toolbar.removeStrikethrough', 'Remove strikethrough')}
-        icon="strikeThrough"
-        formatName="strikethrough"
-      />
-      <FormatButton
-        format={IS_SUPERSCRIPT}
-        addTitle={t('toolbar.superscript', 'Superscript')}
-        removeTitle={t('toolbar.removeSuperscript', 'Remove superscript')}
-        icon="superscript"
-        formatName="superscript"
-      />
-      <FormatButton
-        format={IS_SUBSCRIPT}
-        addTitle={t('toolbar.subscript', 'Subscript')}
-        removeTitle={t('toolbar.removeSubscript', 'Remove subscript')}
-        icon="subscript"
-        formatName="subscript"
-      />
+      {showAllButtons || options.includes('Strikethrough') ? (
+        <FormatButton
+          format={IS_STRIKETHROUGH}
+          addTitle={t('toolbar.strikethrough', 'Strikethrough')}
+          removeTitle={t('toolbar.removeStrikethrough', 'Remove strikethrough')}
+          icon="strikeThrough"
+          formatName="strikethrough"
+        />
+      ) : null}
+      {showAllButtons || options.includes('Sup') ? (
+        <FormatButton
+          format={IS_SUPERSCRIPT}
+          addTitle={t('toolbar.superscript', 'Superscript')}
+          removeTitle={t('toolbar.removeSuperscript', 'Remove superscript')}
+          icon="superscript"
+          formatName="superscript"
+        />
+      ) : null}
+      {showAllButtons || options.includes('Sub') ? (
+        <FormatButton
+          format={IS_SUBSCRIPT}
+          addTitle={t('toolbar.subscript', 'Subscript')}
+          removeTitle={t('toolbar.removeSubscript', 'Remove subscript')}
+          icon="subscript"
+          formatName="subscript"
+        />
+      ) : null}
     </div>
   )
 }