Add TableOfContent demo for React

2021-11-16 22:31:34 +01:00
parent a7df47336c
commit 7325c759ca
6 changed files with 197 additions and 0 deletions
--- a/demos/src/GuideNodeViews/TableOfContents/React/Component.jsx
+++ b/demos/src/GuideNodeViews/TableOfContents/React/Component.jsx
@@ -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>
+  )
+}
--- a/demos/src/GuideNodeViews/TableOfContents/React/Component.scss
+++ b/demos/src/GuideNodeViews/TableOfContents/React/Component.scss
@@ -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;
+    }
+  }
+}
--- a/demos/src/GuideNodeViews/TableOfContents/React/TableOfContents.js
+++ b/demos/src/GuideNodeViews/TableOfContents/React/TableOfContents.js
@@ -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,
+          },
+        },
+      },
+    ]
+  },
+})
--- a/demos/src/GuideNodeViews/TableOfContents/React/index.html
+++ b/demos/src/GuideNodeViews/TableOfContents/React/index.html
@@ -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>
--- a/demos/src/GuideNodeViews/TableOfContents/React/index.jsx
+++ b/demos/src/GuideNodeViews/TableOfContents/React/index.jsx
@@ -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} />
+}
--- a/demos/src/GuideNodeViews/TableOfContents/React/styles.scss
+++ b/demos/src/GuideNodeViews/TableOfContents/React/styles.scss
@@ -0,0 +1,6 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}