docs: update content
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table-cell)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table-cell?minimal=true)
|
||||
|
||||
TODO
|
||||
Don’t try to use tables without table cells. It won’t be fun.
|
||||
|
||||
## Installation
|
||||
::: warning Use with Table, TableRow and TableHeader
|
||||
|
||||
@@ -2,7 +2,23 @@
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table-header)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table-header?minimal=true)
|
||||
|
||||
TODO
|
||||
Table headers are actually. But come on, you want them, don’t you? If you don’t 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
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table-row)
|
||||
[](https://npmcharts.com/compare/@tiptap/extension-table-row?minimal=true)
|
||||
|
||||
TODO
|
||||
What’s a table without rows? Add this extension to make your tables usable.
|
||||
|
||||
## Installation
|
||||
::: warning Use with Table, TableHeader and TableCell
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
||||
[](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.
|
||||
|
||||
Don’t forget to add a `spacer.gif`. (Just joking. If you don’t know what that is, don’t listen.)
|
||||
|
||||
## Installation
|
||||
::: warning Use with TableRow, TableHeader and TableCell
|
||||
|
||||
@@ -222,9 +222,7 @@ Node.create({
|
||||
```
|
||||
|
||||
#### Allow gap cursor
|
||||
TODO
|
||||
|
||||
> If it’s true, gap cursor are allowed everywhere in that node, if it’s 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({
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -8,6 +8,7 @@ You can build your own extensions from scratch with the `Node`, `Mark`, and `Ext
|
||||
And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap/issues/819).
|
||||
|
||||
### Create a node
|
||||
|
||||
```js
|
||||
import { Node } from '@tiptap/core'
|
||||
|
||||
|
||||
@@ -128,8 +128,10 @@ If you’re migrating existing content to tiptap we would recommend to get your
|
||||
|
||||
We’re 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! We’d like to add more information here.
|
||||
[Share your experiences with us!](mailto:humans@tiptap.dev) We’d like to add more information here.
|
||||
|
||||
## Security
|
||||
There’s no reason to use on or the other because of security concerns.
|
||||
|
||||
There’s no reason to use on or the other for security reasons.
|
||||
### Validation
|
||||
Always validate user input sent to an API. Attackers don’t need to use tiptap to send malicious HTML or JSON to an API endpoint.
|
||||
|
||||
@@ -7,11 +7,13 @@ The whole tiptap is code base is written in TypeScript. If you haven’t heard o
|
||||
|
||||
TypeScript extends JavaScript by adding types (hence the name). It adds new syntax, which doesn’t exist in plain JavaScript. It’s 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, that’s very valuable. It means we’ll get notified of lot of bugs, before shipping code to you.
|
||||
|
||||
Anyway, if you don’t use TypeScript in your project, that’s fine. You’ll 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 don’t use TypeScript in your project, that’s 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 you’re 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, you’ll 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
|
||||
|
||||
@@ -86,9 +86,7 @@ Now, let’s 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. It’s 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. It’s 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. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user