Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

thebigk's avatar
thebigk
OP
1 year ago
Level 13

Livewire + TipTap : How do I avoid live-update?

I'm trying to integrate TipTap editor with Livewire. So far, I was able to get it 'working' by copying code from blogs; and it's working. The problematic part? It updates live, sending requests too frequently. Instead, I'd like to send the editor content to backend only when the users clicks 'submit'. It looks easy, but I'm not able to get it to work.

<div>
    <div>
        <form wire:submit.prevent="save" class="border border-slate-300 rounded-lg p-4 space-y-4">

            <div>
                <flux:input wire:model="title" label="Title" description="The title of the discussion" />
            </div>

            <div>
                <x-editor wire:model="body" />
            </div>

            <div>
                <flux:button variant="primary">Primary</flux:button>
            </div>

        </form>
    </div>
</div>

Livewire Class:

<?php

namespace App\Livewire\Community\Discussion;

use Livewire\Component;

class Create extends Component
{

    public $title = "";

    public $body = "";

    public function save()
    {
        $body = $this->body;
        // Will add logic to save the post
    }

    public function render()
    {
        return view('livewire.community.discussion.create');
    }
}

Editor code: this is where I need help

The troubling part is:

x-data="setupEditor(@entangle($attributes['wire:model']).live)"
        x-init="() => init($refs.element)"
        wire:ignore
        {{ $attributes->whereDoesntStartWith('wire:model') }}

I'm totally clueless about how to integrate the editor with livewire so that the contents are submitted only when I click 'submit' and not upon every update (live).

I'd really appreciate some help. Thank you!

0 likes
2 replies
thebigk's avatar
thebigk
OP
1 year ago
Level 13

Requesting help from a real human. Thank you.

Please or to participate in this conversation.