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

docs: refactor alpine.js example

Browse Source
This commit is contained in:
Hans Pagel
2021-04-08 22:12:46 +02:00
parent 0f5f8840ed
commit 527c5c7a3e
1 changed files with 52 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
docs/src/docPages/installation/alpine.md
View File

@@ -11,105 +11,73 @@ The following guide describes how to integrate tiptap with your [Alpine.js](http
TODO
## CodeSandbox
https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
## index.html
```html
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"
defer
></script>
</head>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div x-data="setupEditor('<p>Hello World! :-)</p>')" x-init="() => init($refs.element)">
<body>
<div
x-data="setupEditor('<p>My content goes here</p>')"
x-init="() => init($refs.editor)"
x-on:click.away="inFocus = false"
>
<template x-if="editor">
<nav class="space-x-1">
<button
class="bg-gray-200 rounded px-2 py-1"
x-bind:class="{ 'bg-gray-600 text-white': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()"
>
Bold
</button>
<button
class="bg-gray-200 rounded px-2 py-1"
x-bind:class="{ 'bg-gray-600 text-white': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()"
>
Italic
</button>
</nav>
</template>
<div x-ref="editor"></div>
<button
class="bg-indigo-500 text-white rounded px-3 py-1"
x-on:click="console.log(content)"
>
Submit
</button>
(view console for editor output)
</div>
<template x-if="editor">
<div class="menu">
<button
@click="editor.chain().toggleHeading({ level: 1 }).focus().run()"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
>
H1
</button>
<button
@click="editor.chain().toggleBold().focus().run()"
:class="{ 'is-active': editor.isActive('bold') }"
>
Bold
</button>
<button
@click="editor.chain().toggleItalic().focus().run()"
:class="{ 'is-active': editor.isActive('italic') }"
>
Italic
</button>
</div>
</template>
<script src="src/index.js"></script>
</body>
<div x-ref="element"></div>
</div>
<script type="module" src="/main.js"></script>
<style>
body { margin: 2rem; font-family: sans-serif; }
button.is-active { background: black; color: white; }
.ProseMirror { padding: 0.5rem 1rem; margin: 1rem 0; border: 1px solid #ccc; }
</style>
</body>
</html>
```
## index.js
## main.js
```js
import { Editor as TipTap } from "@tiptap/core"
import { defaultExtensions } from "@tiptap/starter-kit"
import alpinejs from 'https://cdn.skypack.dev/alpinejs'
import { Editor } from 'https://cdn.skypack.dev/@tiptap/core?min'
import { defaultExtensions } from 'https://cdn.skypack.dev/@tiptap/starter-kit?min'
window.setupEditor = function (content) {
window.setupEditor = function(content) {
return {
content: content,
inFocus: false,
// updatedAt is to force Alpine to
// rerender on selection change
updatedAt: Date.now(),
editor: null,
init(el) {
let editor = new TipTap({
element: el,
content: content,
init(element) {
this.editor = new Editor({
element: element,
extensions: defaultExtensions(),
content: this.content,
editorProps: {
attributes: {
class: "prose-sm py-4 focus:outline-none"
}
}
onUpdate: ({ editor }) => {
this.content = editor.getHTML()
},
})
editor.on("update", () => {
this.content = this.editor.getHTML()
})
editor.on("focus", () => {
this.inFocus = true
})
editor.on("selection", () => {
this.updatedAt = Date.now()
})
this.editor = editor
}
},
}
}
```