mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 09:25:29 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Split vue and react variant for interactivity demo

Browse Source
This commit is contained in:
svenadlung 2021-11-22 19:17:25 +01:00
parent a55aa5fd17
commit 4e60147a57
19 changed files with 561 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
demos/src/GuideNodeViews/Component/React/Component.jsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react'
import { NodeViewWrapper } from '@tiptap/react'
export default props => {
const increase = () => {
props.updateAttributes({
count: props.node.attrs.count + 1,
})
}
return (
<NodeViewWrapper className="react-component">
<span className="label">React Component</span>
<div className="content">
<button onClick={increase}>
This button has been clicked {props.node.attrs.count} times.
</button>
</div>
</NodeViewWrapper>
)
}

35
demos/src/GuideNodeViews/Component/React/Extension.js Normal file
View File

@ -0,0 +1,35 @@
import { Node, mergeAttributes } from '@tiptap/core'
import { ReactNodeViewRenderer } from '@tiptap/react'
import Component from './Component.jsx'
export default Node.create({
name: 'reactComponent',
group: 'block',
atom: true,
addAttributes() {
return {
count: {
default: 0,
},
}
},
parseHTML() {
return [
{
tag: 'react-component',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['react-component', mergeAttributes(HTMLAttributes)]
},
addNodeView() {
return ReactNodeViewRenderer(Component)
},
})

15
demos/src/GuideNodeViews/Component/React/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app"></div>
<script type="module">
import setup from '../../../../setup/react.ts'
import source from '@source'
setup('GuideNodeViews/Component', source)
</script>
</body>
</html>

27
demos/src/GuideNodeViews/Component/React/index.jsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import ReactComponent from './Extension.js'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
StarterKit,
ReactComponent,
],
content: `
<p>
This is still the text editor you’re used to, but enriched with node views.
</p>
<react-component count="0"></react-component>
<p>
Did you see that? That’s a React component. We are really living in the future.
</p>
`,
})
return (
<EditorContent editor={editor} />
)
}

33
demos/src/GuideNodeViews/Component/React/styles.scss Normal file
View File

@ -0,0 +1,33 @@
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
.react-component {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.content {
margin-top: 1.5rem;
padding: 1rem;
}
}

60
demos/src/GuideNodeViews/Component/Vue/Component.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<node-view-wrapper class="vue-component">
<span class="label">Vue Component</span>
<div class="content">
<button @click="increase">
This button has been clicked {{ node.attrs.count }} times.
</button>
</div>
</node-view-wrapper>
</template>
<script>
import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
export default {
components: {
NodeViewWrapper,
},
props: nodeViewProps,
methods: {
increase() {
this.updateAttributes({
count: this.node.attrs.count + 1,
})
},
},
}
</script>
<style lang="scss">
.vue-component {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
}
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.content {
margin-top: 1.5rem;
padding: 1rem;
}
</style>

35
demos/src/GuideNodeViews/Component/Vue/Extension.js Normal file
View File

