Insert text shortcode at cursor in codemirror

[arunaseva]

Hello,

I want to insert shortcodes ([HELLO], [DATUM] ...) into the editor next to the cursor.

editor_el = ui.codemirror("A lot of text", line_wrapping=True)

def insert_shortcode():
    js: str = textwrap.dedent("""\
        const nicegui_editor_id = "{}";
        let editor_el = document.querySelector('#' + nicegui_editor_id);
        const cursor = editor_el.getCursor();
        editor.replaceRange("[HELLO]", cursor);
    """)
    ui.run_javascript(js.format(f"c{editor_el.id}"))

ui.button(
    "Insert shortcode HELLO at cursor",
    on_click=lambda: insert_shortcode(),
)

In the code above the editor_el is a DOM element and not the codemirror object (what I can not locate), so getCursor() and replaceRange() methods not applicable.

Maybe this is not the good way, how can I put some text to the editor cursor? I can't figure it out.

Thanks: Adam

[falkoschindler]

Hi @arunaseva,

You can use NiceGUI's helper function getElement to get a Vue element by ID. But the methods getCursor and replaceRange don't seem to work, so I improvised with the help of some AI:

editor = ui.codemirror("A lot of text")

ui.button("Insert shortcode HELLO at cursor", on_click=lambda: ui.run_javascript(f"""
    const view = getElement("{editor.id}").editor;
    const cursor = view.state.selection.main.head
    view.dispatch(view.state.update({{
        changes: {{from: cursor, insert: "[HELLO]"}}
    }}));
"""))

By the way, JavaScript doesn't care about code indentation. So you don't need to remove the indentation.

[arunaseva]

Hello @falkoschindler

Thanks a lot. It's works like a charm. I couldn't have figure it out alone without you.
AI helped me too, but not enough. :D

Other:

This JS helper functions are interesting. I can locate getElement this way below.

(nicegui) [hawk@pc ~]$ cd $(pip show nicegui | grep Location | awk '{print $2 "/nicegui"}')
(nicegui) [hawk@pc nicegui]$ pwd
/home/hawk/miniconda3/envs/nicegui/lib/python3.12/site-packages/nicegui
(nicegui) [hawk@pc nicegui]$ grep -ornI "function getElement(" .
./elements/lib/plotly/plotly.js:173277:function getElement(
./elements/lib/plotly/plotly.js:174134:function getElement(
./static/nicegui.js:41:function getElement(
./static/quasar.umd.js:2556:function getElement(
(nicegui) [hawk@pc nicegui]$ vi ./static/nicegui.js

Generally it is the best way to locate and read about python or JS functions that I couldn't find in the online documentation?