Making it simple and functional

app.py

@@ -1,44 +1,29 @@
 import gradio as gr
 
 # Define the pre-stored text snippets
-snippet1 = """|![Link Text](www.example.com)|
+snippet1 = """\n\n|![Link Text](www.example.com)|
 |:--:|
 |Figure x: Caption|
 """
-snippet2 = """<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">
+snippet2 = """\n\n<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">
 This is text with a tip format!
 </div>
 """
-snippet3 = """[[1]](#1)
-
-<a id="1">[1]</a> : First Last, [Example](www.example.com), 2021"""
-
-# 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();
-        // Triggering input event to update Gradio component
-        let event = new Event('input', { bubbles: true });
-        textbox.dispatchEvent(event);
-    }
-    document.querySelector('textarea').addEventListener('click', updatePosition);
-    document.querySelector('textarea').addEventListener('keyup', updatePosition);
-    document.querySelector('#button1').addEventListener('click', function() { insertAtCursor(`|![Link Text](www.example.com)|\n|:--:|\n|Figure x: Caption|\n`); });
-    document.querySelector('#button2').addEventListener('click', function() { insertAtCursor(`<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">\nThis is text with a tip format!\n</div>\n`); });
-    document.querySelector('#button3').addEventListener('click', function() { insertAtCursor(`<a id="1">[1]</a> : First Last, [Example](www.example.com), 2021\n`); });
-</script>
-"""
+snippet3 = """\n\n[[1]](#1)\n\n<a id="1">[1]</a> : First Last, [Example](www.example.com), 2021"""
+
+# Functions to append snippets at the end of the text
+def append_snippet1(text):
+    return text + snippet1
+
+def append_snippet2(text):
+    return text + snippet2
+
+def append_snippet3(text):
+    return text + snippet3
+
+# Function to update live preview
+def preview_text(text):
+    return text
 
 with gr.Blocks() as demo:
     gr.Markdown("# Blog Writing Helper")
@@ -53,8 +38,13 @@ with gr.Blocks() as demo:
             gr.Markdown("**Live Preview**")
             markdown_preview = gr.Markdown(label="Live Preview", elem_id="preview-box")
 
+    # Button click actions to append snippets
+    button1.click(append_snippet1, inputs=text_input, outputs=text_input)
+    button2.click(append_snippet2, inputs=text_input, outputs=text_input)
+    button3.click(append_snippet3, inputs=text_input, outputs=text_input)
+
     # Live preview update
-    text_input.change(lambda text: text, inputs=text_input, outputs=markdown_preview)
+    text_input.change(preview_text, inputs=text_input, outputs=markdown_preview)
     
     # Adding JavaScript code to the HTML component
     gr.HTML(js_code)