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

Add TableOfContent demo for React

Browse Source
This commit is contained in:
svenadlung
2021-11-16 22:31:34 +01:00
parent a7df47336c
commit 7325c759ca
6 changed files with 197 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,63 @@
import React, { useState, useEffect, useCallback } from 'react'
import { NodeViewWrapper } from '@tiptap/react'
import './Component.scss'
export default ({ editor }) => {
const [items, setItems] = useState([])
const handleUpdate = useCallback(() => {
const headings = []
const transaction = editor.state.tr
editor.state.doc.descendants((node, pos) => {
if (node.type.name === 'heading') {
const id = `heading-${headings.length + 1}`
if (node.attrs.id !== id) {
transaction.setNodeMarkup(pos, undefined, {
...node.attrs,
id,
})
}
headings.push({
level: node.attrs.level,
text: node.textContent,
id,
})
}
})
transaction.setMeta('preventUpdate', true)
editor.view.dispatch(transaction)
setItems(headings)
}, [editor])
useEffect(handleUpdate, [])
useEffect(() => {
if (!editor) {
return null
}
editor.on('update', handleUpdate)
return () => {
editor.off('update', handleUpdate)
}
}, [editor])
return (
<NodeViewWrapper className="toc">
<ul className="toc__list">
{items.map((item, index) => (
<li key={index} className={`toc__item toc__item--${item.level}`}>
<a href={`#${item.id}`}>{item.text}</a>
</li>
))}
</ul>
</NodeViewWrapper>
)
}

43
demos/src/GuideNodeViews/TableOfContents/React/Component.scss Normal file
View File

@@ -0,0 +1,43 @@
.toc {
background: rgba(black, 0.1);
border-radius: 0.5rem;
opacity: 0.75;
padding: 0.75rem;
&__list {
list-style: none;
padding: 0;
&::before {
content: "Table of Contents";
display: block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.025rem;
opacity: 0.5;
text-transform: uppercase;
}
}
&__item {
a:hover {
opacity: 0.5;
}
&--3 {
padding-left: 1rem;
}
&--4 {
padding-left: 2rem;
}
&--5 {
padding-left: 3rem;
}
&--6 {
padding-left: 4rem;
}
}
}

40
demos/src/GuideNodeViews/TableOfContents/React/TableOfContents.js Normal file
View File

@@ -0,0 +1,40 @@
import { Node, mergeAttributes } from '@tiptap/core'
import { ReactNodeViewRenderer } from '@tiptap/react'
import Component from './Component.jsx'
export default Node.create({
name: 'tableOfContents',
group: 'block',
atom: true,
parseHTML() {
return [
{
tag: 'toc',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['toc', mergeAttributes(HTMLAttributes)]
},
addNodeView() {
return ReactNodeViewRenderer(Component)
},
addGlobalAttributes() {
return [
{
types: ['heading'],
attributes: {
id: {
default: null,
},
},
},
]
},
})

15
demos/src/GuideNodeViews/TableOfContents/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/TableOfContents", source);
</script>
</body>
</html>

30
demos/src/GuideNodeViews/TableOfContents/React/index.jsx Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import TableOfContents from './TableOfContents.js'
import './styles.scss'
export default () => {
const editor = useEditor({
extensions: [StarterKit, TableOfContents],
content: `
<toc></toc>
<h2>1 heading</h2>
<p>paragraph</p>
<h3>1.1 heading</h3>
<p>paragraph</p>
<h3>1.2 heading</h3>
<p>paragraph</p>
<h2>2 heading</h2>
<p>paragraph</p>
<h3>2.1 heading</h3>
<p>paragraph</p>
`,
})
if (!editor) {
return null
}
return <EditorContent editor={editor} />
}

6
demos/src/GuideNodeViews/TableOfContents/React/styles.scss Normal file
View File

@@ -0,0 +1,6 @@
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}