app.py

import gradio as gr

# Define the pre-stored text snippets
snippet1 = """\n\n|![Link Text](www.example.com)|
|:--:|
|Figure x: Caption|
"""
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 = """\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")
    
    with gr.Row():
        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 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")

    # 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(preview_text, inputs=text_input, outputs=markdown_preview)
    
    # Adding JavaScript code to the HTML component
    gr.HTML(js_code)

demo.launch()