add integration guide drafts for alpine & livewire

2021-01-08 18:20:28 +01:00
parent 6ef4078ad5
commit 5320d8ff66
3 changed files with 152 additions and 0 deletions
--- a/docs/src/docPages/guide/getting-started/alpinejs.md
+++ 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
+<!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;
+    }
+  };
+};
+```
--- a/docs/src/docPages/guide/getting-started/livewire.md
+++ b/docs/src/docPages/guide/getting-started/livewire.md
@@ -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>
+```
--- 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