From 1b8f337feaf8afcce49efab826962a58e2bdb597 Mon Sep 17 00:00:00 2001
From: Alexey Zinchenko <Prominence@users.noreply.github.com>
Date: Sat, 3 Feb 2024 09:53:25 +0300
Subject: [PATCH] feat: added possibility to select visible views for
 diff-source wrapper element (#340)

---
 .../components/DiffSourceToggleWrapper.tsx    | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/plugins/toolbar/components/DiffSourceToggleWrapper.tsx b/src/plugins/toolbar/components/DiffSourceToggleWrapper.tsx
index ba3d78fa..e7b3e9cd 100644
--- a/src/plugins/toolbar/components/DiffSourceToggleWrapper.tsx
+++ b/src/plugins/toolbar/components/DiffSourceToggleWrapper.tsx
@@ -1,4 +1,4 @@
-import { iconComponentFor$, viewMode$ } from '../../core'
+import { iconComponentFor$, ViewMode, viewMode$ } from '../../core'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 import React from 'react'
 import styles from '../../../styles/ui.module.css'
@@ -20,10 +20,29 @@ import { SingleChoiceToggleGroup } from '.././primitives/toolbar'
  *
  * @group Toolbar Components
  */
-export const DiffSourceToggleWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const DiffSourceToggleWrapper: React.FC<{ children: React.ReactNode; options?: ViewMode[] }> = ({
+  children,
+  options = ['rich-text', 'diff', 'source']
+}) => {
   const [viewMode, iconComponentFor] = useCellValues(viewMode$, iconComponentFor$)
   const changeViewMode = usePublisher(viewMode$)
 
+  const toggleGroupItems: {
+    title: string
+    contents: React.ReactNode
+    value: ViewMode
+  }[] = []
+
+  if (options.includes('rich-text')) {
+    toggleGroupItems.push({ title: 'Rich text', contents: iconComponentFor('rich_text'), value: 'rich-text' })
+  }
+  if (options.includes('diff')) {
+    toggleGroupItems.push({ title: 'Diff mode', contents: iconComponentFor('difference'), value: 'diff' })
+  }
+  if (options.includes('source')) {
+    toggleGroupItems.push({ title: 'Source', contents: iconComponentFor('markdown'), value: 'source' })
+  }
+
   return (
     <>
       {viewMode === 'rich-text' ? (
@@ -38,11 +57,7 @@ export const DiffSourceToggleWrapper: React.FC<{ children: React.ReactNode }> =
         <SingleChoiceToggleGroup
           className={styles.diffSourceToggle}
           value={viewMode}
-          items={[
-            { title: 'Rich text', contents: iconComponentFor('rich_text'), value: 'rich-text' },
-            { title: 'Diff mode', contents: iconComponentFor('difference'), value: 'diff' },
-            { title: 'Source', contents: iconComponentFor('markdown'), value: 'source' }
-          ]}
+          items={toggleGroupItems}
           onChange={(value) => changeViewMode(value || 'rich-text')}
         />
       </div>