ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add GuideNodeViews demos

Browse Source
This commit is contained in:
Philipp Kühn
2021-08-25 18:32:54 +02:00
parent b1a87e4ad6
commit 8a5a491d8e
32 changed files with 1264 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
demos/src/GuideNodeViews/ReactComponentContent/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/ReactComponentContent/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/ReactComponentContent/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.tsx'
import source from '@source'
setup('GuideNodeViews/ReactComponentContent', source)
</script>
</body>
</html>

29
demos/src/GuideNodeViews/ReactComponentContent/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/ReactComponentContent/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;
}
}