add GuideNodeViews demos

2021-08-25 18:32:54 +02:00
parent b1a87e4ad6
commit 8a5a491d8e
32 changed files with 1264 additions and 0 deletions
--- a/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
@@ -0,0 +1,126 @@
+<template>
+  <node-view-wrapper class="toc">
+    <ul class="toc__list">
+      <li
+        class="toc__item"
+        :class="`toc__item--${heading.level}`"
+        v-for="(heading, index) in headings"
+        :key="index"
+      >
+        <a :href="`#${heading.id}`">
+          {{ heading.text }}
+        </a>
+      </li>
+    </ul>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    NodeViewWrapper,
+  },
+
+  props: nodeViewProps,
+
+  data() {
+    return {
+      headings: [],
+    }
+  },
+
+  methods: {
+    handleUpdate() {
+      const headings = []
+      const transaction = this.editor.state.tr
+
+      this.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)
+
+      this.editor.view.dispatch(transaction)
+
+      this.headings = headings
+    },
+  },
+
+  mounted() {
+    this.editor.on('update', this.handleUpdate)
+    this.$nextTick(this.handleUpdate)
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>
+
+<style lang="scss">
+.toc {
+  opacity: 0.75;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(black, 0.1);
+
+  &__list {
+    list-style: none;
+    padding: 0;
+
+    &::before {
+      display: block;
+      content: "Table of Contents";
+      font-weight: 700;
+      letter-spacing: 0.025rem;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      opacity: 0.5;
+    }
+  }
+
+  &__item {
+    a:hover {
+      opacity: 0.5;
+    }
+
+    &--3 {
+      padding-left: 1rem;
+    }
+
+    &--4 {
+      padding-left: 2rem;
+    }
+
+    &--5 {
+      padding-left: 3rem;
+    }
+
+    &--6 {
+      padding-left: 4rem;
+    }
+  }
+}
+</style>
--- a/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
@@ -0,0 +1,42 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'tableOfContents',
+
+  group: 'block',
+
+  atom: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'toc',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['toc', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: [
+          'heading',
+        ],
+        attributes: {
+          id: {
+            default: null,
+          },
+        },
+      },
+    ]
+  },
+})
--- a/demos/src/GuideNodeViews/TableOfContents/Vue/index.html
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/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/vue.ts'
+      import source from '@source'
+      setup('GuideNodeViews/TableOfContents', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import TableOfContents from './TableOfContents.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      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>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>