Skip to content

Instantly share code, notes, and snippets.

@bjornbjorn

bjornbjorn/app.js

Last active February 25, 2022 21:08
Show Gist options
  • Save bjornbjorn/4ba968ca6400f837e90db7134fea064f to your computer and use it in GitHub Desktop.
Save bjornbjorn/4ba968ca6400f837e90db7134fea064f to your computer and use it in GitHub Desktop.
Download ZIP
Laravel Livewire tiptap.dev editor with blade component saving content on blur
Raw
app.js
import Tiptap from './tiptap';
Alpine.data('tiptapEditor', Tiptap);
window.Alpine = Alpine
Alpine.start()
...
Raw
block-body.blade.php (Livewire component template file)
<div class="mt-4 mb-2" wire:key="block-body-{{$block->id}}">
<x-editor wire:model="block.text"/>
</div>
Raw
editor.blade.php (blade component)
<div
x-data="tiptapEditor($wire.entangle('{{ $attributes->wire('model')->value() }}'))"
wire:ignore
{{ $attributes->whereDoesntStartWith('wire:model') }}
>
<template x-if="editor && menuOpen">
<div class="absolute right-0">
<div class="flex items-center m-2 relative -left-16 -top-8 z-40">
<a class="mr-2 select-none" x-on:click="Alpine.raw(editor).chain().toggleBold().focus().run()">
<svg class="fill-black outline-gray-200" :class="isBold ? 'outline' : ''" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5609 7.31641C12.5259 6.60877 13.1231 5.42833 12.9785 4.10878C12.7809 2.30548 11.1432 0.99999 9.32916 1H2V2L3.44721 2.72361C3.786 2.893 4 3.23926 4 3.61803V12.382C4 12.7607 3.786 13.107 3.44721 13.2764L2 14V15H9.82266C11.9265 15 13.8031 13.4525 13.9845 11.3565C14.1409 9.55075 13.0963 7.96788 11.5609 7.31641ZM7 3H8C9.10455 3 10 3.89539 10 5C10 6.10455 9.10455 7 8 7H7V3ZM9 13H7V9H9C10.1046 9 11 9.89539 11 11C11 12.1046 10.1046 13 9 13Z"/>
</svg>
</a>
<a class="mr-2 select-none" x-on:click="Alpine.raw(editor).chain().toggleItalic().focus().run()">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2V0H6V2H7.27066C7.57493 2 7.80867 2.26949 7.76563 2.57071L6.25553 13.1414C6.18515 13.6341 5.76323 14 5.26558 14H4V16H10V14H8.72934C8.42506 14 8.19133 13.7305 8.23436 13.4293L9.74447 2.85858C9.81485 2.36593 10.2368 2 10.7344 2H12Z" fill="#282828"/>
</svg>
</a>
</div>
</div>
</template>
<div
x-ref="editor"
></div>
</div>
Raw
tiptap.js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
const data = (content) => ({
editor: null,
isBold: false,
content,
init() {
this.editor = new Editor({
element: this.$refs['editor'],
extensions: [
StarterKit
],
content: this.content,
onUpdate: ({editor}) => {
this.content = editor.getHTML()
},
onSelectionUpdate: () => {
this.isBold = this.editor.isActive('bold')
},
})
this.editor.on('blur', () => {
console.log('Save on blur.');
this.$wire.save();
});
}
});
export default data;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment