docs: update alpine installation (#3081)

* docs: update alpine installation * update docs Co-authored-by: Patrick Baber <patrick@p-squared.de>
ueberdosis · Aug 12, 2022 · eb68f79 · eb68f79
1 parent a062098
commit eb68f79
Showing 1 changed file with 54 additions and 33 deletions.
diff --git 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
-<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
 </head>
 <body>
-  <div x-data="setupEditor('<p>Hello World! :-)</p>')" x-init="() => init($refs.element)">
+  <div x-data="editor('<p>Hello world! :-)</p>')">
 
-    <template x-if="editor">
+    <template x-if="isLoaded()">
       <div class="menu">
         <button
-          @click="editor.chain().toggleHeading({ level: 1 }).focus().run()"
-          :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+          @click="toggleHeading({ level: 1 })"
+          :class="{ 'is-active': isActive('heading', { level: 1 }, updatedAt) }"
         >
           H1
         </button>
         <button
-          @click="editor.chain().toggleBold().focus().run()"
-          :class="{ 'is-active': editor.isActive('bold') }"
+          @click="toggleBold()"
+          :class="{ 'is-active' : isActive('bold', updatedAt) }"
         >
           Bold
         </button>
         <button
-          @click="editor.chain().toggleItalic().focus().run()"
-          :class="{ 'is-active': editor.isActive('italic') }"
+          @click="toggleItalic()"
+          :class="{ 'is-active' : isActive('italic', updatedAt) }"
         >
           Italic
         </button>