Merge branch 'main' into feature/extension-code-block-lowlight

This commit is contained in:
Philipp Kühn
2021-04-08 22:18:59 +02:00
31 changed files with 162 additions and 38 deletions

View File

@@ -4,7 +4,7 @@ import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
export default () => {
return (
<NodeViewWrapper className="react-component-with-content">
<span className="label" contenteditable="false">React Component</span>
<span className="label" contentEditable={false}>React Component</span>
<NodeViewContent className="content" />
</NodeViewWrapper>

View File

@@ -1,12 +1,21 @@
# clearContent
The `clearContent` command deletes the current document.
See also: [setContent](/api/commands/set-content)
Keep in mind that the editor will enforce the configured schema, and the document wont be `null`. The default [`Document`](/api/nodes/document) expects to have at least one block node, which is the paragraph by default. In other words: Even after running that command the document will have at least one (empty) paragraph.
See also: [setContent](/api/commands/set-content), [insertContent](/api/commands/insert-content)
## Parameters
`emitUpdate: Boolean (false)`
By default, it doesnt trigger the update event. Passing `true` doesnt prevent triggering the update event.
## Usage
```js
this.editor.commands.clearContent()
// Remoe all content from the document
editor.commands.clearContent()
// Remove all content, and trigger the `update` event
editor.commands.clearContent(true)
```

View File

@@ -0,0 +1,8 @@
# clearNodes
The `clearNodes` command normalizes nodes to a simple paragraph, it even normalizes all kind of lists. For advanced use cases it can come in handy, before applying a new node type.
## Usage
```js
editor.commands.clearNodes()
```

View File

@@ -1,21 +1,31 @@
# insertContent
The `insertContent` command adds a passed value to the document.
See also: [setContent](/api/commands/set-content), [clearContent](/api/commands/clear-content)
## Parameters
`value: Content`
The command is pretty flexible and takes plain text, HTML or even JSON as a value.
## Usage
```js
this.editor.commands.insertContent('text')
this.editor.commands.insertContent('<p>HTML</p>')
this.editor.commands.insertContent({
// Plain text
editor.commands.insertContent('Example Text')
// HTML
editor.commands.insertContent('<h1>Example Text</h1>')
// JSON/Nodes
editor.commands.insertContent({
type: 'heading',
attrs: {
level: 2,
level: 1,
},
content: [
{
type: 'text',
text: 'nested nodes',
text: 'Example Text',
},
],
})

View File

@@ -1,15 +1,14 @@
# setContent
The `setContent` command replaces the document with a new one. You can pass JSON or HTML, both work fine. Its basically the same as setting the `content` on initialization.
See also: [clearContent](/api/commands/clear-content)
See also: [insertContent](/api/commands/insert-content), [clearContent](/api/commands/clear-content)
## Parameters
`content: string`
Pass a string (JSON or HTML) as [content](/guide/output). The editor will only render whats allowed according to the [schema](/api/schema).
`emitUpdate?: Boolean`
`emitUpdate?: Boolean (false)`
By default, it doesnt trigger the update event. Passing `true` doesnt prevent triggering the update event.
@@ -18,13 +17,12 @@ By default, it doesnt trigger the update event. Passing `true` doesnt prev
Options to configure the parsing can be passed during initialization and/or with setContent. Read more about parseOptions in the [ProseMirror documentation](https://prosemirror.net/docs/ref/#model.ParseOptions).
## Usage
```js
// HTML
this.editor.commands.setContent('<p>Example Text</p>')
editor.commands.setContent('<p>Example Text</p>')
// JSON
this.editor.commands.setContent({
editor.commands.setContent({
"type": "doc",
"content": [
{

View File

@@ -0,0 +1,22 @@
# updateAttributes
The `updateAttributes` command sets attributes of a node or mark to new values. Not passed attributes wont be touched.
## Parameters
`typeOrName: string | NodeType | MarkType`
Pass the type you want to update, for example `'heading'`.
`attributes: AnyObject`
This expects an object with the attributes that need to be updated. It doesnt need to have all attributes.
## Usage
```js
// Update node attributes
editor.commands.updateAttributes('heading', { level: 1 })
// Update mark attributes
editor.commands.updateAttributes('highlight', { color: 'pink' })
```

View File

@@ -4,7 +4,7 @@
**The `Document` extension is required**, no matter what you build with tiptap. Its a so called “topNode”, a node thats the home to all other nodes. Think of it like the `<body>` tag for your document.
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block`). Thats all. But have a look yourself:
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block+`). Thats all. But have a look yourself:
:::warning Breaking Change from 1.x → 2.x
tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).

View File

@@ -58,8 +58,6 @@ You can even mix non-editable and editable text. Thats great to build complex
</div>
```
**BUT**, that also means the cursor cant just move from outside of the node view to the inside. Users have to manually place their cursor to edit the content inside the node view. Just so you know.
## Markup
But what happens if you [access the editor content](/guide/output)? If youre working with HTML, youll need to tell tiptap how your node should be serialized.

View File

@@ -78,7 +78,7 @@ import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
export default () => {
return (
<NodeViewWrapper className="react-component-with-content">
<span className="label" contenteditable="false">React Component</span>
<span className="label" contentEditable={false}>React Component</span>
<NodeViewContent className="content" />
</NodeViewWrapper>

View File

@@ -138,12 +138,15 @@
items:
- title: clearContent
link: /api/commands/clear-content
type: draft
- title: insertContent
link: /api/commands/insert-content
type: draft
- title: setContent
link: /api/commands/set-content
- title: clearNodes
link: /api/commands/clear-nodes
- title: updateAtttributes
link: /api/commands/update-attributes
- title: Nodes
link: /api/nodes
items: