Update app.py

app.py

@@ -1,59 +1,37 @@
 import gradio as gr
 
-# Define the pre-stored text snippets
-snippet1 = "This is the first predefined text snippet."
-snippet2 = "This is the second predefined text snippet."
+# Predefined snippets
+snippet1 = "Here's a helpful tip for your blog post: "
+snippet2 = "Conclusion: Always remember to summarize your key points."
 
-# Function to insert snippet at a given position
-def insert_snippet(text, snippet, position):
-    return text[:position] + snippet + text[position:]
+def update_preview(text):
+    return text
 
-with gr.Blocks() as demo:
-    gr.Markdown("# Blog Writing Helper")
-    
+def insert_snippet(text, editor_content, cursor_position):
+    # Insert the snippet at the current cursor position
+    new_content = (
+        editor_content[:cursor_position] + text + editor_content[cursor_position:]
+    )
+    return new_content, new_content, cursor_position + len(text)
+
+# Create the interface
+with gr.Blocks() as app:
+    gr.Markdown("### Blog Editor with Live Preview")
     with gr.Row():
         with gr.Column():
-            text_input = gr.Textbox(lines=10, placeholder="Write your blog here...", label="Text Editor")
-            button1 = gr.Button("Insert Snippet 1")
-            button2 = gr.Button("Insert Snippet 2")
+            text_editor = gr.TextArea(label="Write your blog here", placeholder="Start typing...", lines=10, elem_id="editor")
+            with gr.Row():
+                insert_button1 = gr.Button("Insert Snippet 1")
+                insert_button2 = gr.Button("Insert Snippet 2")
         with gr.Column():
-            gr.Markdown("**Live Preview**")
-            markdown_preview = gr.Markdown(label="Live Preview", elem_id="preview-box")
-    
-    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)
-    
-    # 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)
-
-# Add custom CSS for the preview box
-css = """
-#preview-box {
-    border: 1px solid #ccc;
-    padding: 10px;
-    height: auto;
-    min-height: 200px;
-    max-height: 400px;
-    overflow: auto;
-    background-color: #f9f9f9;
-}
-"""
+            preview_box = gr.HTML(label="Live Preview", elem_id="preview", visible=True, style={'border': '1px solid black', 'padding': '10px'})
+
+    # Interactivity
+    text_editor.change(fn=update_preview, inputs=text_editor, outputs=preview_box)
+    insert_button1.click(fn=insert_snippet, inputs=[snippet1, text_editor, text_editor.cursor_position], outputs=[text_editor, preview_box, text_editor.cursor_position])
+    insert_button2.click(fn=insert_snippet, inputs=[snippet2, text_editor, text_editor.cursor_position], outputs=[text_editor, preview_box, text_editor.cursor_position])
+
+app.launch()
+
 
 demo.launch(css=css)