diff --git a/docs/src/demos/Examples/Savvy/index.vue b/docs/src/demos/Examples/Savvy/index.vue
index 8727853a9..7fcedf83c 100644
--- a/docs/src/demos/Examples/Savvy/index.vue
+++ b/docs/src/demos/Examples/Savvy/index.vue
@@ -7,7 +7,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
-import Heading from '@tiptap/extension-heading'
+import Code from '@tiptap/extension-code'
import Typography from '@tiptap/extension-typography'
import { ColorHighlighter } from './ColorHighlighter'
@@ -28,23 +28,21 @@ export default {
Document,
Paragraph,
Text,
- Heading.configure({
- levels: [1, 2],
- }),
+ Code,
Typography,
ColorHighlighter,
],
content: `
-
- What’s a savvy text editor?
-
- Maybe an editor which detects hex colors like #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, or #9DEF8F and adds a color swatch to them while you type.
+ → With the Typography extension, tiptap understands »what you mean« and adds correct characters to your text — it’s like a “typography nerd” on your side.
- → Or an editor, which knows »what you mean« and adds the correct characters to your text — like a “typography nerd” on your side. That should be the 1×1, right? Try it out and type (c), ->, >>, 1/2, !=, -- here:
+ Try it out and type (c)
, ->
, >>
, 1/2
, !=
, --
or 1x1
here:
+
+ Also, you can teach the editor new things. For example to recognize hex colors and add a color swatch on the fly: #FFF, #0D0D0D, #616161, #A975FF, #FB5151, #FD9170, #FFCB6B, #68CEF8, #80cbc4, #9DEF8F
+
`,
})
},
@@ -70,6 +68,11 @@ export default {
h6 {
line-height: 1.1;
}
+
+ code {
+ background-color: rgba(#616161, 0.1);
+ color: #616161;
+ }
}
/* Color swatches */
diff --git a/docs/src/demos/Examples/MultipleEditors/index.spec.js b/docs/src/demos/Experiments/MultipleEditors/index.spec.js
similarity index 100%
rename from docs/src/demos/Examples/MultipleEditors/index.spec.js
rename to docs/src/demos/Experiments/MultipleEditors/index.spec.js
diff --git a/docs/src/demos/Examples/MultipleEditors/index.vue b/docs/src/demos/Experiments/MultipleEditors/index.vue
similarity index 100%
rename from docs/src/demos/Examples/MultipleEditors/index.vue
rename to docs/src/demos/Experiments/MultipleEditors/index.vue
diff --git a/docs/src/docPages/examples/savvy.md b/docs/src/docPages/examples/savvy.md
index 29a943e2a..65450a8e4 100644
--- a/docs/src/docPages/examples/savvy.md
+++ b/docs/src/docPages/examples/savvy.md
@@ -1,3 +1,3 @@
-# Savvy
+# Savvy editor
diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md
index a5fc02861..58c82a69c 100644
--- a/docs/src/docPages/experiments.md
+++ b/docs/src/docPages/experiments.md
@@ -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)
diff --git a/docs/src/docPages/examples/multiple-editors.md b/docs/src/docPages/experiments/multiple-editors.md
similarity index 87%
rename from docs/src/docPages/examples/multiple-editors.md
rename to docs/src/docPages/experiments/multiple-editors.md
index 5e5c03366..025396c4c 100644
--- a/docs/src/docPages/examples/multiple-editors.md
+++ b/docs/src/docPages/experiments/multiple-editors.md
@@ -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.
-
+
diff --git a/docs/src/docPages/guide/styling.md b/docs/src/docPages/guide/styling.md
index 4543a5ae3..7daa6dce6 100644
--- a/docs/src/docPages/guide/styling.md
+++ b/docs/src/docPages/guide/styling.md
@@ -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.
## 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 `` tag, but a `` tag:
+Or you can customize the markup for extensions. The following example will make a custom bold extension that doesn’t render a `` tag, but a `` 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.
+
diff --git a/docs/src/docPages/guide/toolbar.md b/docs/src/docPages/guide/toolbar.md
index 94b3658f8..58f76c780 100644
--- a/docs/src/docPages/guide/toolbar.md
+++ b/docs/src/docPages/guide/toolbar.md
@@ -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.
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 1df746b3a..009e0c347 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -38,9 +38,7 @@
link: /examples/community
- title: Minimal setup
link: /examples/minimal
- - title: Multiple editors
- link: /examples/multiple-editors
- - title: Savvy
+ - title: Savvy editor
link: /examples/savvy
type: draft