diff --git a/docs/installation/alpine.md b/docs/installation/alpine.md
index 9da0f939a..24430b4de 100644
--- a/docs/installation/alpine.md
+++ b/docs/installation/alpine.md
@@ -6,7 +6,7 @@ tableOfContents: true
# Alpine.js
## Introduction
-The following guide describes how to integrate Tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
+The following guide describes how to integrate Tiptap with version 3 of [Alpine.js](https://github.com/alpinejs/alpine).
For the sake of this guide we’ll use [Vite](https://vitejs.dev/) to quickly set up a project, but you can use whatever you’re used to. Vite is just really fast and we love it.
@@ -34,7 +34,7 @@ Okay, enough of the boring boilerplate work. Let’s finally install Tiptap! For
npm install alpinejs @tiptap/core @tiptap/starter-kit
```
-If you followed step 1, you can now start your project with `npm run dev`, and open [http://localhost:3000](http://localhost:3000) in your favorite browser. This might be different, if you’re working with an existing project.
+If you followed step 1, you can now start your project with `npm run dev`, and open [http://localhost:5173](http://localhost:5173) in your favorite browser. This might be different, if you’re working with an existing project.
## 3. Initialize the editor
To actually start using Tiptap, you’ll need to write a little bit of JavaScript. Let’s put the following example code in a file called `main.js`.
@@ -46,28 +46,50 @@ import Alpine from 'alpinejs'
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
-window.setupEditor = function(content) {
- return {
- editor: null,
- content: content,
- updatedAt: Date.now(), // force Alpine to rerender on selection change
- init(element) {
- this.editor = new Editor({
- element: element,
- extensions: [
- StarterKit,
- ],
- content: this.content,
- onUpdate: ({ editor }) => {
- this.content = editor.getHTML()
- },
- onSelectionUpdate: () => {
- this.updatedAt = Date.now()
- },
- })
- },
- }
-}
+document.addEventListener('alpine:init', () => {
+ Alpine.data('editor', (content) => {
+ let editor
+
+ return {
+ updatedAt: Date.now(), // force Alpine to rerender on selection change
+ init() {
+ const _this = this
+
+ editor = new Editor({
+ element: this.$refs.element,
+ extensions: [
+ StarterKit
+ ],
+ content: content,
+ onCreate({ editor }) {
+ _this.updatedAt = Date.now()
+ },
+ onUpdate({ editor }) {
+ _this.updatedAt = Date.now()
+ },
+ onSelectionUpdate({ editor }) {
+ _this.updatedAt = Date.now()
+ }
+ });
+ },
+ isLoaded() {
+ return editor
+ },
+ isActive(type, opts = {}) {
+ return editor.isActive(type, opts)
+ },
+ toggleHeading(opts) {
+ editor.chain().toggleHeading(opts).focus().run()
+ },
+ toggleBold() {
+ editor.chain().toggleBold().focus().run()
+ },
+ toggleItalic() {
+ editor.chain().toggleItalic().focus().run()
+ },
+ };
+ });
+});
window.Alpine = Alpine
Alpine.start()
@@ -77,32 +99,31 @@ Alpine.start()
Now, let’s replace the content of the `index.html` with the following example code to use the editor in our app.
```html
-
-