Merge branch 'main' into feature/extension-code-block-lowlight
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 won’t 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 doesn’t trigger the update event. Passing `true` doesn’t 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)
|
||||
```
|
||||
|
||||
|
||||
8
docs/src/docPages/api/commands/clear-nodes.md
Normal file
8
docs/src/docPages/api/commands/clear-nodes.md
Normal 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()
|
||||
```
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
# setContent
|
||||
The `setContent` command replaces the document with a new one. You can pass JSON or HTML, both work fine. It’s 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 what’s allowed according to the [schema](/api/schema).
|
||||
|
||||
`emitUpdate?: Boolean`
|
||||
`emitUpdate?: Boolean (false)`
|
||||
|
||||
By default, it doesn’t trigger the update event. Passing `true` doesn’t prevent triggering the update event.
|
||||
|
||||
@@ -18,13 +17,12 @@ By default, it doesn’t trigger the update event. Passing `true` doesn’t 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": [
|
||||
{
|
||||
|
||||
22
docs/src/docPages/api/commands/update-attributes.md
Normal file
22
docs/src/docPages/api/commands/update-attributes.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# updateAttributes
|
||||
The `updateAttributes` command sets attributes of a node or mark to new values. Not passed attributes won’t 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 doesn’t 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' })
|
||||
```
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
**The `Document` extension is required**, no matter what you build with tiptap. It’s a so called “topNode”, a node that’s 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`). That’s 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+`). That’s 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()`).
|
||||
|
||||
@@ -58,8 +58,6 @@ You can even mix non-editable and editable text. That’s great to build complex
|
||||
</div>
|
||||
```
|
||||
|
||||
**BUT**, that also means the cursor can’t 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 you’re working with HTML, you’ll need to tell tiptap how your node should be serialized.
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user