Wappler's preview window frozen due to javascript

Wappler 6.8.0
Macos 14.6.0
Nodejs project

Got a new weird bug, on this particular content page the built-in browser preview window hangs/freezes and becomes unusable.

See:

It has something to do with this javascript:

  // Function to initialize Tiptap
function initializeTiptapEditor(content) {
    const form = document.getElementById('formLectureUpsert');
    const editorElement = form.querySelector(".tiptap-editor");
    const hiddenInput = document.getElementById('hiddenEditorContent');
    
    // Initialize Tiptap
    const editor = window.initTiptap({
        element: editorElement,
        content: hiddenInput.value,
        buttons: Array.from(form.querySelectorAll('.tiptap-button')).map(btn => btn.id || btn.getAttribute('data-tiptap-command'))
    });

    // Function to update editor content
    window.updateTiptapContent = (content) => {
        if (editor) {
            editor.commands.setContent(content);
            hiddenInput.value = content; // Update hidden input as well
        }
    };

    // Update hidden input before form submission
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        hiddenInput.value = editor.getHTML();
        dmx.parse('content.formLectureUpdate.submit()');
    });

    // Return the editor instance in case you need to use it elsewhere
    return editor;
}

// Keep this event listener to ensure the function is available after the DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
    // The function is now defined globally and can be called when needed
    window.initializeTiptapEditor = initializeTiptapEditor;
});
</script>

As when I comment this out, it'll work as expected again.

@patrick let me know how I can provide more information to debug this. It's sadly very limiting as I can't use the preview at all.

Tiptap! I would love to see if you get it working.

Sorry @karh but I have to ask...

What are you doing here?

Pretty far :slight_smile:
I'm not making it as an appconnect extension though as it's just too much extra work to dive into that now.

Have an editor loading, retrieving data from the db, storing it again in the db.
Just working on making it compatible to have multiple editors now and having an image / audio uploader that stores it in s3.

I'll be honest and tell you that 80% is done by Claude.
I think this is a remnant of earlier versions, code is messy still.

However we do have similar code in main.js:

// Expose initTiptap to the global scope
window.initTiptap = initTiptap;
window.destroyTiptapEditor = destroyTiptapEditor;

Tips always welcome :slight_smile:

1 Like

Are you setting up the collaboration feature?

No, we don't have a use case for it (yet). Perhaps in the future.
I did however set up the connection with the pro repo so we can make use of pro plugins.

Also I'm bundling the code it now with Vite, but not happy with the devops side of this yet.
Need to run the watcher so it builds the main.js file. I also use Prepros to compile our scss. Then we have livereload for reloading the browser, and nodemon for restarting the server on changes.
THis should all be possible to replace with Vite I believe (or perhaps other bundlers).

So I'll see later if I can get it to replace nodemon or at least make it all 1 command (run the server, watch files, livereload, watch files to be bundled).

1 Like

Interesting, so you're doing a lot of build activities outside of what Wappler provides?

Yes sadly the more mature the project becomes, the less stuff we can use from Wappler due to limitations :frowning: