ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add more content

Browse Source
This commit is contained in:
Hans Pagel
2020-09-30 16:16:15 +02:00
parent e67c041c31
commit 5d7435f3fe
6 changed files with 50 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/src/docPages/overview/contributing.md
View File

@@ -1,18 +1,20 @@
# Contributing
Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution:
## Table of Contents
## Examples
* Improved documentation, e. g. fixing typos, new sections, further explanation …)
## Introduction
Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution:
## Welcome examples
* Improve the documentation, e. g. fix a typo, add a section
* New features for existing extensions, e. g. a new option
* New extensions, which don’t require changes to the core or other core extensions
* Well explained, non-breaking changes to the core
## Code style
There is a eslint config, that ensures a consistent code style. To check for errors, run `$ yarn run lint`. That’ll be checked when you send a pull request. Make sure it’s passing, before sending a pull request.
## Our code style
There is an eslint config that ensures a consistent code style. To check for errors, run `$ yarn run lint`. That’ll be checked when you send a pull request, too. Make sure it’s passing, before sending a pull request.
## Testing
All your pull requests will automatically run all our existing tests. Make sure that they all pass. Run all tests locally with `$ yarn run test` or run single tests (e. g. when writing new ones) with `$ yarn run test:open`.
## Testing for errors
Your pull request will automatically execute all our existing tests. Make sure that they all pass, before sending a pull request. Run all tests locally with `$ yarn run test` or run single tests (e. g. when writing new ones) with `$ yarn run test:open`.
Any further questions? Create a new issue or discussion in the repository. We’ll get back to you.

21
docs/src/docPages/overview/installation.md
View File

@@ -1,8 +1,10 @@
# Installation
You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.
## Table of Contents
## Introduction
You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.
## Option 1: Vanilla JavaScript
Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect tiptap with other frameworks not mentioned here.
@@ -14,11 +16,6 @@ npm install @tiptap/core @tiptap/starter-kit
yarn add @tiptap/core @tiptap/starter-kit
```
| Package | Description |
| ---------------------------------------------------------------------------- | -------------------------- |
| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor |
| [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions |
Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap:
```js
@@ -33,7 +30,7 @@ new Editor({
```
## Option 2: Vue.js
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
```bash
# With npm
@@ -43,16 +40,14 @@ npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
```
| Package | Description |
| -------------------------------------------------------------------------------- | --------------------------------------------- |
| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor |
| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js |
| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions wrapped for Vue.js |
Create a new component and add the following content to get a basic version of tiptap:
<demo name="Overview/Installation" />
::: warning Nuxt.js
If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
:::
<!-- ## 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.

12
docs/src/docPages/overview/upgrade-guide.md
View File

@@ -14,7 +14,7 @@ Yes, it’s tedious work to upgrade your favorite text editor to a new API, but
## Upgrading from 1.x to 2.x
The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you need to know:
### 1. Explicitly register the Document, Text and Paragraph extensions
### Explicitly register the Document, Text and Paragraph extensions
Tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/extensions/document), [Paragraph](/api/extensions/paragraph) and [Text](/api/extensions/text) extensions.
```js
@@ -32,7 +32,7 @@ new Editor({
})
```
### 2. New document type
### New document type
**We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
```js
@@ -48,7 +48,7 @@ new Editor({
})
```
### 3. New extension API
### New extension API
In case you’ve built some custom extensions for your project, you’re required to rewrite them to fit the new API. No worries, you can keep a lot of your work though. The `schema`, `commands`, `keys`, `inputRules` and `pasteRules` all work like they did before. It’s just different how you register them.
```js
@@ -79,7 +79,7 @@ const CustomExtension = new Node()
Don’t forget to call `create()` in the end! Read more about [all the nifty details building custom extensions](/guide/custom-extensions) in our guide.
### 4. Renamed API methods
### Renamed API methods
[We renamed a lot of commands](/api/commands), hopefully you can migrate to the new API with search & replace. Here is a list of what changed:
| Old method name | New method name |
@@ -87,11 +87,11 @@ Don’t forget to call `create()` in the end! Read more about [all the nifty det
| ~~`getHTML`~~ | `html` |
| ~~`getJSON`~~ | `json` |
### 5. Commands can be chained now
### Commands can be chained now
…
### 6. .focus() isn’t called on every command anymore
### .focus() isn’t called on every command anymore
We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every other command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor. With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
```js