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

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.