Update app.py

app.py

@@ -9,10 +9,9 @@ snippet2 = """<div style="background-color: #e6f9e6; padding: 16px 32px; outline
 This is text with a tip format!
 </div>
 """
+snippet3 = """[[1]](#1)
 
-# Function to insert snippet at a given position
-def insert_snippet(text, snippet, position):
-    return text[:position] + snippet + text[position:]
+<a id="1">[1]</a> : First Last, [Example](www.example.com), 2021"""
 
 # JavaScript to get and set cursor position
 js_code = """
@@ -29,11 +28,15 @@ js_code = """
         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("This is the first predefined text snippet."); });
-    document.querySelector('#button2').addEventListener('click', function() { insertAtCursor("This is the second predefined text snippet."); });
+    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>
 """
 
@@ -44,7 +47,8 @@ with gr.Blocks() as demo:
         with gr.Column():
             text_input = gr.Textbox(lines=10, placeholder="Write your blog here...", label="Text Editor")
             button1 = gr.Button("Insert Image Table", elem_id="button1")
-            button2 = gr.Button("Insert Snippet 2", elem_id="button2")
+            button2 = gr.Button("Insert Tip Format", elem_id="button2")
+            button3 = gr.Button("Insert Reference", elem_id="button3")
         with gr.Column():
             gr.Markdown("**Live Preview**")
             markdown_preview = gr.Markdown(label="Live Preview", elem_id="preview-box")