Update app.py

app.py

@@ -1,34 +1,52 @@
 import gradio as gr
 
-# Predefined snippets
-snippet1 = "Here's a helpful tip for your blog post: "
-snippet2 = "Conclusion: Always remember to summarize your key points."
+# Define the pre-stored text snippets
+snippet1 = "This is the first predefined text snippet."
+snippet2 = "This is the second predefined text snippet."
 
-def update_preview(text):
-    return text
+# Function to insert snippet at a given position
+def insert_snippet(text, snippet, position):
+    return text[:position] + snippet + text[position:]
 
-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)
+# JavaScript to get and set cursor position
+js_code = """
+<script>
+    let position = 0;
+    function updatePosition() {
+        let textbox = document.querySelector('textarea');
+        position = textbox.selectionStart;
+    }
+    function insertAtCursor(snippet) {
+        let textbox = document.querySelector('textarea');
+        let text = textbox.value;
+        let newText = text.slice(0, position) + snippet + text.slice(position);
+        textbox.value = newText;
+        position += snippet.length;
+        textbox.focus();
+    }
+    document.querySelector('textarea').addEventListener('click', updatePosition);
+    document.querySelector('textarea').addEventListener('keyup', updatePosition);
+    document.querySelector('#button1').addEventListener('click', function() { insertAtCursor("This is the first predefined text snippet."); });
+    document.querySelector('#button2').addEventListener('click', function() { insertAtCursor("This is the second predefined text snippet."); });
+</script>
+"""
 
-# Create the interface with customized styles
-with gr.Blocks(css=".preview-box {border: 1px solid black; padding: 10px;}") as app:
-    gr.Markdown("### Blog Editor with Live Preview")
+with gr.Blocks() as demo:
+    gr.Markdown("# Blog Writing Helper")
+    
     with gr.Row():
         with gr.Column():
-            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")
+            text_input = gr.Textbox(lines=10, placeholder="Write your blog here...", label="Text Editor")
+            button1 = gr.Button("Insert Snippet 1", elem_id="button1")
+            button2 = gr.Button("Insert Snippet 2", elem_id="button2")
         with gr.Column():
-            preview_box = gr.HTML(label="Live Preview", elem_id="preview", visible=True, className="preview-box")
+            gr.Markdown("**Live Preview**")
+            markdown_preview = gr.Markdown(label="Live Preview", elem_id="preview-box")
 
-    # 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])
+    # Live preview update
+    text_input.change(lambda text: text, inputs=text_input, outputs=markdown_preview)
+    
+    # Adding JavaScript code to the HTML component
+    gr.HTML(js_code)
 
-app.launch()
+demo.launch()