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:
bdbch 2023-08-18 10:52:15 -07:00 committed by GitHub
parent fa121d665c
commit 84b9899d37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -47,6 +47,7 @@ https://embed.tiptap.dev/preview/GuideNodeViews/ReactComponent
That component doesnt 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. Lets 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: