diff --git a/docs/src/docPages/build-your-editor.md b/docs/src/docPages/build-your-editor.md new file mode 100644 index 00000000..93b4d605 --- /dev/null +++ b/docs/src/docPages/build-your-editor.md @@ -0,0 +1,46 @@ +# Configuration + +In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you would like to have. + +## Adding a menu + +Let’s start to add your first button to the editor. Once initiated the editor has a powerful API. The so called *commands* allow you to modify selected text (and tons of other things). Here is an example with one single button: + + + +To mark selected text bold we can use `this.editor.bold`. There a ton of other commands and you can even chain them to do multiple things at once. + +You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example. + +### Related Links + +* [List of available commands](/commands/) + +## Configure extensions + +You are free to choose which parts of tiptap you want to use. Tiptap has support for different nodes (paragraphs, blockquotes, tables and many more) and different marks (bold, italic, links). If you want to explicitly configure what kind of nodes and marks are allowed and which are not allowed, you can configure those. + +Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text. + + + +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. 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. + +### Related links + +* [Learn more about the schema](/schema/) +* [List of available extensions](/extensions/) \ No newline at end of file diff --git a/docs/src/docPages/configuration.md b/docs/src/docPages/configuration.md index a3f57e63..972896ed 100644 --- a/docs/src/docPages/configuration.md +++ b/docs/src/docPages/configuration.md @@ -1,46 +1,25 @@ -# Configure tiptap +# Configuration -In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you would like to have. +tiptap is all about customization. There are a ton of options to configure the behavior and functionality of the editor. Most of those settings can be set before creating the Editor. Give tiptap a JSON with all the settings you would like to overwrite. -## Adding a menu +## Overwrite the default settings -Let’s start to add your first button to the editor. Once initiated the editor has a powerful API. The so called *commands* allow you to modify selected text (and tons of other things). Here is an example with one single button: +See an example with `autoFocus: true` here: - +```js +import { Editor } from '@tiptap/core' +import extensions from '@tiptap/starter-kit' -To mark selected text bold we can use `this.editor.bold`. There a ton of other commands and you can even chain them to do multiple things at once. +new Editor({ + element: document.getElementsByClassName('element'), + extensions: extensions(), + content: '

Hey there!

', + autoFocus: true, +}) +``` -You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example. - -### Related Links - -* [List of available commands](/commands/) - -## Configure extensions - -You are free to choose which parts of tiptap you want to use. Tiptap has support for different nodes (paragraphs, blockquotes, tables and many more) and different marks (bold, italic, links). If you want to explicitly configure what kind of nodes and marks are allowed and which are not allowed, you can configure those. - -Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text. - - - -That’s also the place where you can register custom extensions, which you or someone else built for tiptap. +This will set the focus to tiptap after the editor is initialized. Of course, there are way more options available. Read about all of them in the related links. ### 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. 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. - -### Related links - -* [Learn more about the schema](/schema/) -* [List of available extensions](/extensions/) \ No newline at end of file +* [See available options](#) diff --git a/docs/src/docPages/getting-started.md b/docs/src/docPages/getting-started.md index f00bb78d..aee5efc0 100644 --- a/docs/src/docPages/getting-started.md +++ b/docs/src/docPages/getting-started.md @@ -24,7 +24,7 @@ Create a new Vue component (e. g. ``) and add the following content. T > **Doesn’t work for you?** There are a few common pitfalls here, depending on your setup. If you have trouble getting started, try to read the related links down here. -Congrats! You’ve got it! 🎉 Let’s start with the configuration in the next step. +Congrats! You’ve got it! 🎉 Let’s start to build your editor in the next step. ### Related links diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 3ddc9ab9..1180eb34 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -11,7 +11,7 @@ link: /getting-started/ - title: Configuration 🚧 link: /configuration/ - - title: Build your editor ❌ + - title: Build your editor 🚧 link: /build-your-editor/ - title: Custom styling ❌ link: /custom-styling/