ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: update menu page

Browse Source
This commit is contained in:
hanspagel
2021-08-30 23:55:43 +02:00
parent 7bf44a146a
commit 73a278a5d3
1 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
docs/src/docPages/guide/menus.md
View File

@@ -7,10 +7,12 @@ tableOfContents: true
## toc ## toc
## Introduction ## 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 ## 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 ### Fixed menu
A fixed menu, for example on top of the editor, can be anything. We don’t provide such menu. Just add a `<div>` with a few `<button>`s. How those buttons can trigger [commands](/api/commands) is [explained below](#actions). A fixed menu, for example on top of the editor, can be anything. We don’t provide such menu. Just add a `<div>` with a few `<button>`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
<tiptap-demo name="Extensions/FloatingMenu" hideSource></tiptap-demo> <tiptap-demo name="Extensions/FloatingMenu" hideSource></tiptap-demo>
### Slash commands (work in progress) ### 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 ## Buttons
Okay, you’ve got your menu. But how do you wire things up? Okay, you’ve got your menu. But how do you wire things up?
### Commands ### 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 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 `<button>` HTML tag with a click handler. Depending on your setup, that can look like the following example:
```html ```html
<button onclick="editor.chain().toggleBold().focus().run()"> <button onclick="editor.chain().toggleBold().focus().run()">
@@ -39,7 +42,7 @@ Let’s assume you’ve got the editor running already and you want to add your
</button> </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: 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 ```js
editor.chain().focus().toggleBold().run() 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. 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 ### 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 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: 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
</button> </button>
``` ```
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 ```js
editor.isActive('highlight') editor.isActive('highlight')
@@ -79,13 +82,13 @@ And an example that compares the given attribute(s):
editor.isActive('highlight', { color: '#ffa8a8' }) editor.isActive('highlight', { color: '#ffa8a8' })
``` ```
There is also support for regular expressions: There is even support for regular expressions:
```js ```js
editor.isActive('textStyle', { color: /.*/ }) 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 ```js
editor.isActive({ textAlign: 'right' }) 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 ### 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) * [Remix Icon](https://remixicon.com/#editor)
* [Font Awesome](https://fontawesome.com/icons?c=editors) * [Font Awesome](https://fontawesome.com/icons?c=editors)