From bc78b8bb8f29847abdc30b7656eacbc1420f0dba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Gonz=C3=A1lez?= <yo@jorgeglz.io>
Date: Mon, 3 May 2021 15:47:43 -0500
Subject: [PATCH] [Docs] Improve example integration with Laravel Livewire
 (#1255)

* Improve example docs for integration with Laravel Livewire

* Revert code snippet to HTML
---
 docs/src/docPages/installation/livewire.md | 47 ++++++++++------------
 1 file changed, 21 insertions(+), 26 deletions(-)

diff --git a/docs/src/docPages/installation/livewire.md b/docs/src/docPages/installation/livewire.md
index d09b2a3a..e5edb2cb 100644
--- a/docs/src/docPages/installation/livewire.md
+++ b/docs/src/docPages/installation/livewire.md
@@ -28,10 +28,9 @@ TODO
 ```html
 <div
   x-data="setupEditor(
-    @entangle($attributes->wire('model')).defer
+    $wire.entangle('{{ $attributes->wire('model') }}').defer
   )"
   x-init="() => init($refs.editor)"
-  x-on:click.away="inFocus = false;"
   wire:ignore
   {{ $attributes->whereDoesntStartWith('wire:model') }}
 >
@@ -41,43 +40,39 @@ TODO
 
 ## index.js
 ```js
-import { Editor as TipTap } from "@tiptap/core"
+import { Editor } from "@tiptap/core"
 import { defaultExtensions } from "@tiptap/starter-kit"
 
 window.setupEditor = function (content) {
   return {
-    content: content,
-    inFocus: false,
-    // updatedAt is to force Alpine to
-    // rerender on selection change
-    updatedAt: Date.now(),
     editor: null,
+    content: content,
 
-    init(el) {
-      let editor = new TipTap({
-        element: el,
+    init(element) {
+      this.editor = new Editor({
+        element: element,
         extensions: defaultExtensions(),
         content: this.content,
-        editorProps: {
-          attributes: {
-            class: "prose-sm py-4 focus:outline-none"
-          }
+        onUpdate: ({ editor }) => {
+          this.content = editor.getHTML()
         }
       })
 
-      editor.on("update", () => {
-        this.content = this.editor.getHTML()
-      })
+      this.$watch('content', (content) => {
+        // If the new content matches TipTap's then we just skip.
+        if (content === this.editor.getHTML()) return
 
-      editor.on("focus", () => {
-        this.inFocus = true
+        /*
+          Otherwise, it means that a force external to TipTap
+          is modifying the data on this Alpine component,
+          which could be Livewire itself.
+          In this case, we just need to update TipTap's
+          content and we're good to do.
+          For more information on the `setContent()` method, see:
+            https://www.tiptap.dev/api/commands/set-content
+        */
+        this.editor.commands.setContent(content, false)
       })
-
-      editor.on("selection", () => {
-        this.updatedAt = Date.now()
-      })
-
-      this.editor = editor
     }
   }
 }