mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-08-06 05:26:21 +08:00
docs(react): add documentation for contentDOMElementTag (#4348)
* docs(react): add documentation for contentDOMElementTag * fix naming for node view in react docs
This commit is contained in:
parent
fa121d665c
commit
84b9899d37
@ -47,6 +47,7 @@ https://embed.tiptap.dev/preview/GuideNodeViews/ReactComponent
|
||||
That component doesn’t interact with the editor, though. Time to wire it up.
|
||||
|
||||
## Access node attributes
|
||||
|
||||
The `ReactNodeViewRenderer` which you use in your node extension, passes a few very helpful props to your custom React component. One of them is the `node` prop. Let’s say you have [added an attribute](/guide/custom-extensions#attributes) named `count` to your node extension (like we did in the above example) you could access it like this:
|
||||
|
||||
```js
|
||||
@ -96,6 +97,15 @@ Keep in mind that this content is rendered by Tiptap. That means you need to tel
|
||||
|
||||
The `NodeViewWrapper` and `NodeViewContent` components render a `<div>` HTML tag (`<span>` for inline nodes), but you can change that. For example `<NodeViewContent as="p">` should render a paragraph. One limitation though: That tag must not change during runtime.
|
||||
|
||||
## Changing the default content tag for a node view
|
||||
|
||||
By default a node view rendered by `ReactNodeViewRenderer` will always have a wrapping `div` inside. If you want to change the type of this node, you can the `contentDOMElementTag` to the `ReactNodeViewRenderer` options:
|
||||
|
||||
```js
|
||||
// this will turn the div into a header tag
|
||||
return ReactNodeViewRenderer(Component, { contentDOMElementTag: 'header' })
|
||||
```
|
||||
|
||||
## All available props
|
||||
Here is the full list of what props you can expect:
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user