Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

docs/gridsome.server.js

@@ -50,6 +50,8 @@ module.exports = function (api) {
     /**
      * Generate pages for all demo components for testing purposes
      */
+    const demos = []
+
     globby.sync('./src/demos/**/index.(vue|jsx)').forEach(file => {
       const match = file.match(
         new RegExp(/\.\/src\/demos\/([\S]+)\/index.(vue|jsx)/i),
@@ -59,14 +61,24 @@ module.exports = function (api) {
         return
       }
 
+      demos.push(match[1])
+    })
+
     api.createPages(({ createPage }) => {
       createPage({
-          // path: '/demos/Extensions/CharacterCount'
+        path: '/demos',
-          path: `/demos/${match[1]}`,
+        component: './src/templates/DemoPages/index.vue',
+        context: {
+          demos,
+        },
+      })
+
+      demos.forEach(name => {
+        createPage({
+          path: `/demos/${name}`,
           component: './src/templates/DemoPage/index.vue',
           context: {
-            // name: 'Extensions/CharacterCount'
+            name,
-            name: match[1],
           },
         })
       })
@@ -116,9 +128,7 @@ module.exports = function (api) {
 
     const width = 1200
     const height = 630
-
     const border = 40
-
     const canvas = createCanvas(width, height)
     const context = canvas.getContext('2d')
 

docs/src/demos/Examples/Savvy/findColors.ts

@@ -1,33 +1,29 @@
 import { Decoration, DecorationSet } from 'prosemirror-view'
 import { Node } from 'prosemirror-model'
 
-export default function (doc: Node) {
+export default function (doc: Node): DecorationSet {
   const hexColor = /(#[0-9a-f]{3,6})\b/ig
-  const results: any[] = []
+  const decorations: Decoration[] = []
-  const decorations: [any?] = []
 
-  doc.descendants((node: any, position: any) => {
+  doc.descendants((node, position) => {
-    if (!node.isText) {
+    if (!node.text) {
       return
     }
 
-    let matches
+    Array
-
+      .from(node.text.matchAll(hexColor))
-    // eslint-disable-next-line
+      .forEach(match => {
-    while (matches = hexColor.exec(node.text)) {
+        const color = match[0]
-      results.push({
+        const index = match.index || 0
-        color: matches[0],
+        const from = position + index
-        from: position + matches.index,
+        const to = position + index + match[0].length
-        to: position + matches.index + matches[0].length,
+        const decoration = Decoration.inline(from, to, {
-      })
-    }
-  })
-
-  results.forEach(issue => {
-    decorations.push(Decoration.inline(issue.from, issue.to, {
           class: 'color',
-      style: `--color: ${issue.color}`,
+          style: `--color: ${color}`,
-    }))
+        })
+
+        decorations.push(decoration)
+      })
   })
 
   return DecorationSet.create(doc, decorations)

docs/src/templates/DemoPages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <ul class="demos-page">
+    <li v-for="(demo, index) in $context.demos" :key="index">
+      <g-link :to="`/demos/${demo}`">
+        {{ demo }}
+      </g-link>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

docs/src/templates/DemoPages/style.scss

@@ -0,0 +1,8 @@
+.demos-page {
+  padding: 1.25rem;
+  list-style: none;
+
+  li {
+    margin: 0.5rem 0;
+  }
+}