ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: update alpine installation (#3081)

Browse Source 
* docs: update alpine installation

* update docs

Co-authored-by: Patrick Baber <patrick@p-squared.de>
This commit is contained in:
Patrick Baber
2022-08-12 14:30:28 +02:00
committed by GitHub
parent a06209890a
commit eb68f799eb
1 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
docs/installation/alpine.md
View File

@@ -6,7 +6,7 @@ tableOfContents: true
# Alpine.js # Alpine.js
## Introduction ## 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. 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 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 ## 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`. 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 { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
window.setupEditor = function(content) { document.addEventListener('alpine:init', () => {
return { Alpine.data('editor', (content) => {
editor: null, let editor
content: content,
updatedAt: Date.now(), // force Alpine to rerender on selection change return {
init(element) { updatedAt: Date.now(), // force Alpine to rerender on selection change
this.editor = new Editor({ init() {
element: element, const _this = this
extensions: [
StarterKit, editor = new Editor({
], element: this.$refs.element,
content: this.content, extensions: [
onUpdate: ({ editor }) => { StarterKit
this.content = editor.getHTML() ],
}, content: content,
onSelectionUpdate: () => { onCreate({ editor }) {
this.updatedAt = Date.now() _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 window.Alpine = Alpine
Alpine.start() 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. Now, let’s replace the content of the `index.html` with the following example code to use the editor in our app.
```html ```html
<!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body> <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"> <div class="menu">
<button <button
@click="editor.chain().toggleHeading({ level: 1 }).focus().run()" @click="toggleHeading({ level: 1 })"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" :class="{ 'is-active': isActive('heading', { level: 1 }, updatedAt) }"
> >
H1 H1
</button> </button>
<button <button
@click="editor.chain().toggleBold().focus().run()" @click="toggleBold()"
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active' : isActive('bold', updatedAt) }"
> >
Bold Bold
</button> </button>
<button <button
@click="editor.chain().toggleItalic().focus().run()" @click="toggleItalic()"
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active' : isActive('italic', updatedAt) }"
> >
Italic Italic
</button> </button>