Update quill docs

Author: rawilk

docs/rich-text/quill.md

@@ -181,16 +181,19 @@ You will then need to utilize the `config` slot on the component to define a Jav
         toolbarHandlers: { 
             variables: function (value) { 
                 value = `[[ ${value} ]]`;
-                const quill = instance.__quill;
-                const cursorPosition = quill.getSelection().index;
-                quill.insertText(cursorPosition, value);
-                quill.setSelection(cursorPosition + value.length); 
+                const cursorPosition = this.quill.getSelection().index;
+                this.quill.insertText(cursorPosition, value);
+                this.quill.setSelection(cursorPosition + value.length); 
             },
         },
     </x-slot:config>
 </x-quill>
 ```
 
+> {note} It is important to not use arrow functions for the toolbar handlers, as they will not have access to the `this` context of Quill.
+> For the example above, it is important to reference the quill instance via `this.quill`, otherwise you may get unexpected results when
+> inserting text.
+
 This example will provide a custom dropdown menu with two options, and when each one is clicked on, it will insert the text of the option into the editor at the current cursor position of the user. Your work is not done yet, however. Quill editor uses CSS styling to render the text into the toolbar buttons, so you will need to add some styles to your stylesheet:
 
 ```css
@@ -216,7 +219,7 @@ slot to do this. The config slot is inside a JavaScript function that returns an
 
 | variable | description |
 | --- | --- |
-| `instance` | The Alpine data instance for the quill component. To access to the quill editor instance, you can do so via `instance.__quill` |
+| `instance` | The Alpine data instance for the quill component |
 | `quillOptions` | An object containing the options generated by the component |
 
 For a complete list of quill configuration options, see [Quill Configuration](https://quilljs.com/docs/configuration/).

docs/upgrade.md

@@ -84,11 +84,10 @@ Here is an example of how you could define a handler for a custom toolbar button
 ```html
 <x-slot:config>
     toolbarHandlers: { 
-        variables: function(value) { 
-            const quill = instance.__quill;
-            const cursorPosition = quill.getSelection().index;
-            quill.insertText(cursorPosition, value);
-            quill.setSelection(cursorPosition +value.length);
+        variables: function (value) {
+            const cursorPosition = this.quill.getSelection().index;
+            this.quill.insertText(cursorPosition, value);
+            this.quill.setSelection(cursorPosition +value.length);
         },
     },
 </x-slot:config>