diff --git a/docs/src/docPages/guide/menus.md b/docs/src/docPages/guide/menus.md
index 3e3cb73e..02d1a158 100644
--- a/docs/src/docPages/guide/menus.md
+++ b/docs/src/docPages/guide/menus.md
@@ -7,10 +7,12 @@ tableOfContents: true
## 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 can (and have to) build a menu on your own. You can start with a few buttons, and we help you to wire everything up.
+tiptap comes very raw, but that’s a good thing. You have full control about the appearance of it.
+
+When we say full control, we mean it. You can (and have to) build a menu on your own. We help you to wire everything up.
## Menus
-The editor provides a fluent API to trigger commands and add active states. You can use any markup you like. To make the positioning of line menus easier, we provide a few utilities and components. Let’s go through the most typical use cases one by one.
+The editor provides a fluent API to trigger commands and add active states. You can use any markup you like. To make the positioning of menus easier, we provide a few utilities and components. Let’s go through the most typical use cases one by one.
### Fixed menu
A fixed menu, for example on top of the editor, can be anything. We don’t provide such menu. Just add a `
` with a few ``s. How those buttons can trigger [commands](/api/commands) is [explained below](#actions).
@@ -26,12 +28,13 @@ The [floating menu](/api/extensions/floating-menu) appears in empty lines. Marku
### Slash commands (work in progress)
-It’s not an official extension yet, but [there’s an experiment you can use to add what we call slash commands](/experiments/commands). It’ll allow you to start a new line with `/` and will bring up a popup to select which node should be added.
+It’s not an official extension yet, but [there’s an experiment you can use to add what we call slash commands](/experiments/commands). It allows you to start a new line with `/` and will bring up a popup to select which node should be added.
## Buttons
Okay, you’ve got your menu. But how do you wire things up?
+
### Commands
-Let’s assume you’ve got the editor running already and you want to add your first button. You’ll need a `` HTML tag with a click handler. Depending on your setup, that can look like the following example:
+You’ve got the editor running already and want to add your first button. You need a `` HTML tag with a click handler. Depending on your setup, that can look like the following example:
```html
@@ -39,7 +42,7 @@ Let’s assume you’ve got the editor running already and you want to add your
```
-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:
+Oh, that’s a long command, right? Actually, it’s a [chain of commands](/api/commands#chain-commands). Let’s go through this one by one:
```js
editor.chain().focus().toggleBold().run()
@@ -56,7 +59,7 @@ In other words: This will be a typical **Bold** button for your text editor.
Which commands are available depends on what extensions you have registered with the editor. Most 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 have 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 menu buttons, so the writing flow of your users isn’t interrupted.
+You have already seen the `focus()` command in the above example. 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 menu 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:
@@ -67,7 +70,7 @@ The editor provides an `isActive()` method to check if something is applied to t
```
-This toggles the `.is-active` class accordingly and 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:
+This toggles the `.is-active` class accordingly and 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')
@@ -79,13 +82,13 @@ And an example that compares the given attribute(s):
editor.isActive('highlight', { color: '#ffa8a8' })
```
-There is also support for regular expressions:
+There is even support for regular expressions:
```js
editor.isActive('textStyle', { color: /.*/ })
```
-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:
+You can even 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' })
@@ -107,7 +110,7 @@ This section needs some work. Do you know what else needs to be taken into accou
:::
### Icons
-Most editor menus 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:
+Most editor menus use icons for their buttons. In some of our demos, we use the open source icon set [Remix Icon](https://remixicon.com/), which is 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)