feat: keyboard shortcut info inside formatter's tooltip (#1103)

Author: AlokPy1484

packages/react/src/lib/textFormat.js

@@ -1,11 +1,7 @@
 export const formatter = [
-  { name: 'bold', pattern: '*{{text}}*', tooltip: 'Bold' },
-  { name: 'italic', pattern: '_{{text}}_', tooltip: 'Italic' },
-  { name: 'strike', pattern: '~{{text}}~', tooltip: 'Strikethrough' },
-  { name: 'code', pattern: '`{{text}}`', tooltip: 'Inline code' },
-  {
-    name: 'multiline',
-    pattern: '```\n{{text}}\n```',
-    tooltip: 'Multi-line code',
-  },
+  { name: 'bold', pattern: '*{{text}}*', tooltip: 'Bold', shortcut: 'Ctrl + B' },
+  { name: 'italic', pattern: '_{{text}}_', tooltip: 'Italic', shortcut: 'Ctrl + I' },
+  { name: 'strike', pattern: '~{{text}}~', tooltip: 'Strikethrough', shortcut: '' },
+  { name: 'code', pattern: '`{{text}}`', tooltip: 'Inline code', shortcut: '' },
+  { name: 'multiline',  pattern: '```\n{{text}}\n```', tooltip: 'Multi-line code', shortcut: ''}
 ];

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -216,7 +216,7 @@ const ChatInputFormattingToolbar = ({
           </React.Fragment>
         ) : (
           <Tooltip
-            text={item.name}
+            text={`${item.name} ${item.shortcut && `(${item.shortcut})`}`}
             position="top"
             key={`formatter-${item.name}`}
           >
@@ -296,7 +296,7 @@ const ChatInputFormattingToolbar = ({
           if (itemInFormatter) {
             return (
               <Tooltip
-                text={itemInFormatter.name}
+                text={`${itemInFormatter.name} ${itemInFormatter.shortcut && `(${itemInFormattershortcut})`}`}
                 position="top"
                 key={`formatter-${itemInFormatter.name}`}
               >