Wrap selectionwith paranthesis

maheshj01 · Oct 15, 2024 · bca15b9 · bca15b9
1 parent 9bd4fa1
commit bca15b9
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/src/app/(main)/_components/completion.tsx b/src/app/(main)/_components/completion.tsx
@@ -57,12 +57,25 @@ const TextCompletionInput: React.FC<TextCompletionInputProps> = ({
 
     const handleKeyDown = async (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
         if (event.key.toLowerCase() === '`' || event.key.toLowerCase() === "'" || (event.shiftKey && event.key.toLowerCase() === '"')) {
-            event.preventDefault();
-            applyFormatting(event.key);
-            return;
-        }
-
-        if (event.ctrlKey || event.metaKey) {
+            const textarea = inputRef.current;
+            if (!textarea) return;
+            const selection = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
+            if (selection.length > 0) {
+                event.preventDefault();
+                applyFormatting(event.key);
+                return;
+            }
+        } else if (event.shiftKey && (event.key.toLowerCase() == '(' || event.key.toLowerCase() == '[' || event.key.toLowerCase() == '{' || event.key.toLowerCase() == ')' || event.key.toLowerCase() == ']' || event.key.toLowerCase() == '}')) {
+            const textarea = inputRef.current;
+            if (!textarea) return;
+            const selection = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
+            if (selection.length > 0) {
+                event.preventDefault();
+                const wrapped = wrapWithParentheses(event.key, selection);
+                const newValue = textarea.value.substring(0, textarea.selectionStart) + wrapped + textarea.value.substring(textarea.selectionEnd);
+                updateValue(newValue, textarea.selectionEnd + 2);
+            }
+        } else if (event.ctrlKey || event.metaKey) {
             switch (event.key.toLowerCase()) {
                 case 'b':
                     event.preventDefault();
@@ -107,6 +120,7 @@ const TextCompletionInput: React.FC<TextCompletionInputProps> = ({
                     break;
             }
         }
+
         if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
             switch (event.key.toLowerCase()) {
                 case 'x':
@@ -296,6 +310,25 @@ const TextCompletionInput: React.FC<TextCompletionInputProps> = ({
         updateValue(value, newCursorPos);
     };
 
+    const wrapWithParentheses = (paranthesis: string, selection: string): string => {
+        const textarea = inputRef.current;
+        if (!textarea) return '';
+        switch (paranthesis) {
+            case '(':
+            case ')':
+                return `(${selection})`;
+            case '[':
+            case ']':
+                return `[${selection}]`;
+            case '{':
+            case '}':
+                return `{${selection}}`;
+            default:
+                return '';
+        }
+
+    }
+
     const replaceSelection = async () => {
         const replacement = await navigator.clipboard.readText();
         const textarea = inputRef.current;

diff --git a/src/app/(main)/_services/MDFormatter.ts b/src/app/(main)/_services/MDFormatter.ts
@@ -13,6 +13,16 @@ export class MarkdownFormatter {
         this.value = newValue;
     }
 
+    public applyParanthesisFormatting(paranthesis: string, start: number, end: number,): { value: string, newCursorPos: number } {
+        const selectedText = this.value.substring(start, end);
+        const newValue =
+            this.value.substring(0, start) +
+            `${paranthesis}${selectedText}${paranthesis}` +
+            this.value.substring(end);
+
+        return { value: newValue, newCursorPos: end + 2 };
+    }
+
     public applyFormatting(start: number, end: number, syntax: string): { value: string, newCursorPos: number } {
         let selectedText = this.value.substring(start, end);