Skip to content

Commit

Permalink
docs: add drag handle demo for React (#5783)
Browse files Browse the repository at this point in the history
  • Loading branch information
Hector-Chong authored Oct 30, 2024
1 parent 1523901 commit 077c540
Show file tree
Hide file tree
Showing 5 changed files with 198 additions and 0 deletions.
11 changes: 11 additions & 0 deletions demos/src/GuideNodeViews/DragHandle/React/Component.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { NodeViewContent, NodeViewWrapper } from '@tiptap/react'
import React from 'react'

export default () => {
return (
<NodeViewWrapper className="draggable-item">
<div className="drag-handle" contentEditable={false} draggable="true" data-drag-handle />
<NodeViewContent className="content" />
</NodeViewWrapper>
)
}
30 changes: 30 additions & 0 deletions demos/src/GuideNodeViews/DragHandle/React/DraggableItem.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { mergeAttributes, Node } from '@tiptap/core'
import { ReactNodeViewRenderer } from '@tiptap/react'

import Component from './Component.jsx'

export default Node.create({
name: 'draggableItem',

group: 'block',

content: 'block+',

draggable: true,

parseHTML() {
return [
{
tag: 'div[data-type="draggable-item"]',
},
]
},

renderHTML({ HTMLAttributes }) {
return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'draggable-item' }), 0]
},

addNodeView() {
return ReactNodeViewRenderer(Component)
},
})
Empty file.
33 changes: 33 additions & 0 deletions demos/src/GuideNodeViews/DragHandle/React/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import './styles.scss'

import { EditorProvider } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'

import DraggableItem from './DraggableItem.js'

const extensions = [
StarterKit,
DraggableItem,
]

const content = `
<p>This is a boring paragraph.</p>
<div data-type="draggable-item">
<p>Followed by a fancy draggable item.</p>
</div>
<div data-type="draggable-item">
<p>And another draggable item.</p>
<div data-type="draggable-item">
<p>And a nested one.</p>
<div data-type="draggable-item">
<p>But can we go deeper?</p>
</div>
</div>
</div>
<p>Let’s finish with a boring paragraph.</p>
`

export default () => {
return <EditorProvider extensions={extensions} content={content}></EditorProvider>
}
124 changes: 124 additions & 0 deletions demos/src/GuideNodeViews/DragHandle/React/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/* Basic editor styles */
.tiptap {
:first-child {
margin-top: 0;
}

/* List styles */
ul,
ol {
padding: 0 1rem;
margin: 1.25rem 1rem 1.25rem 0.4rem;

li p {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
}

/* Heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
margin-top: 2.5rem;
text-wrap: pretty;
}

h1,
h2 {
margin-top: 3.5rem;
margin-bottom: 1.5rem;
}

h1 {
font-size: 1.4rem;
}

h2 {
font-size: 1.2rem;
}

h3 {
font-size: 1.1rem;
}

h4,
h5,
h6 {
font-size: 1rem;
}

/* Code and preformatted text styles */
code {
background-color: var(--purple-light);
border-radius: 0.4rem;
color: var(--black);
font-size: 0.85rem;
padding: 0.25em 0.3em;
}

pre {
background: var(--black);
border-radius: 0.5rem;
color: var(--white);
font-family: "JetBrainsMono", monospace;
margin: 1.5rem 0;
padding: 0.75rem 1rem;

code {
background: none;
color: inherit;
font-size: 0.8rem;
padding: 0;
}
}

blockquote {
border-left: 3px solid var(--gray-3);
margin: 1.5rem 0;
padding-left: 1rem;
}

hr {
border: none;
border-top: 1px solid var(--gray-2);
margin: 2rem 0;
}

// Focus styles
.has-focus {
border-radius: 3px;
box-shadow: 0 0 0 2px var(--purple);
}
}

.draggable-item {
display: flex;
padding: 0.5rem;
margin: 0.5rem 0;
border-radius: 0.5rem;
background: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);

.drag-handle {
flex: 0 0 auto;
position: relative;
width: 1rem;
height: 1rem;
top: 0.3rem;
margin-right: 0.5rem;
cursor: grab;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

.content {
flex: 1 1 auto;
}
}

0 comments on commit 077c540

Please sign in to comment.