Merge branch 'main' of https://github.com/ueberdosis/tiptap

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) {
+    init(element) {
-      let editor = new TipTap({
+      this.editor = new Editor({
-        element: el,
+        element: element,
         extensions: defaultExtensions(),
         content: this.content,
-        editorProps: {
+        onUpdate: ({ editor }) => {
-          attributes: {
+          this.content = editor.getHTML()
-            class: "prose-sm py-4 focus:outline-none"
-          }
         }
       })
 
-      editor.on("update", () => {
+      this.$watch('content', (content) => {
-        this.content = this.editor.getHTML()
+        // 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
     }
   }
 }