docs: update content
This commit is contained in:
@@ -25,7 +25,19 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
|
/* Basic editor styles */
|
||||||
|
.ProseMirror {
|
||||||
|
> * + * {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: rgba(#616161, 0.1);
|
||||||
|
color: #616161;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: 1rem 0 0;
|
padding: 1rem 0 0;
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table-cell)
|
[](https://www.npmjs.com/package/@tiptap/extension-table-cell)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table-cell?minimal=true)
|
[](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
|
## Installation
|
||||||
::: warning Use with Table, TableRow and TableHeader
|
::: warning Use with Table, TableRow and TableHeader
|
||||||
|
|||||||
@@ -2,7 +2,23 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table-header)
|
[](https://www.npmjs.com/package/@tiptap/extension-table-header)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table-header?minimal=true)
|
[](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
|
## Installation
|
||||||
::: warning Use with Table, TableRow and TableCell
|
::: warning Use with Table, TableRow and TableCell
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table-row)
|
[](https://www.npmjs.com/package/@tiptap/extension-table-row)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table-row?minimal=true)
|
[](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
|
## Installation
|
||||||
::: warning Use with Table, TableHeader and TableCell
|
::: warning Use with Table, TableHeader and TableCell
|
||||||
|
|||||||
@@ -2,7 +2,9 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
|
[](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
|
## Installation
|
||||||
::: warning Use with TableRow, TableHeader and TableCell
|
::: warning Use with TableRow, TableHeader and TableCell
|
||||||
|
|||||||
@@ -222,9 +222,7 @@ Node.create({
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### Allow gap cursor
|
#### Allow gap cursor
|
||||||
TODO
|
The [`Gapcursor`](/api/extensions/gapcursor) extension registers a new schema attribute to control if gap cursors are allowed everywhere in that node.
|
||||||
|
|
||||||
> If it’s true, gap cursor are allowed everywhere in that node, if it’s false they are never allowed.
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
Node.create({
|
Node.create({
|
||||||
@@ -233,7 +231,7 @@ Node.create({
|
|||||||
```
|
```
|
||||||
|
|
||||||
#### Table roles
|
#### 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
|
```js
|
||||||
Node.create({
|
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/
|
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).
|
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
|
### Create a node
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { Node } from '@tiptap/core'
|
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).
|
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
|
## 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.
|
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:
|
To extend or create default options for an extension, you’ll need to define a custom type, here is an example:
|
||||||
|
|
||||||
```ts
|
```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:
|
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
|
```ts
|
||||||
|
|||||||
@@ -86,9 +86,7 @@ Now, let’s replace the content of `pages/index.vue` with the following example
|
|||||||
</template>
|
</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.
|
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)
|
||||||
|
|
||||||
[Read more](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.
|
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.
|
||||||
|
|
||||||
|
|||||||
@@ -40,7 +40,6 @@
|
|||||||
link: /examples/minimal
|
link: /examples/minimal
|
||||||
- title: Savvy editor
|
- title: Savvy editor
|
||||||
link: /examples/savvy
|
link: /examples/savvy
|
||||||
type: draft
|
|
||||||
|
|
||||||
- title: Guide
|
- title: Guide
|
||||||
items:
|
items:
|
||||||
|
|||||||
Reference in New Issue
Block a user