@ -0,0 +1,35 @@
import { Node, mergeAttributes } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-3'
import Component from './Component.vue'
export default Node.create({
name: 'vueComponent',
group: 'block',
atom: true,
addAttributes() {
return {
count: {
default: 0,
},
}
},
parseHTML() {
return [
{
tag: 'vue-component',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['vue-component', mergeAttributes(HTMLAttributes)]
},
addNodeView() {
return VueNodeViewRenderer(Component)
},
})

15
demos/src/GuideNodeViews/Component/Vue/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app"></div>
<script type="module">
import setup from '../../../../setup/vue.ts'
import source from '@source'
setup('GuideNodeViews/Component', source)
</script>
</body>
</html>

52
demos/src/GuideNodeViews/Component/Vue/index.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import VueComponent from './Extension.js'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
StarterKit,
VueComponent,
],
content: `
<p>
This is still the text editor you’re used to, but enriched with node views.
</p>
<vue-component count="0"></vue-component>
<p>
Did you see that? That’s a Vue component. We are really living in the future.
</p>
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
</style>

12
demos/src/GuideNodeViews/ComponentContent/React/Component.jsx Normal file
View File

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

27
demos/src/GuideNodeViews/ComponentContent/React/Extension.js Normal file
View File

@ -0,0 +1,27 @@
import { Node, mergeAttributes } from '@tiptap/core'
import { ReactNodeViewRenderer } from '@tiptap/react'
import Component from './Component.jsx'
export default Node.create({
name: 'reactComponent',
group: 'block',
content: 'inline*',
parseHTML() {
return [
{
tag: 'react-component',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['react-component', mergeAttributes(HTMLAttributes), 0]
},
addNodeView() {
return ReactNodeViewRenderer(Component)
},
})

15
demos/src/GuideNodeViews/ComponentContent/React/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app"></div>
<script type="module">
import setup from '../../../../setup/react.ts'
import source from '@source'
setup('GuideNodeViews/ComponentContent', source)
</script>
</body>
</html>

29
demos/src/GuideNodeViews/ComponentContent/React/index.jsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import ReactComponent from './Extension.js'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [
StarterKit,
ReactComponent,
],
content: `
<p>
This is still the text editor you’re used to, but enriched with node views.
</p>
<react-component>
<p>This is editable.</p>
</react-component>
<p>
Did you see that? That’s a React component. We are really living in the future.
</p>
`,
})
return (
<EditorContent editor={editor} />
)
}

36
demos/src/GuideNodeViews/ComponentContent/React/styles.scss Normal file
View File

@ -0,0 +1,36 @@
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
.react-component-with-content {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.content {
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
border-radius: 0.5rem;
}
}

50
demos/src/GuideNodeViews/ComponentContent/Vue/Component.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<node-view-wrapper class="vue-component">
<span class="label" contenteditable="false">Vue Component</span>
<node-view-content class="content" />
</node-view-wrapper>
</template>
<script>
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
export default {
components: {
NodeViewWrapper,
NodeViewContent,
},
props: nodeViewProps,
}
</script>
<style lang="scss">
.vue-component {
background: #FAF594;
border: 3px solid #0D0D0D;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
}
.label {
margin-left: 1rem;
background-color: #0D0D0D;
font-size: 0.6rem;
letter-spacing: 1px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: absolute;
top: 0;
padding: 0.25rem 0.75rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.content {
margin: 2.5rem 1rem 1rem;
padding: 0.5rem;
border: 2px dashed #0D0D0D20;
border-radius: 0.5rem;
}
</style>

27
demos/src/GuideNodeViews/ComponentContent/Vue/Extension.js Normal file
View File

@ -0,0 +1,27 @@
import { Node, mergeAttributes } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-3'
import Component from './Component.vue'
export default Node.create({
name: 'vueComponent',
group: 'block',
content: 'inline*',
parseHTML() {
return [
{
tag: 'vue-component',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['vue-component', mergeAttributes(HTMLAttributes), 0]
},
addNodeView() {
return VueNodeViewRenderer(Component)
},
})

15
demos/src/GuideNodeViews/ComponentContent/Vue/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="app"></div>
<script type="module">
import setup from '../../../../setup/vue.ts'
import source from '@source'
setup('GuideNodeViews/ComponentContent', source)
</script>
</body>
</html>

54
demos/src/GuideNodeViews/ComponentContent/Vue/index.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import VueComponent from './Extension.js'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
StarterKit,
VueComponent,
],
content: `
<p>
This is still the text editor you’re used to, but enriched with node views.
</p>
<vue-component>
<p>This is editable.</p>
</vue-component>
<p>
Did you see that? That’s a Vue component. We are really living in the future.
</p>
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
</style>

4
docs/examples/interactivity.md
View File

@ -2,6 +2,6 @@
Thanks to [node views](/guide/node-views) you can add interactivity to your nodes. If you can write it in JavaScript, you can add it to the editor.
https://embed.tiptap.dev/preview/GuideNodeViews/VueComponent
https://embed.tiptap.dev/preview/GuideNodeViews/Component
https://embed.tiptap.dev/preview/GuideNodeViews/VueComponentContent
https://embed.tiptap.dev/preview/GuideNodeViews/ComponentContent