feat: enhance GenericDescription component with improved toolbar and styling

Author: AbhishekA1509

src/Common/GenericDescription/GenericDescription.tsx

@@ -15,7 +15,7 @@
  */
 
 import { useMemo, useState } from 'react'
-import MDEditor, { commands } from '@uiw/react-md-editor'
+import MDEditor, { commands, MDEditorProps } from '@uiw/react-md-editor'
 
 import { ReactComponent as BoldIcon } from '@Icons/ic-bold.svg'
 import { ReactComponent as CheckedListIcon } from '@Icons/ic-checked-list.svg'
@@ -31,18 +31,16 @@ import { ReactComponent as StrikethroughIcon } from '@Icons/ic-strikethrough.svg
 import { ReactComponent as UnorderedListIcon } from '@Icons/ic-unordered-list.svg'
 
 import {
-    AppThemeType,
     Button,
     ButtonStyleType,
     ButtonVariantType,
     ComponentSizeType,
     Icon,
     ToastManager,
     ToastVariantType,
-    useTheme,
 } from '../../Shared'
 import Markdown from '../Markdown/MarkDown'
-import { showError } from '..'
+import { showError, Tooltip } from '..'
 import { DESCRIPTION_EMPTY_ERROR_MSG, DESCRIPTION_UNSAVED_CHANGES_MSG } from './constant'
 import { GenericDescriptionProps } from './types'
 import { getParsedUpdatedOnDate } from './utils'
@@ -94,14 +92,6 @@ const extraCommands = [
         ...commands.checkedListCommand,
         icon: <CheckedListIcon className="icon-dim-16 flex" />,
     },
-    {
-        ...commands.help,
-        icon: (
-            <div className="flex dc__no-shrink">
-                <Icon name="ic-help-outline" color="N700" size={16} />
-            </div>
-        ),
-    },
 ]
 
 const GenericDescription = ({
@@ -118,23 +108,21 @@ const GenericDescription = ({
 
     const [editorViewState, setEditorViewState] = useState<'write' | 'preview'>('write')
 
-    const { appTheme } = useTheme()
-
     const _date = getParsedUpdatedOnDate(updatedOn)
 
     const myCommands = useMemo(
         () => [
             {
                 ...commands.codeEdit,
-                icon: <span className="fs-13 fw-6 lh-20">Write</span>,
+                icon: <span className="fs-13 fw-4 lh-20">Write</span>,
                 execute: (...props) => {
                     setEditorViewState('write')
                     return commands.codeEdit.execute(...props)
                 },
             } satisfies typeof commands.codeEdit,
             {
                 ...commands.codePreview,
-                icon: <span className="fs-13 fw-6 lh-20">Preview</span>,
+                icon: <span className="fs-13 fw-4 lh-20">Preview</span>,
                 execute: (...props) => {
                     setEditorViewState('preview')
                     return commands.codePreview.execute(...props)
@@ -207,9 +195,47 @@ const GenericDescription = ({
     }
 
     const renderMarkdown = (source: string) => (
-        <Markdown markdown={source} breaks disableEscapedText className="mh-150 pt-8" />
+        <Markdown markdown={source} breaks disableEscapedText className="mh-150 pt-8 fs-14 fw-4 cn-9" />
     )
 
+    const renderToolbar: MDEditorProps['components']['toolbar'] = (
+        command,
+        disabled,
+        executeCommand: (command, name) => void,
+        index: number,
+    ) => {
+        if (command.name === 'edit' || command.name === 'preview') {
+            return (
+                <button
+                    key={index}
+                    type="button"
+                    className="markdown-editor__tab-button flex dc__transparent p-4"
+                    onClick={() => executeCommand(command, command.name)}
+                    disabled={disabled}
+                >
+                    {command.icon}
+                </button>
+            )
+        }
+        return (
+            <Tooltip
+                key={index}
+                alwaysShowTippyOnHover={!!command.buttonProps?.title}
+                content={command.buttonProps?.title}
+                placement="top"
+            >
+                <button
+                    type="button"
+                    className="flex dc__transparent p-4 mr-4"
+                    onClick={() => executeCommand(command, command.name)}
+                    disabled={disabled}
+                >
+                    {command.icon}
+                </button>
+            </Tooltip>
+        )
+    }
+
     return (
         <div
             data-testid="generic-description-wrapper"
@@ -246,16 +272,16 @@ const GenericDescription = ({
                     <MDEditor
                         value={modifiedValue}
                         onChange={setModifiedValue}
-                        data-color-mode={appTheme === AppThemeType.dark ? 'dark' : 'light'}
                         commands={myCommands}
                         extraCommands={extraCommands}
                         preview={editorViewState === 'preview' ? 'preview' : 'edit'}
                         components={{
                             preview: renderMarkdown,
+                            toolbar: renderToolbar,
                         }}
                     />
 
-                    <div className="flexbox dc__content-end pt-12 pb-12 dc__contain--paint">
+                    <div className="flexbox dc__content-end pt-12 pb-12 dc__contain--paint border__primary--top">
                         <div className="form__buttons dc__gap-16 px-16">
                             <Button
                                 dataTestId="description-edit-cancel-button"

src/Common/GenericDescription/genericDescription.scss

@@ -31,20 +31,48 @@
     }
 
     .w-md-editor {
+        background-color: transparent;
+        box-shadow: none;
+
         &-toolbar {
             border-bottom: 1px solid var(--border-primary);
             background-color: transparent;
             padding-inline: 16px;
-            padding-block: 8px;
+            padding-block: 0px;
             height: auto;
 
-            button {
-                color: var(--N700);
-            }
+            li {
+                .markdown-editor__tab-button {
+                    margin-block: 8px;
+                    background-color: var(--bg-primary);
+                    font-size: 13px;
+                    line-height: 20px;
+                    text-align: center;
+                    color: var(--N700);
+                    margin-right: 8px;
+                }
+
+                &.active {
+                    position: relative;
+
+                    .markdown-editor__tab-button {
+                        font-size: 13px;
+                        line-height: 20px;
+                        text-align: center;
+                        margin-right: 8px;
+                        color: var(--B500);
+                    }
+                }
 
-            .active {
-                &:hover,button {
-                    color: var(--B500);
+                &.active::after {
+                    content: '';
+                    position: absolute;
+                    display: block;
+                    width: 100%;
+                    height: 2px;
+                    background-color: var(--B500);
+                    border-radius: 4px;
+                    bottom: 0px;
                 }
             }
         }
@@ -66,6 +94,15 @@
                 margin: 0px;
                 padding: 8px 0px;
             }
+
+            .w-md-editor-input {
+                display: flex;
+                flex-direction: column;
+
+                .w-md-editor-text {
+                    flex-grow: 1;
+                }
+            }
         }
     }
 }