docs: add content

docs/src/docPages/guide/create-a-toolbar.md

@@ -1,37 +0,0 @@
-# Create a toolbar
-
-## toc
-
-TODO
-
-- [ ] commands
-- [ ] commands toggle
-- [ ] focus
-- [ ] isActive
-- [ ] isActive node/mark
-- [ ] isActive node/mark, attributes
-- [ ] isActive attributes
-
-<!-- ## Introduction
-In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you would like to have.
-
-## Adding a menu
-Let’s start to add your first button to the editor. Once initiated the editor has a powerful API. The so called *commands* allow you to modify selected text (and tons of other things). Here is an example with one single button:
-
-<demo name="SimpleMenuBar" highlight="5-11" />
-
-To mark selected text bold we can use `editor.commands.toggleBold()`. There a ton of other commands and you can even chain them to do multiple things at once.
-
-You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example.
-
-### Related Links
-* [List of available commands](/api/commands)
-
-## Configure extensions
-You are free to choose which parts of tiptap you want to use. tiptap has support for different nodes (paragraphs, blockquotes, tables and many more) and different marks (bold, italic, links). If you want to explicitly configure what kind of nodes and marks are allowed and which are not allowed, you can configure those.
-
-Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text.
-
-<demo name="Guide/BuildYourEditor" highlight="10-13,30-33" />
-
-That’s also the place where you can register custom extensions, which you or someone else built for tiptap. -->

docs/src/docPages/guide/getting-started.md

@@ -6,8 +6,8 @@
 tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s your thing. We’re working on guides for all the different frameworks and workflows, but here is the general one. The following steps should help you to integrate tiptap in your JavaScript project.
 
 ## Alternative Guides
-
 * [Vue CLI](/guide/getting-started/vue-cli)
+* [Nuxt.js](/guide/getting-started/nuxtjs)
 
 ## Requirements
 * [Node](https://nodejs.org/en/download/) installed on your machine

docs/src/docPages/guide/getting-started/nuxtjs.md

@@ -79,11 +79,17 @@ Now, let’s replace the content of `pages/index.vue` with the following example
 ```html
 <template>
   <div id="app">
-    <tiptap />
+    <client-only>
+      <tiptap />
+    </client-only>
   </div>
 </template>
 ```
 
+Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
+
+[Read more](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. Let’s start to configure your editor in the next step.
 
 ## 5. Use v-model (optional)

docs/src/docPages/guide/toolbar.md

@@ -0,0 +1,72 @@
+# Create a toolbar
+
+## toc
+
+## Introduction
+tiptap comes very raw, but that’s a good thing. You have full control (and when we say full, we mean full) about the appearance of it. That also means you have to build the editor toolbar on your own. Don’t worry though, you can start with a few buttons and we help you with everything else.
+
+## Commands
+Let’s assume you’ve got the editor running already and you want to add your first button. You’ll need a `<button>` HTML tag, and add a click handler. Depending on your setup, that can look like the following Vue.js example:
+
+```html
+<button @click="editor.chain().toggleBold().focus().run()">
+  Bold
+</button>
+```
+
+Oh, that’s a long command, right? Actually, it’s a [chain of commands](/api/commands#chain-commands), so let’s go through this one by one:
+
+```js
+editor.chain().toggleBold().focus().run()
+```
+
+1. `editor` should be a tiptap instance,
+2. `chain()` is used to tell the editor you want to execute multiple commands,
+3. `toggleBold()` marks selected text bold, or removes the bold mark from the text selection if it’s already applied,
+4. `focus()` sets the focus back to the editor and
+5. `run()` will execute the chain.
+
+In other words: This will be the typical **Bold** button for your text editor.
+
+Which commands are available depends on what extensions you’ve registered with editor. Most of the extensions come with a `set…()`, `unset…()` and `toggle…()` command. Read the extension documentation to see what’s actually available or just surf through your code editor’s autocomplete.
+
+## Keep the focus
+You’ve seen the `focus()` command in the above example already. When you click on the button, the browser focuses that DOM element and the editor loses focus. It’s likely you want to add `focus()` to all your toolbar buttons, so the writing flow of your users isn’t interrupted.
+
+## The active state
+The editor provides an `isActive()` method to check if something is applied to the selected text already. In Vue.js you can toggle a CSS class with help of that function like that:
+
+```html
+<button :class="{ 'is-active': editor.isActive('bold') }" @click="editor.chain().toggleBold().focus().run()">
+  Bold
+</button>
+```
+
+This toggles the `.is-active` class accordingly. This works for nodes, and marks. You can even check for specific attributes, here is an example with the [`Highlight`](/api/marks/highlight) mark, that ignores different attributes:
+
+```js
+editor.isActive('highlight')
+```
+
+And an example that compares the given attribute(s):
+
+```js
+editor.isActive('highlight', { color: '#ffa8a8' })
+```
+
+You can even ignore nodes and marks, but check for the attributes only. Here is an example with the [`TextAlign`](/api/extensions/text-align) extension:
+
+```js
+editor.isActive({ textAlign: 'right' })
+```
+
+If your selection spans multiple nodes or marks, or only part of the selection has a mark, `isActive()` will return `false` and indicate nothing is active. That is how it is supposed to be, because it allows people to apply a new node or mark to that selection right-away.
+
+## Icons
+Most editor toolbars use icons for their buttons. In some of our demos, we use the open source icon set [Remix Icon](https://remixicon.com/), that’s free to use. But it’s totally up to you what you use. Here are a few icon sets you can consider:
+
+* [Remix Icon](https://remixicon.com/#editor)
+* [Font Awesome](https://fontawesome.com/icons?c=editors)
+* [UI icons](https://www.ibm.com/design/language/iconography/ui-icons/library/)
+
+Also, we’re working on providing a configurable interface for tiptap. If you think that’s a great idea, [become a sponsor](/sponsor) to show us your support. 💖