diff --git a/docs/src/docPages/configuration.md b/docs/src/docPages/configuration.md index f97544a0..a3f57e63 100644 --- a/docs/src/docPages/configuration.md +++ b/docs/src/docPages/configuration.md @@ -26,16 +26,21 @@ Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t That’s also the place where you can register custom extensions, which you or someone else built for tiptap. +### Related links + +* [List of available commands](/commands/) +* [List of available extensions](/extensions/) +* Build custom extensions + ## Difference between nodes and marks tiptap used a JSON schema under the hood. Every part of the text is stored as a specific type. There is a `Document` type (it’s needed, but invisible – like the `` in HTML). -**Nodes** are like blocks of content, for example a paragraph or a headline. +*Nodes* are like blocks of content, for example a paragraph or a headline. Yes, this paragraph is a node. -**Marks** can apply a different style to parts of text inside a node. A good example is **bold text**. That’s a mark. Italic, inline code or links are marks too. +*Marks* can apply a different style to parts of text inside a node. A good example is **bold text**. That’s a mark. *Italic*, `inline code` or [links](#) are marks too. -## Related links +### Related links -* List of all available Commands -* List of all available Extensions -* Build custom Extensions \ No newline at end of file +* [Learn more about the schema](/schema/) +* [List of available extensions](/extensions/) \ No newline at end of file diff --git a/docs/src/docPages/getting-started.md b/docs/src/docPages/getting-started.md index 38195401..84b720e0 100644 --- a/docs/src/docPages/getting-started.md +++ b/docs/src/docPages/getting-started.md @@ -1,6 +1,6 @@ -# First steps with tiptap +# Getting started -tiptap is framework-agnostic and works with plain JavaScript, Vue.js and React. To use tiptap with Vue.js or one of the tools that are based on Vue.js like Nuxt.js or Gridsome, you’ll need the tiptap Vue.js adapter. Install it as an dependency in your project: +tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if that’s your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages. To use tiptap with Vue.js (or Nuxt.js), you’ll need the tiptap Vue.js adapter. You can install it as an dependency in your project: ```bash # Install Vue.js adapter with npm @@ -10,15 +10,19 @@ npm install @tiptap/core @tiptap/starter-kit @tiptap/vue yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue ``` -Create a new Vue component (e. g. ``) and add the following content. That’s the shortest way to get tiptap up and running with Vue.js. No worries, you’ll be able to add more functionality soon. +Now you have got everything in place to add tiptap to your Vue.js project. + +## Create a new component + +Create a new Vue component (e. g. ``) and add the following content. That is the shortest way to get tiptap up and running with Vue.js. It’s a pretty basic version of tiptap but no worries, you will be able to add more functionality soon. -Does that work for you? There are a few common pitfalls here, if you have trouble getting started, try to read more here: +Does that work for you? There are a few common pitfalls here, if you have trouble getting started, try to read the related links down here. + +Otherwise: Congrats! You’ve got it! Let’s start with the confiuration in the next step. + +### Related links * [tiptap doesn’t have a default styling](#) * [Use tiptap with Nuxt.js](#) - -Most people would expect a text editor to have buttons to make the text bold or add links. tiptap has all of that, but it is very modular. You are free to decided what you use and how you use it. Use it as a more powerful textarea or build a full-blown editor. tiptap is ready for both. - -But let’s try to add a menu in the next step. \ No newline at end of file