From 87a0693e073a697cd73bdb7a29412cef11f54f39 Mon Sep 17 00:00:00 2001
From: Peter Fox <peter.fox@peterfox.me>
Date: Tue, 10 Jan 2023 21:52:50 +0000
Subject: [PATCH] Update php.md

Changes are based on reading this thread https://github.com/ueberdosis/tiptap/issues/1515#issuecomment-896477157

This example relies on AlpineJS still and doing causes the editor to be wrapped in an observable/reactive layer. Moving the editor out of the returned object means it doesn't become a proxy object; otherwise, `editor.commands.setContent(content, false)` will already trigger an error `Range Error: Applying a mismatched transaction` and not work.
---
 docs/installation/php.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/installation/php.md b/docs/installation/php.md
index 2e373ffaa6f..8c0957055fe 100644
--- a/docs/installation/php.md
+++ b/docs/installation/php.md
@@ -45,12 +45,13 @@ import { Editor } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
 
 window.setupEditor = function (content) {
+  let editor
+
   return {
-    editor: null,
     content: content,
 
     init(element) {
-      this.editor = new Editor({
+      editor = new Editor({
         element: element,
         extensions: [
           StarterKit,
@@ -63,7 +64,7 @@ window.setupEditor = function (content) {
 
       this.$watch('content', (content) => {
         // If the new content matches TipTap's then we just skip.
-        if (content === this.editor.getHTML()) return
+        if (content === editor.getHTML()) return
 
         /*
           Otherwise, it means that a force external to TipTap
@@ -74,7 +75,7 @@ window.setupEditor = function (content) {
           For more information on the `setContent()` method, see:
             https://www.tiptap.dev/api/commands/set-content
         */
-        this.editor.commands.setContent(content, false)
+        editor.commands.setContent(content, false)
       })
     }
   }