docs: update content

This commit is contained in:
Hans Pagel
2021-02-08 17:39:50 +01:00
parent 3e9a68cb35
commit d9ef464c45
12 changed files with 50 additions and 20 deletions

View File

@@ -2,7 +2,7 @@
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-cell.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-cell)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-cell.svg)](https://npmcharts.com/compare/@tiptap/extension-table-cell?minimal=true)
TODO
Dont try to use tables without table cells. It wont be fun.
## Installation
::: warning Use with Table, TableRow and TableHeader

View File

@@ -2,7 +2,23 @@
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-header.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-header)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-header.svg)](https://npmcharts.com/compare/@tiptap/extension-table-header?minimal=true)
TODO
Table headers are actually. But come on, you want them, dont you? If you dont want them, update the `content` attribute of the [`TableRow`](/api/nodes/table-row) extension, like this:
```js
// Table rows without table headers
TableRow.extend({
content: 'tableCell*',
})
```
This is the default, which allows table headers:
```js
// Table rows with table headers (default)
TableRow.extend({
content: '(tableCell | tableHeader)*',
})
```
## Installation
::: warning Use with Table, TableRow and TableCell

View File

@@ -2,7 +2,7 @@
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-row.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-row)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-row.svg)](https://npmcharts.com/compare/@tiptap/extension-table-row?minimal=true)
TODO
Whats a table without rows? Add this extension to make your tables usable.
## Installation
::: warning Use with Table, TableHeader and TableCell

View File

@@ -2,7 +2,9 @@
[![Version](https://img.shields.io/npm/v/@tiptap/extension-table.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table.svg)](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
TODO
Nothing is as much fun as a good old HTML table. The `Table` extension enables you to add this holy grail of WYSIWYG editing to your editor.
Dont forget to add a `spacer.gif`. (Just joking. If you dont know what that is, dont listen.)
## Installation
::: warning Use with TableRow, TableHeader and TableCell

View File

@@ -222,9 +222,7 @@ Node.create({
```
#### Allow gap cursor
TODO
> If its true, gap cursor are allowed everywhere in that node, if its false they are never allowed.
The [`Gapcursor`](/api/extensions/gapcursor) extension registers a new schema attribute to control if gap cursors are allowed everywhere in that node.
```js
Node.create({
@@ -233,7 +231,7 @@ Node.create({
```
#### Table roles
TODO
The [`Table`](/api/extensions/table) extension registers a new schema attribute to configure which role an Node has. Allowed values are `table`, `row`, `cell`, and `header_cell`.
```js
Node.create({

View File

@@ -34,4 +34,4 @@ An optional writing assitance could help people writing content semanticly corre
TODO: Update resources to point to WCAG 3.0 https://www.w3.org/TR/wcag-3.0/
Anything we should add here? Please let us know, so we can take it into account.
Anything we should add here? [Please let us know](mailto:humans@tiptap.dev), so we can take it into account.

View File

@@ -8,6 +8,7 @@ You can build your own extensions from scratch with the `Node`, `Mark`, and `Ext
And if everything is working fine, dont forget to [share it with the community](https://github.com/ueberdosis/tiptap/issues/819).
### Create a node
```js
import { Node } from '@tiptap/core'

View File

@@ -128,8 +128,10 @@ If youre migrating existing content to tiptap we would recommend to get your
Were about to go through a few cases to help with that, for example we provide a PHP package to convert HTML to a compatible JSON structure: [ueberdosis/prosemirror-to-html](https://github.com/ueberdosis/html-to-prosemirror).
Share your experiences with us! Wed like to add more information here.
[Share your experiences with us!](mailto:humans@tiptap.dev) Wed like to add more information here.
## Security
Theres no reason to use on or the other because of security concerns.
Theres no reason to use on or the other for security reasons.
### Validation
Always validate user input sent to an API. Attackers dont need to use tiptap to send malicious HTML or JSON to an API endpoint.

View File

@@ -7,11 +7,13 @@ The whole tiptap is code base is written in TypeScript. If you havent heard o
TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesnt exist in plain JavaScript. Its actually removed before running in the browser, but this step the compilation is important to find bugs early. It checks if you passe the right types of data to functions. For a big and complex project, thats very valuable. It means well get notified of lot of bugs, before shipping code to you.
Anyway, if you dont use TypeScript in your project, thats fine. Youll still be able to use tiptap and even get a really nice autocomplete for the tiptap API (if your editor supports it, but most do).
**Anyway, if you dont use TypeScript in your project, thats fine.** You will still be able to use tiptap and nevertheless get a nice autocomplete for the tiptap API (if your editor supports it, but most do).
If youre using TypeScript in your project and want to extend tiptap, there are two things that are good to know.
If you are using TypeScript in your project and want to extend tiptap, there are two types that are good to know about.
## Options type
## Types
### Options types
To extend or create default options for an extension, youll need to define a custom type, here is an example:
```ts
@@ -28,7 +30,7 @@ const CustomExtension = Extension.create({
})
```
## Command type
### Command type
The core package also exports a `Command` type, which needs to be added to all commands that you specify in your code. Here is an example:
```ts

View File

@@ -86,9 +86,7 @@ Now, lets replace the content of `pages/index.vue` with the following example
</template>
```
Note that tiptap needs to run in the client, not on the server. Its required to wrap the editor in a `<client-only>` tag.
[Read more](https://nuxtjs.org/api/components-client-only)
Note that tiptap needs to run in the client, not on the server. Its required to wrap the editor in a `<client-only>` tag. [Read more about cient-only components.](https://nuxtjs.org/api/components-client-only)
You should now see tiptap in your browser. Youve successfully set up tiptap! Time to give yourself a pat on the back. Lets start to configure your editor in the next step.