diff --git a/docs/src/docPages/installation/alpine.md b/docs/src/docPages/installation/alpine.md index 352bc492..f40e4a2e 100644 --- a/docs/src/docPages/installation/alpine.md +++ b/docs/src/docPages/installation/alpine.md @@ -9,10 +9,69 @@ title: Alpine WYSIWYG ## Introduction The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project. -TODO +For the sake of this guide we’ll use [Vite](https://vitejs.dev/) to quickly set up a project, but you can use whatever you’re used to. Vite is just really fast and we love it. + +## Requirements +* [Node](https://nodejs.org/en/download/) installed on your machine +* Experience with [Alpine.js](https://github.com/alpinejs/alpine) + +## 1. Create a project (optional) +If you already have an existing Alpine.js project, that’s fine too. Just skip this step and proceed with the next step. + +For the sake of this guide, let’s start with a fresh [Vite](https://vitejs.dev/) project called `tiptap-example`. Vite sets up everything we need, just select the Vanilla JavaScript template. + +```bash +npm init @vitejs/app tiptap-example +cd tiptap-example +npm install +``` + +## 2. Install the dependencies +Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `alpinejs`, the `@tiptap/core` package and the `@tiptap/starter-kit` which has the most common extensions to get started quickly. + +```bash +# install with npm +npm install alpinejs @tiptap/core @tiptap/starter-kit + +# install with Yarn +yarn add alpinejs @tiptap/core @tiptap/starter-kit +``` + +If you followed step 1, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000](http://localhost:3000) in your favorite browser. This might be different, if you’re working with an existing project. + +## 3. Add a JavaScript file +To actually start using tiptap, you’ll need to write a little bit of JavaScript. Let’s put the following example code in a file called `main.js`. + +This is the fastest way to get tiptap up and running with Alpine.js. It will give you a very basic version of tiptap. No worries, you will be able to add more functionality soon. + +```js +import alpinejs from 'alpinejs' +import { Editor } from '@tiptap/core' +import { defaultExtensions } from '@tiptap/starter-kit' + +window.setupEditor = function(content) { + return { + editor: null, + content: content, + init(element) { + this.editor = new Editor({ + element: element, + extensions: defaultExtensions(), + content: this.content, + onUpdate: ({ editor }) => { + this.content = editor.getHTML() + }, + }) + }, + } +} +``` + +## 4. Add it to your app +Now, let’s replace the content of the `index.html` with the following example code to use the editor in our app. -## index.html ```html + @@ -58,26 +117,4 @@ TODO ``` -## main.js -```js -import alpinejs from 'https://cdn.skypack.dev/alpinejs' -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) { - return { - editor: null, - content: content, - init(element) { - this.editor = new Editor({ - element: element, - extensions: defaultExtensions(), - content: this.content, - onUpdate: ({ editor }) => { - this.content = editor.getHTML() - }, - }) - }, - } -} -``` +You should now see tiptap in your browser. Time to give yourself a pat on the back! :) diff --git a/docs/src/docPages/installation/cdn.md b/docs/src/docPages/installation/cdn.md index 1f234802..3e7d16d6 100644 --- a/docs/src/docPages/installation/cdn.md +++ b/docs/src/docPages/installation/cdn.md @@ -20,3 +20,5 @@ For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN b ``` + +You should now see tiptap in your browser. Time to give yourself a pat on the back! :) diff --git a/docs/src/docPages/installation/nuxt.md b/docs/src/docPages/installation/nuxt.md index 7b08e475..e7a5f5c4 100644 --- a/docs/src/docPages/installation/nuxt.md +++ b/docs/src/docPages/installation/nuxt.md @@ -93,7 +93,7 @@ Now, let’s replace the content of `pages/index.vue` with the following example Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `` tag. [Read more about cient-only components.](https://nuxtjs.org/api/components-client-only) -You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. +You should now see tiptap in your browser. Time to give yourself a pat on the back! :) ## 5. Use v-model (optional) You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project: diff --git a/docs/src/docPages/installation/react.md b/docs/src/docPages/installation/react.md index 0d777181..f6ca84be 100644 --- a/docs/src/docPages/installation/react.md +++ b/docs/src/docPages/installation/react.md @@ -79,7 +79,7 @@ const App = () => { export default App ``` -You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. +You should now see tiptap in your browser. Time to give yourself a pat on the back! :) ## 5. The complete setup (optional) Ready to add more? Below is a demo that shows how you could set up what we call the default editor. Feel free to take this and start customizing it then: diff --git a/docs/src/docPages/installation/svelte.md b/docs/src/docPages/installation/svelte.md index 55c2195e..9fdd741a 100644 --- a/docs/src/docPages/installation/svelte.md +++ b/docs/src/docPages/installation/svelte.md @@ -116,4 +116,4 @@ Now, let’s replace the content of `src/routes/index.svelte` with the following ``` -You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. +You should now see tiptap in your browser. Time to give yourself a pat on the back! :) diff --git a/docs/src/docPages/installation/vue2.md b/docs/src/docPages/installation/vue2.md index 9809f6cb..29d11f7c 100644 --- a/docs/src/docPages/installation/vue2.md +++ b/docs/src/docPages/installation/vue2.md @@ -101,7 +101,7 @@ export default { ``` -You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. +You should now see tiptap in your browser. Time to give yourself a pat on the back! :) ## 5. Use v-model (optional) You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project: diff --git a/docs/src/docPages/installation/vue3.md b/docs/src/docPages/installation/vue3.md index 86ff170f..c98fdfbe 100644 --- a/docs/src/docPages/installation/vue3.md +++ b/docs/src/docPages/installation/vue3.md @@ -129,7 +129,7 @@ export default { ``` -You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. +You should now see tiptap in your browser. Time to give yourself a pat on the back! :) ## 5. Use v-model (optional) You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is how that would work with tiptap: diff --git a/docs/src/links.yaml b/docs/src/links.yaml index a3187d4f..c526fac2 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -37,7 +37,7 @@ # skip: true - title: Alpine.js link: /installation/alpine - type: draft + type: new skip: true - title: Livewire link: /installation/livewire