app.py

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

def update_preview(text):
    return text

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)

# 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.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")
        with gr.Column():
            preview_box = gr.HTML(label="Live Preview", elem_id="preview", visible=True, className="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])

app.launch()