docs: use regular case for Tiptap

This commit is contained in:
Hans Pagel
2021-10-19 22:30:45 +02:00
parent 3fe97621e7
commit f45c8d0ca7
77 changed files with 203 additions and 203 deletions

View File

@@ -6,7 +6,7 @@ tableOfContents: true
# Next.js
## Introduction
The following guide describes how to integrate tiptap with your [Next.js](https://nextjs.org/) project.
The following guide describes how to integrate Tiptap with your [Next.js](https://nextjs.org/) project.
## Requirements
* [Node](https://nodejs.org/en/download/) installed on your machine
@@ -18,14 +18,14 @@ If you already have an existing Next.js project, thats fine too. Just skip th
For the sake of this guide, lets start with a new Next.js project called `tiptap-example`. The following command sets up everything we need to get started.
```bash
# create a project
npx create-next-app tiptap-example
npx create-next-app Tiptap-example
# change directory
cd tiptap-example
cd Tiptap-example
```
## 2. Install the dependencies
Now that we have a standard boilerplate set up we can get started on getting tiptap up and running! For this we will need to install two packages: `@tiptap/react` and `@tipta/starter-kit` which includes all the extensions you need to get started quickly.
Now that we have a standard boilerplate set up we can get started on getting Tiptap up and running! For this we will need to install two packages: `@tiptap/react` and `@tipta/starter-kit` which includes all the extensions you need to get started quickly.
```bash
# install with npm
@@ -38,7 +38,7 @@ yarn add @tiptap/react @tiptap/starter-kit
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:3000/](http://localhost:3000/) in your favorite browser. This might be different, if youre working with an existing project.
## 3. Create a new component
To actually start using tiptap, youll need to add a new component to your app. To do this, first create a directory called `components/`. Now it's time to create our component which we'll call `Tiptap`. To do this put the following example code in `components/Tiptap.js`.
To actually start using Tiptap, youll need to add a new component to your app. To do this, first create a directory called `components/`. Now it's time to create our component which we'll call `Tiptap`. To do this put the following example code in `components/Tiptap.js`.
```jsx
import { useEditor, EditorContent } from '@tiptap/react'
@@ -72,4 +72,4 @@ export default function Home() {
)
}
```
You should now see tiptap in your browser. Time to give yourself a pat on the back! :)
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)