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

106
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 TODO
## CodeSandbox
https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
## index.html ## index.html
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>Parcel Sandbox</title> <meta charset="UTF-8">
<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> </head>
<body> <body>
<div <div x-data="setupEditor('<p>Hello World! :-)</p>')" x-init="() => init($refs.element)">
x-data="setupEditor('<p>My content goes here</p>')"
x-init="() => init($refs.editor)"
x-on:click.away="inFocus = false"
>
<template x-if="editor"> <template x-if="editor">
<nav class="space-x-1"> <div class="menu">
<button <button
class="bg-gray-200 rounded px-2 py-1" @click="editor.chain().toggleHeading({ level: 1 }).focus().run()"
x-bind:class="{ 'bg-gray-600 text-white': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
@click="editor.chain().focus().toggleBold().run()" >
H1
</button>
<button
@click="editor.chain().toggleBold().focus().run()"
:class="{ 'is-active': editor.isActive('bold') }"
> >
Bold Bold
</button> </button>
<button <button
class="bg-gray-200 rounded px-2 py-1" @click="editor.chain().toggleItalic().focus().run()"
x-bind:class="{ 'bg-gray-600 text-white': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()"
> >
Italic Italic
</button> </button>
</nav> </div>
</template> </template>
<div x-ref="editor"></div>
<button <div x-ref="element"></div>
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> </div>
<script src="src/index.js"></script> <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> </body>
</html> </html>
``` ```
## index.js ## main.js
```js ```js
import { Editor as TipTap } from "@tiptap/core" import alpinejs from 'https://cdn.skypack.dev/alpinejs'
import { defaultExtensions } from "@tiptap/starter-kit" 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 { return {
content: content,
inFocus: false,
// updatedAt is to force Alpine to
// rerender on selection change
updatedAt: Date.now(),
editor: null, editor: null,
content: content,
init(el) { init(element) {
let editor = new TipTap({ this.editor = new Editor({
element: el, element: element,
extensions: defaultExtensions(), extensions: defaultExtensions(),
content: this.content, content: this.content,
editorProps: { onUpdate: ({ editor }) => {
attributes: { this.content = editor.getHTML()
class: "prose-sm py-4 focus:outline-none" },
}
}
}) })
},
editor.on("update", () => {
this.content = this.editor.getHTML()
})
editor.on("focus", () => {
this.inFocus = true
})
editor.on("selection", () => {
this.updatedAt = Date.now()
})
this.editor = editor
}
} }
} }
``` ```