diff --git a/docs/src/components/PageNavigation/index.vue b/docs/src/components/PageNavigation/index.vue index 2612543f..29d1b726 100644 --- a/docs/src/components/PageNavigation/index.vue +++ b/docs/src/components/PageNavigation/index.vue @@ -70,7 +70,13 @@ export default { }, nextPage() { - return this.flattenedItems[this.currentIndex + 1] + let nextIndex = this.currentIndex + 1 + + while (this.flattenedItems[nextIndex]?.skip) { + nextIndex += 1 + } + + return this.flattenedItems[nextIndex] }, previousPage() { diff --git a/docs/src/demos/Overview/Installation/index.vue b/docs/src/demos/Overview/Installation/index.vue index 9e344727..1ec72a17 100644 --- a/docs/src/demos/Overview/Installation/index.vue +++ b/docs/src/demos/Overview/Installation/index.vue @@ -18,7 +18,7 @@ export default { mounted() { this.editor = new Editor({ - content: '

Hello, here is tiptap! 👋

', + content: '

Hello World! 🌎️

', extensions: defaultExtensions(), }) }, diff --git a/docs/src/docPages/api/extensions/collaboration.md b/docs/src/docPages/api/extensions/collaboration.md index 44833a63..30a64957 100644 --- a/docs/src/docPages/api/extensions/collaboration.md +++ b/docs/src/docPages/api/extensions/collaboration.md @@ -1,6 +1,8 @@ # Collaboration The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project. +The history works totally different in a collaborative editing setup. If you undo a change, you don’t want to undo changes of other users. To handle that behaviour this extension provides an own `undo` and `redo` command. Don’t load the default [`History`](/api/extensions/history) extension together with the Collaboration extension to avoid conflicts. + :::premium Pro Extension We kindly ask you to [sponsor our work](/sponsor) when using this extension in production. ::: diff --git a/docs/src/docPages/guide/configure-the-editor.md b/docs/src/docPages/guide/configuration.md similarity index 100% rename from docs/src/docPages/guide/configure-the-editor.md rename to docs/src/docPages/guide/configuration.md diff --git a/docs/src/docPages/guide/create-a-toolbar.md b/docs/src/docPages/guide/create-a-toolbar.md deleted file mode 100644 index b908c481..00000000 --- a/docs/src/docPages/guide/create-a-toolbar.md +++ /dev/null @@ -1,37 +0,0 @@ -# Create a toolbar - -## toc - -TODO - -- [ ] commands -- [ ] commands toggle -- [ ] focus -- [ ] isActive -- [ ] isActive node/mark -- [ ] isActive node/mark, attributes -- [ ] isActive attributes - - diff --git a/docs/src/docPages/guide/getting-started.md b/docs/src/docPages/guide/getting-started.md index d96ad018..cebe6c91 100644 --- a/docs/src/docPages/guide/getting-started.md +++ b/docs/src/docPages/guide/getting-started.md @@ -6,8 +6,8 @@ tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s your thing. We’re working on guides for all the different frameworks and workflows, but here is the general one. The following steps should help you to integrate tiptap in your JavaScript project. ## Alternative Guides - * [Vue CLI](/guide/getting-started/vue-cli) +* [Nuxt.js](/guide/getting-started/nuxtjs) ## Requirements * [Node](https://nodejs.org/en/download/) installed on your machine diff --git a/docs/src/docPages/guide/getting-started/nuxtjs.md b/docs/src/docPages/guide/getting-started/nuxtjs.md index 2d3b7c67..2d31d488 100644 --- a/docs/src/docPages/guide/getting-started/nuxtjs.md +++ b/docs/src/docPages/guide/getting-started/nuxtjs.md @@ -79,11 +79,17 @@ Now, let’s replace the content of `pages/index.vue` with the following example ```html ``` +Note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `` tag. + +[Read more](https://nuxtjs.org/api/components-client-only) + You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step. ## 5. Use v-model (optional) diff --git a/docs/src/docPages/guide/toolbar.md b/docs/src/docPages/guide/toolbar.md new file mode 100644 index 00000000..a499ccfc --- /dev/null +++ b/docs/src/docPages/guide/toolbar.md @@ -0,0 +1,72 @@ +# Create a toolbar + +## toc + +## Introduction +tiptap comes very raw, but that’s a good thing. You have full control (and when we say full, we mean full) about the appearance of it. That also means you have to build the editor toolbar on your own. Don’t worry though, you can start with a few buttons and we help you with everything else. + +## Commands +Let’s assume you’ve got the editor running already and you want to add your first button. You’ll need a ` +``` + +Oh, that’s a long command, right? Actually, it’s a [chain of commands](/api/commands#chain-commands), so let’s go through this one by one: + +```js +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 +5. `run()` will execute the chain. + +In other words: This will be the typical **Bold** button for your text editor. + +Which commands are available depends on what extensions you’ve registered with editor. Most of the extensions come with a `set…()`, `unset…()` and `toggle…()` command. Read the extension documentation to see what’s actually available or just surf through your code editor’s autocomplete. + +## Keep the focus +You’ve seen the `focus()` command in the above example already. When you click on the button, the browser focuses that DOM element and the editor loses focus. It’s likely you want to add `focus()` to all your toolbar buttons, so the writing flow of your users isn’t interrupted. + +## The active state +The editor provides an `isActive()` method to check if something is applied to the selected text already. In Vue.js you can toggle a CSS class with help of that function like that: + +```html + +``` + +This toggles the `.is-active` class accordingly. This works for nodes, and marks. You can even check for specific attributes, here is an example with the [`Highlight`](/api/marks/highlight) mark, that ignores different attributes: + +```js +editor.isActive('highlight') +``` + +And an example that compares the given attribute(s): + +```js +editor.isActive('highlight', { color: '#ffa8a8' }) +``` + +You can even ignore nodes and marks, but check for the attributes only. Here is an example with the [`TextAlign`](/api/extensions/text-align) extension: + +```js +editor.isActive({ textAlign: 'right' }) +``` + +If your selection spans multiple nodes or marks, or only part of the selection has a mark, `isActive()` will return `false` and indicate nothing is active. That is how it is supposed to be, because it allows people to apply a new node or mark to that selection right-away. + +## Icons +Most editor toolbars use icons for their buttons. In some of our demos, we use the open source icon set [Remix Icon](https://remixicon.com/), that’s free to use. But it’s totally up to you what you use. Here are a few icon sets you can consider: + +* [Remix Icon](https://remixicon.com/#editor) +* [Font Awesome](https://fontawesome.com/icons?c=editors) +* [UI icons](https://www.ibm.com/design/language/iconography/ui-icons/library/) + +Also, we’re working on providing a configurable interface for tiptap. If you think that’s a great idea, [become a sponsor](/sponsor) to show us your support. 💖 diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md index 85ea64f0..a6d24ad9 100644 --- a/docs/src/docPages/overview/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -52,9 +52,15 @@ Note that tiptap needs to run in the client, not on the server. It’s required ## Option 3: CodeSandbox CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others. -It’s also amazing for bug reports. Try to recreate a bug there and share it with us before when you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug quickly, and fix them faster. + -* [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/tiptap-issue-template-b83rr?file=/src/components/Tiptap.vue) +It’s also amazing for bug reports. Try to recreate a bug there and share it with us before when you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug quickly, and fix them faster. ## Option 4: CDN (Draft) @@ -83,7 +89,7 @@ Skypack enables you to use ES modules, which should be supported in all modern b ``` -### Unpkg (UMD, deprecated) +### ~~Unpkg (UMD, deprecated)~~ We also have an UMD build on unpkg. Those UMD builds are larger, but should work even in older browsers. As tiptap doesn’t work in older browsers anyway, we tend to remove those builds. What do you think? Anyway, here‘s how you can use it: ```html diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 86681c64..860db2f2 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -38,13 +38,14 @@ items: - title: Vue CLI link: /guide/getting-started/vue-cli + skip: true - title: Nuxt.js link: /guide/getting-started/nuxtjs + skip: true - title: Configure the editor - link: /guide/configure-the-editor + link: /guide/configuration - title: Create a toolbar - link: /guide/create-a-toolbar - draft: true + link: /guide/toolbar - title: Custom styling link: /guide/styling - title: Store content @@ -94,6 +95,7 @@ - title: Table link: /api/nodes/table draft: true + pro: true - title: TaskList link: /api/nodes/task-list - title: TaskItem @@ -141,6 +143,7 @@ - title: Suggestion link: /api/extensions/suggestion draft: true + pro: true - title: TextAlign link: /api/extensions/text-align - title: Typography