Prevent undo after programically setting codemirror value

[ZeroPoint095]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

LORUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n"

def clear_history(editor):
    ui.run_javascript(f'''
        const element = getElement({editor.id});
        const view = element.editor;
        if (view) {{
            const CM = await import('nicegui-codemirror');

            // Get current content
            const currentContent = view.state.doc.toString();
            
            // First, mark a history boundary
            view.dispatch({{
                annotations: [
                    CM.isolateHistory.of("full"),
                    CM.Transaction.addToHistory.of(true),
                ]
            }});

            // Replace document with itself, marking it as not part of history
            // and isolating history on both sides
            view.dispatch({{
                changes: {{ from: 0, to: view.state.doc.length, insert: currentContent }},
                annotations: [
                    CM.Transaction.addToHistory.of(false),
                    CM.isolateHistory.of("full")
                ]
            }});
        }}
    ''')

def undo(editor: ui.codemirror):
    ui.run_javascript(f'''
        const element = getElement({editor.id});
        const view = element.editor;
        if (view) {{
            const CM = await import('nicegui-codemirror');
            console.log("Attempting undo");
            const result = CM.undo(view);
            console.log("Undo result:", result);
        }}
    ''')


editor = ui.codemirror(line_wrapping=True)
ui.button("do", on_click=lambda: do())
ui.button("set text", on_click=lambda: editor.set_value(LORUM * 2))
editor.value = "initial text"
ui.run(show=False)

async def do():
    editor.value = LORUM
    clear_history(editor)
    undo() # simulate CTRL-Z

Description

I have a use case to read, modify and save files using ui.codemirror. I use the same codemirror instance and when a new file is read, I change it with ui.codemirror.value = [read data]. However, users can undo reading the file with CTRL-Z.

This was my attempt to reset the undo history of codemirror, but when the value is set programically, the original value is appended to the end. ("Lorum ipsum..." becomes "Lorum ipsum... initial value").

How can I prevent users undoing programical changes, without preventing them from undoing their own changes.

NiceGUI Version

3.2.0

Python Version

3.12

Browser

Chrome, Other

Operating System

Windows

Additional Context

I will be using native mode

[evnchn]

Hello @ZeroPoint095

Sorry for sounding dumb but what about just destroy the old codemirror instance and start off with a new one?

from nicegui import ui


@ui.page('/')
def page():
    with ui.column().classes('w-full') as editor_container:
        editor = ui.codemirror('initial', line_wrapping=True)

    def force_set_text(text: str):
        nonlocal editor
        editor_container.clear()
        with editor_container:
            editor = ui.codemirror(text, line_wrapping=True)

    ui.button('set text', on_click=lambda: editor.set_value('set text'))  # can undo
    ui.button('force set text', on_click=lambda: force_set_text('force set text'))  # cannot undo


ui.run(show=False)

Blunt-knife solution, but a blunt knife is still a knife I guess 😉

[ZeroPoint095]

You don't sound dumb at all :) I had even considered it myself. However, in my project, this would break quite a few bindings (especially bind_visibility) that other elements rely on. Not to mention quite a lot of refactoring I would like to avoid

[evnchn]

If you refactored everything into make_codehilite_element then this is workable.

And sorry I don't know Codemirror enough to come up with a "proper" solution.

[falkoschindler]

This almost works:

LORUM = 'Lorem ipsum dolor sit amet'

editor = ui.codemirror(line_wrapping=True)
ui.button('Set text (with history)', on_click=lambda: editor.set_value(LORUM))
ui.button('Set text (without history)', on_click=lambda: ui.run_javascript(f'''
    const element = getElement({editor.id});
    const view = element.editor;
    if (view) {{
        const CM = await import('nicegui-codemirror');
        const newValue = {json.dumps(LORUM)};

        // Set value without adding to history
        element.emitting = false;
        view.dispatch({{
            changes: {{ from: 0, to: view.state.doc.length, insert: newValue }},
            annotations: [CM.Transaction.addToHistory.of(false)]
        }});
        element.emitting = true;
    }}
'''))

But in some edge cases, which I don't understand yet, text is appended. 🫤

[ZeroPoint095]

That's exactly the issue I ran into. I have little to none JS experience and decided to call in the experts (you guys )

I also tried creating a fresh EditorState, which achieved what I wanted, but at the cost of the theme and language/syntax highlighting.

I saw this post on the codemirror discussion board. In my case, I don't need the history back, but might be useful for other users.

[ZeroPoint095]

I bit the bullet and decided to refactor my code to re-init the codemirror object as @evnchn suggested. A more elegant solution might be a nice-to-have for future NiceGUI releases, but I won't need one atm.