Adding box

app.py

@@ -4,14 +4,9 @@ import gradio as gr
 snippet1 = "This is the first predefined text snippet."
 snippet2 = "This is the second predefined text snippet."
 
-def insert_snippet1(text):
-    return text + snippet1
-
-def insert_snippet2(text):
-    return text + snippet2
-
-def preview_text(text):
-    return text
+# Function to insert snippet at a given position
+def insert_snippet(text, snippet, position):
+    return text[:position] + snippet + text[position:]
 
 with gr.Blocks() as demo:
     gr.Markdown("# Blog Writing Helper")
@@ -22,10 +17,31 @@ with gr.Blocks() as demo:
             button1 = gr.Button("Insert Snippet 1")
             button2 = gr.Button("Insert Snippet 2")
         with gr.Column():
-            markdown_preview = gr.Markdown(label="Live Preview")
+            gr.Markdown("**Live Preview**")
+            with gr.Box():
+                markdown_preview = gr.Markdown(label="Live Preview")
+    
+    button1.click(lambda text, position: insert_snippet(text, snippet1, position), inputs=[text_input, gr.State(0)], outputs=text_input)
+    button2.click(lambda text, position: insert_snippet(text, snippet2, position), inputs=[text_input, gr.State(0)], outputs=text_input)
+    text_input.change(lambda text: text, inputs=text_input, outputs=markdown_preview)
     
-    button1.click(insert_snippet1, inputs=text_input, outputs=text_input)
-    button2.click(insert_snippet2, inputs=text_input, outputs=text_input)
-    text_input.change(preview_text, inputs=text_input, outputs=markdown_preview)
+    # Add custom JavaScript to get cursor position
+    js_code = """
+    <script>
+        let textbox = document.querySelector('textarea');
+        let position = 0;
+        
+        textbox.addEventListener('click', () => {
+            position = textbox.selectionStart;
+        });
+        
+        textbox.addEventListener('keyup', () => {
+            position = textbox.selectionStart;
+        });
+        
+        gradio.input('state', position);
+    </script>
+    """
+    gr.HTML(js_code)
 
 demo.launch()