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
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
}
}
}