fix: added keyboard shortcut for code block

The-Commit-Company · Apr 12, 2024 · bd43e69 · bd43e69
1 parent f255c9f
commit bd43e69
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/raven-app/src/components/feature/chat/ChatInput/TextFormattingMenu.tsx b/raven-app/src/components/feature/chat/ChatInput/TextFormattingMenu.tsx
@@ -93,7 +93,7 @@ export const TextFormattingMenu = () => {
                         <BiCodeAlt {...ICON_PROPS} />
                     </IconButton>
                 </Tooltip>
-                {/* <Tooltip content={getKeyboardMetaKeyString() +'+ shift + E'} aria-label={getKeyboardMetaKeyString() +'+ shift + E'}> */}
+                <Tooltip content={getKeyboardMetaKeyString() +'+ Shift + E'} aria-label={getKeyboardMetaKeyString() +'+ Shift + E'}>
                     <IconButton
                         onClick={() => editor.chain().focus().toggleCodeBlock().run()}
                         aria-label='code block'
@@ -111,7 +111,7 @@ export const TextFormattingMenu = () => {
                     >
                         <BiCodeBlock {...ICON_PROPS} />
                     </IconButton>
-                {/* </Tooltip> */}
+                </Tooltip>
                 {/* <Tooltip content={getKeyboardMetaKeyString() + ' + Shift + X'} aria-label={getKeyboardMetaKeyString() + ' + Shift + X'}> */}
                 <IconButton
                     onClick={() => editor.chain().focus().toggleStrike().run()}

diff --git a/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx b/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx
@@ -409,21 +409,22 @@ const Tiptap = ({ slotBefore, fileProps, onMessageSend, replyMessage, clearReply
             // Pick a random placeholder from the list.
             placeholder,
         }),
-        // ToDo: can be added later as this breaks existing functionality(existing keyboard shortcuts).
-        // CodeBlockLowlight.extend({
-        //     addKeyboardShortcuts(){
-        //         return {
-        //             'Mod-Shift-E': () => this.editor.commands.toggleCodeBlock(),
-        //         }
-        //     }      
-        // }).configure({
-        //     lowlight
-        // }),
+        CodeBlockLowlight.extend({
+            addKeyboardShortcuts() {
+                return {
+                    // this extends existing shortcuts instead of overwriting
+                    ...this.parent?.(),
+                    'Mod-Shift-E': () => this.editor.commands.toggleCodeBlock(),
+                }
+            }
+        }).configure({
+            lowlight
+        }),
         CodeBlockLowlight.configure({
             lowlight
         }),
         Code.configure({
-            HTMLAttributes:{
+            HTMLAttributes: {
                 class: 'pt-0.5 px-1 pb-px bg-[var(--gray-a3)] dark:bg-[#0d0d0d] text-[var(--ruby-a11)] dark-[var(--accent-a3)] text text-xs font-mono rounded border border-gray-4 dark:border-gray-6'
             }
         }),