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

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2021-02-07 16:12:27 +01:00
parent 5571e1dd27
commit 7d15e5afb9
9 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/docPages/examples/savvy.md
View File

@@ -1,3 +1,3 @@
# Savvy
# Savvy editor
<demo name="Examples/Savvy" />

1
docs/src/docPages/experiments.md
View File

@@ -8,6 +8,7 @@ Congratulations! You’ve found our playground with a list of experiments. Be aw
* [Color](/experiments/color)
* [Commands](/experiments/commands)
* [Embeds](/experiments/embeds)
* [Multiple editors](/experiments/multiple-editors)
## Waiting for approval
* [@tiptap/extension-placeholder](/experiments/placeholder)

2
docs/src/docPages/examples/multiple-editors.md → docs/src/docPages/experiments/multiple-editors.md
View File

@@ -2,4 +2,4 @@
The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced in real-time with other users.
<demo name="Examples/MultipleEditors" />
<demo name="Experiments/MultipleEditors" />

9
docs/src/docPages/guide/styling.md
View File

@@ -26,7 +26,7 @@ p {
## Option 2: Add custom classes
Most extensions have a `class` option, which you can use to add a custom CSS class to the HTML tag.
You can control the whole rendering, including adding classes to everything.
### Extensions
Most extensions allow you to add attributes to the rendered HTML through the `HTMLAttributes` option. You can use that to add a custom class (or any other attribute). That’s also very helpful, when you work with [Tailwind CSS](https://tailwindcss.com/).
@@ -73,7 +73,7 @@ new Editor({
```
### With Tailwind CSS
The editor works fine with Tailwind CSS, too. Find an example that’s styled with the `@tailwindcss/typography` plugin.
The editor works fine with Tailwind CSS, too. Find an example that’s styled with the `@tailwindcss/typography` plugin below.
<iframe
src="https://codesandbox.io/embed/tiptap-demo-tailwind-iqjz0?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.js&theme=dark&view=preview"
@@ -84,7 +84,7 @@ The editor works fine with Tailwind CSS, too. Find an example that’s styled wi
></iframe>
## Option 3: Customize the HTML
You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag:
Or you can customize the markup for extensions. The following example will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag:
```js
import Bold from '@tiptap/extension-bold'
@@ -105,4 +105,5 @@ new Editor({
})
```
You should put your custom extensions in separate files though, but I think you got the idea.
You should put your custom extensions in separate files, but I think you got the idea.

4
docs/src/docPages/guide/toolbar.md
View File

@@ -22,8 +22,8 @@ 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
3. `focus()` sets the focus back to the editor,
4. `toggleBold()` marks the selected text bold, or removes the bold mark from the text selection if it’s already applied and
5. `run()` will execute the chain.
In other words: This will be the typical **Bold** button for your text editor.