Working with the Ace editor in a Quart and htmx project

[wigging]

I have a Python Quart app as shown below where the /update and /save routes return HTML for a paragraph div. The /update-editor route returns JSON that is used to update the text content of the Ace editor.

from quart import Quart, render_template, request

app = Quart(__name__)

@app.get("/")
async def index():
    """Main app page."""
    return await render_template("index.html")

@app.get("/update")
async def update():
    """Update the status message."""
    return await render_template("update.html")

@app.get("/update-editor")
async def update_editor():
    """Update text content in the Ace editor using JSON data."""
    return {"content": "New content is here."}

@app.post("/save")
async def save():
    """Save the editor content."""
    form = await request.form
    content = form.get("content", "")

    print("***")
    print(content)  # This could be saved to file or database
    print("***")

    return await render_template("save.html")

if __name__ == "__main__":
    app.run(debug=True)

The save.html template is here:

<strong>Status B:</strong> Saved text content from editor, check console

The update.html template is here:

<strong>Status A:</strong> Updated text content in the editor

The relevant content in index.html is shown below. The Ace editor lives in the #editor div. Notice the text content of the Ace editor is set with the editor.setValue function from JSON data.

<p>Update text content in the editor.</p>

<button
  type="button"
  class="btn btn-primary mb-3"
  hx-get="/update"
  hx-target="#status"
>
  Update Content
</button>

<p>Save text content from the editor.</p>

<button
  type="button"
  class="btn btn-primary"
  hx-post="/save"
  hx-target="#status"
  hx-vals="js:{content: editor.getValue()}"
>
  Save Content
</button>

<p id="status"><strong>Status:</strong> Create a new note</p>

<div id="editor">Enter some text</div>

<script>
  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/monokai");
  editor.session.setMode("ace/mode/text");
  editor.renderer.setPadding(8);
  editor.renderer.setScrollMargin(8, 8, 0, 0);
  editor.setOptions({
    fontSize: "13px",
  });

  async function loadEditorValue() {
    const response = await fetch("/update-editor");
    const data = await response.json();

    editor.setValue(data.content);
    editor.clearSelection();
  }

  document.body.addEventListener("htmx:afterSwap", async function (event) {
    if (event.detail.target.id !== "status") {
      return;
    }

    const responseUrl = new URL(event.detail.xhr.responseURL);

    if (responseUrl.pathname !== "/update") {
      return;
    }

    await loadEditorValue();
  });
</script>

After the /update response and the htmx swap, the JSON data for the Ace editor is automatically fetched from the /update-editor route. Since I'm dealing with HTML and JSON responses, this seemed like the best approach. But I'm curious if there is a better way to handle this with htmx?