import gradio as gr

# Define the pre-stored text snippets
snippet1 = """|![Link Text](www.example.com)|
|:--:|
|Figure x: Caption|
"""
snippet2 = """<div style="background-color: #e6f9e6; padding: 16px 32px; outline: 2px solid; border-radius: 10px;">
This is text with a tip format!
</div>
"""

# Function to insert snippet at a given position
def insert_snippet(text, snippet, position):
    return text[:position] + snippet + text[position:]

# 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>
"""

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 Snippet 2", elem_id="button2")
        with gr.Column():
            gr.Markdown("**Live Preview**")
            markdown_preview = gr.Markdown(label="Live Preview", elem_id="preview-box")

    # 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)

demo.launch()