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