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

add integration guide drafts for alpine & livewire

Browse Source
This commit is contained in:
Hans Pagel
2021-01-08 18:20:28 +01:00
parent 6ef4078ad5
commit 5320d8ff66
3 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
docs/src/docPages/guide/getting-started/alpinejs.md Normal file
View File

@@ -0,0 +1,109 @@
# Alpine.js
## toc
TODO
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>
<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>
<script src="src/index.js"></script>
</body>
</html>
```
index.js
```js
import { Editor as TipTap } from "@tiptap/core";
import { defaultExtensions } from "@tiptap/starter-kit";
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,
extensions: defaultExtensions(),
content: this.content,
editorProps: {
attributes: {
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;
}
};
};
```

35
docs/src/docPages/guide/getting-started/livewire.md Normal file
View File

@@ -0,0 +1,35 @@
# Livewire
## toc
TODO
editor.blade.php
```html
<!--
In your livewire component you could add an
autosave method to handle saving the content
from the editor every 10 seconds if you wanted
-->
<x-editor
wire:model="foo"
wire:poll.10000ms="autosave"
></x-editor>
```
my-livewire-component.blade.php
```html
<div
x-data="setupEditor(
@entangle($attributes->wire('model')).defer
)"
x-init="() => init($refs.editor)"
x-on:click.away="inFocus = false;"
wire:ignore
{{ $attributes->whereDoesntStartWith('wire:model') }}
>
<div x-ref="editor"></div>
</div>
```

8
docs/src/links.yaml
View File

@@ -46,6 +46,14 @@
- title: Nuxt.js - title: Nuxt.js
link: /guide/getting-started/nuxtjs link: /guide/getting-started/nuxtjs
skip: true skip: true
- title: Alpine.js
link: /guide/getting-started/alpinejs
draft: true
skip: true
- title: Livewire
link: /guide/getting-started/livewire
draft: true
skip: true
- title: Configure the editor - title: Configure the editor
link: /guide/configuration link: /guide/configuration
- title: Create a toolbar - title: Create a toolbar