marimo-team / marimo

A reactive notebook for Python — run reproducible experiments, execute as a script, deploy as an app, and version with git.
https://marimo.io
Apache License 2.0
8k stars 284 forks source link

mo.ui.code_editor UI improvements #2921

Open liquidcarbon opened 4 days ago

liquidcarbon commented 4 days ago

This is most useful for using Code Editor cells in marimo run (app) mode. Alternative could be making SQL cells available outside marimo edit.

sql_editor = mo.ui.code_editor(
    language="sql",
    value=placeholder,
    # min_height=5,         <- 1. this does not do anything
    # debounce=True,        <- 2. new feature requested
    # tab_moves_focus=True  <- 3. new feature requested
)
sql_editor = sql_editor.form(label="### SQL Editor")  # <- 4. on hitting submit (Ctrl+Enter), new line should not be created in editor
  1. height option doesn't seem to have an effect
  2. debounce requested, like in mo.ui.text
  3. currently Tab changes indentation; with this option, Tab would move focus out of the editor; when debounce=True this would effectively run a query
  4. If using code editor in a form, Submit can be activated by Ctrl+Enter, but it also creates a new line in the editor.
liquidcarbon commented 4 days ago

Illustration of app-mode SQL editor

Image

mscolnick commented 4 days ago

@liquidcarbon - min_height is "minimum height of the code editor in pixels". it works fine for me. 5 is too small for a single line

for the other feature requests, would you be interested in contributing those? i think they are great ideas

liquidcarbon commented 3 days ago

Aaaah, I didn't even consider the unit of measure - I assumed it height means number of rows, which is how they have it in Gradio.

Alas I have zero experience with TS, so I'll defer to the experts :)