From 5320d8ff6663736bbd3902ae650d4137280000a4 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 8 Jan 2021 18:20:28 +0100 Subject: [PATCH] add integration guide drafts for alpine & livewire --- .../guide/getting-started/alpinejs.md | 109 ++++++++++++++++++ .../guide/getting-started/livewire.md | 35 ++++++ docs/src/links.yaml | 8 ++ 3 files changed, 152 insertions(+) create mode 100644 docs/src/docPages/guide/getting-started/alpinejs.md create mode 100644 docs/src/docPages/guide/getting-started/livewire.md diff --git a/docs/src/docPages/guide/getting-started/alpinejs.md b/docs/src/docPages/guide/getting-started/alpinejs.md new file mode 100644 index 00000000..5a73adf2 --- /dev/null +++ b/docs/src/docPages/guide/getting-started/alpinejs.md @@ -0,0 +1,109 @@ +# Alpine.js + +## toc + +TODO + +https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419 + +index.html + +```html + + + + Parcel Sandbox + + + + + + +
+ +
+ + (view console for editor output) +
+ + + + +``` + +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; + } + }; +}; +``` diff --git a/docs/src/docPages/guide/getting-started/livewire.md b/docs/src/docPages/guide/getting-started/livewire.md new file mode 100644 index 00000000..4085a9a8 --- /dev/null +++ b/docs/src/docPages/guide/getting-started/livewire.md @@ -0,0 +1,35 @@ +# Livewire + +## toc + +TODO + +editor.blade.php + +```html + + +``` + +my-livewire-component.blade.php + +```html +
whereDoesntStartWith('wire:model') }} +> +
+
+``` diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 09b8c2d6..74ea37fa 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -46,6 +46,14 @@ - title: Nuxt.js link: /guide/getting-started/nuxtjs 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 link: /guide/configuration - title: Create a toolbar