docs: use regular case for Tiptap

This commit is contained in:
Hans Pagel
2021-10-19 22:30:45 +02:00
parent 3fe97621e7
commit f45c8d0ca7
77 changed files with 203 additions and 203 deletions

View File

@@ -13,7 +13,7 @@ Here is what you need to do to render a node view inside your editor:
1. [Create a node extension](/guide/custom-extensions)
2. Register a new node view with `addNodeView()`
3. Write your render function
4. [Configure tiptap to use your new node extension](/guide/configuration)
4. [Configure Tiptap to use your new node extension](/guide/configuration)
This is how your node extension could look like:
@@ -120,4 +120,4 @@ Got it? Youre free to do anything you like, as long as you return a container
https://embed.tiptap.dev/preview/GuideNodeViews/JavaScriptContent
Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (thats what we use in the above example).
Keep in mind that this content is rendered by Tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (thats what we use in the above example).

View File

@@ -14,7 +14,7 @@ Here is what you need to do to render React components inside your editor:
2. Create a React component
3. Pass that component to the provided `ReactNodeViewRenderer`
4. Register it with `addNodeView()`
5. [Configure tiptap to use your new node extension](/guide/configuration)
5. [Configure Tiptap to use your new node extension](/guide/configuration)
This is how your node extension could look like:
@@ -92,7 +92,7 @@ You dont need to add those `className` attributes, feel free to remove them o
https://embed.tiptap.dev/preview/GuideNodeViews/ReactComponentContent
Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (thats what we use in the above example).
Keep in mind that this content is rendered by Tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (thats what we use in the above example).
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.

View File

@@ -14,7 +14,7 @@ Here is what you need to do to render Vue components inside your editor:
2. Create a Vue component
3. Pass that component to the provided `VueNodeViewRenderer`
4. Register it with `addNodeView()`
5. [Configure tiptap to use your new node extension](/guide/configuration)
5. [Configure Tiptap to use your new node extension](/guide/configuration)
This is how your node extension could look like:
@@ -114,7 +114,7 @@ You dont need to add those `class` attributes, feel free to remove them or pa
https://embed.tiptap.dev/preview/GuideNodeViews/VueComponentContent
Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (thats what we use in the above example).
Keep in mind that this content is rendered by Tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (thats what we use in the above example).
The `NodeViewWrapper` and `NodeViewContent` components render a `<div>` HTML tag (`<span>` for inline nodes), but you can change that. For example `<node-view-content as="p">` should render a paragraph. One limitation though: That tag must not change during runtime.