mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-27 23:15:15 +08:00
Code Issues Actions 4 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/src/demos/Examples/Basic/index.vue
View File

@ -89,21 +89,30 @@ export default {
Hi there,
</h2>
<p>
this is a very <em>basic</em> example of tiptap.
this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the bullet lists:
</p>
<pre><code>body { display: none; }</code></pre>
<ul>
<li>
A regular list
With one …
</li>
<li>
With regular items
… or two list items.
</li>
<li>
And yes, even more.
</li>
</ul>
<p>
Isn’t that great? But wait, there’s more. Let’s try a code block:
</p>
<pre><code class="language-css">body { display: none; }</code></pre>
<p>
I know, I know, it’s impressive. Give it a try and click a little bit around.
</p>
<blockquote>
It's amazing 👏
Wow, that’s amazing. Good work, boy! 👏
<br />
– mom
— Mom
</blockquote>
`,
})

8
docs/src/docPages/examples.md
View File

@ -1 +1,9 @@
# Examples
We put together a few examples to show the capabilities of tiptap, but keep in mind: tiptap is renderless and highly customizable. Everything you see can be changed, modified, combined or remixed. Feel free to copy the code to your project and change it to your liking.
A few examples show what you’d probably expect from a text editor anyway: [Basic](/examples/basic), [Links](/examples/links), [History](/examples/history), [Read-only](/examples/read-only), [Export HTML or JSON](/examples/export-html-or-json).
Some examples show how you can improve the user experience: [Markdown shortcuts](/examples/markdown-shortcuts).
Or they show advanced use cases, like the [Collaborative editing](/examples/collaborative-editing) example, which is basically tiptap in multiplayer mode.

8
docs/src/docPages/guide/getting-started.md
View File

@ -7,10 +7,10 @@ tiptap is framework-agnostic and works with Vue.js and React. It even works with
We assume you already have a [Vue.js](https://cli.vuejs.org/) (or [Nuxt.js](https://nuxtjs.org/)) project. To connect tiptap with Vue.js you are going to need an adapter. You can install tiptap for Vue.js as a dependency in your project:
```bash
# Install Vue.js adapter with npm
# Install the Vue.js adapter with npm
npm install @tiptap/vue @tiptap/vue-starter-kit
# Or: Install Vue.js adapter with Yarn
# Or: Install the Vue.js adapter with Yarn
yarn add @tiptap/vue @tiptap/vue-starter-kit
```
@ -21,8 +21,8 @@ Create a new Vue component (you can call it `<Tiptap />`) and add the following
<demo name="Guide/GettingStarted" />
::: warning Using with Nuxt.js
If you are using 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.
::: 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.
:::
Congrats! You’ve got it! 🎉 Let’s start to configure your editor in the next step.

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