docs: update content

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({
+        Code,
-          levels: [1, 2],
-        }),
         Typography,
         ColorHighlighter,
       ],
       content: `
-        <h2>
-          What’s a savvy text editor?
-        </h2>
         <p>
-          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.
         </p>
         <p>
-          → 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 <code>(c)</code>, <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, <code>--</code> or <code>1x1</code> here:
         </p>
         <p></p>
+        <p>
+          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
+        </p>
       `,
     })
   },
@@ -70,6 +68,11 @@ export default {
   h6 {
     line-height: 1.1;
   }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
 }
 
 /* Color swatches */

docs/src/docPages/examples/savvy.md

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

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)

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.
 
-<demo name="Examples/MultipleEditors" />
+<demo name="Experiments/MultipleEditors" />

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.
 
 <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.
+

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,
+3. `focus()` sets the focus back to the editor,
-4. `focus()` sets the focus back to the editor and
+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.

docs/src/links.yaml

@@ -38,9 +38,7 @@
       link: /examples/community
     - title: Minimal setup
       link: /examples/minimal
-    - title: Multiple editors
+    - title: Savvy editor
-      link: /examples/multiple-editors
-    - title: Savvy
       link: /examples/savvy
       type: draft