move docs to own folder

docs/src/components/Demo/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="demo">
+    <div class="demo__preview" v-if="mainFile">
+      <component :is="mainFile" v-if="mode === 'vue'" />
+      <react-renderer :component="mainFile" v-if="mode === 'react'" />
+    </div>
+    <div class="demo__source">
+      <div class="demo__tabs" v-if="showFileNames">
+        <button
+          class="demo__tab"
+          :class="{ 'is-active': currentIndex === index}"
+          v-for="(file, index) in files"
+          :key="index"
+          @click="currentIndex = index"
+        >
+          {{ file.name }}
+        </button>
+      </div>
+      <div class="demo__code" v-if="activeFile">
+        <pre :class="`language-${activeFile.highlight}`"><code :class="`language-${activeFile.highlight}`" v-html="$options.filters.highlight(activeFile.content, activeFile.highlight)"></code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReactRenderer from '~/components/ReactRenderer'
+
+export default {
+  components: {
+    ReactRenderer,
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    mode: {
+      type: String,
+      default: 'vue',
+    },
+  },
+
+  data() {
+    return {
+      files: [],
+      content: null,
+      currentIndex: 0,
+      syntax: {
+        js: 'javascript',
+        jsx: 'jsx',
+        vue: 'markup',
+        css: 'css',
+      },
+    }
+  },
+
+  computed: {
+    mainFile() {
+      const file = this.files
+        .find(item => item.path.endsWith('.vue') || item.path.endsWith('.jsx'))
+
+      if (!file) {
+        return
+      }
+
+      return require(`~/demos/${file.path}`).default
+    },
+
+    showFileNames() {
+      return this.files.length > 1
+    },
+
+    activeFile() {
+      return this.files[this.currentIndex]
+    },
+  },
+
+  mounted() {
+    this.files = require.context(`~/demos/`, true, /.+\..+$/)
+      .keys()
+      .filter(path => path.startsWith(`./${this.name}`))
+      .map(path => path.replace('./', ''))
+      .map(path => ({
+        path,
+        name: path.replace(`${this.name}/`, ''),
+        content: require(`!!raw-loader!~/demos/${path}`).default,
+        extension: path.split('.').pop(),
+        highlight: this.syntax[path.split('.').pop()] || 'markup',
+      }))
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss" scoped />

docs/src/components/Demo/style.scss

@@ -0,0 +1,64 @@
+.demo {
+  background-color: $colorWhite;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow:
+    0px 6.6501px 5.32008px rgba($colorBlack, 0.0161557),
+    0px 22.3363px 17.869px rgba($colorBlack, 0.0238443),
+    0px 100px 80px rgba($colorBlack, 0.04),
+    0 0 0 1px rgba($colorBlack, 0.05),
+  ;
+  
+  &__preview {
+    padding: 1.5rem;
+  }
+  
+  &__source {
+    background-color: $colorLightGrey;
+  }
+
+  &__tabs {
+    padding: 0 1.5rem;
+    border-bottom: 1px solid rgba($colorBlack, 0.05);
+  }
+
+  &__tab {
+    position: relative;
+    color: rgba($colorBlack, 0.5);
+    font: inherit;
+    font-weight: 500;
+    padding: 0.75rem 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-right: 1rem;
+
+    &.is-active {
+      color: $colorBlack;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: $colorBlack;
+      }
+    } 
+  }
+  
+  &__code {
+    padding: 0.75rem 1.5rem;
+
+    code, pre {
+      padding: 0;
+    }
+  
+    [class*="language-"] {
+      background: none;
+      border: none;
+      box-shadow: none;
+    }
+  }
+}

docs/src/components/ReactRenderer/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+export default {
+  props: {
+    component: {
+      required: true,
+    }
+  },
+
+  mounted() {
+    ReactDOM.render(React.createElement(this.component), this.$el)
+  },
+
+  beforeDestroy() {
+    ReactDOM.unmountComponentAtNode(this.$el)
+  },
+}
+</script>

docs/src/components/Tab/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <pre v-if="formattedCode"><code>{{ formattedCode }}</code></pre>
+</template>
+
+<script>
+import { outdent } from '@mvasilkov/outdent'
+
+export default {
+  data() {
+    return {
+      formattedCode: null
+    }
+  },
+
+  methods: {
+    updateCode() {
+      const text = this.$slots.default[0].text
+
+      if (text) {
+        this.formattedCode = outdent(text)
+      }
+    }
+  },
+
+  beforeUpdate() {
+    this.updateCode()
+  },
+
+  mounted() {
+    this.updateCode()
+  },
+}
+</script>

docs/src/demos/Basic/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import extensions from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: '<p>foo</p>',
+      extensions: extensions(),
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/demos/Basic/style.scss

@@ -0,0 +1,3 @@
+.bla {
+  color: black;
+}

docs/src/demos/HandleExtensions/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <button @click="editor.focus().removeMarks()">
+        clear formatting
+      </button>
+      <button @click="editor.focus().undo()">
+        undo
+      </button>
+      <button @click="editor.focus().redo()">
+        redo
+      </button>
+      <button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
+        bold
+      </button>
+      <button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
+        italic
+      </button>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import History from '@tiptap/extension-history'
+import Bold from '@tiptap/extension-bold'
+import Italic from '@tiptap/extension-italic'
+import Code from '@tiptap/extension-code'
+import CodeBlock from '@tiptap/extension-codeblock'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: '<p>This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.</p>',
+      extensions: [
+        new Document(),
+        new Paragraph(),
+        new Text(),
+        new CodeBlock(),
+        new History(),
+        new Bold(),
+        new Italic(),
+        new Code(),
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/demos/React/index.jsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { Editor } from '@tiptap/core'
+import extensions from '@tiptap/starter-kit'
+
+export default class TestComponent extends Component {
+  constructor() {
+    super()
+    this.editorNode = React.createRef()
+  }
+  
+  componentDidMount() {
+    this.editor = new Editor({
+      element: this.editorNode.current,
+      content: '<p>rendered in <strong>react</strong>!</p>',
+      extensions: extensions(),
+    })
+    this.forceUpdate()
+  }
+
+  render() {
+    return (
+      <div>
+        {this.editor &&
+          <div>
+            <button onClick={() => this.editor.focus().removeMarks()}>
+              clear formatting
+            </button>
+            <button
+              onClick={() => this.editor.focus().bold()}
+              className={`${this.editor.isActive('bold') ? 'is-active' : ''}`}
+            >
+              bold
+            </button>
+          </div>
+        } 
+        <div ref={this.editorNode} />
+      </div>
+    )
+  }
+}

docs/src/layouts/Default.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="layout">
+    <header class="header">
+      <strong>
+        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
+      </strong>
+    </header>
+    <slot/>
+  </div>
+</template>
+
+<static-query>
+query {
+  metadata {
+    siteName
+  }
+}
+</static-query>
+
+<style lang="scss">
+body {
+  font-family: 'Inter', -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+  margin:0;
+  padding:0;
+  line-height: 1.5;
+  background-color: $colorLightGrey;
+}
+
+.layout {
+  max-width: 760px;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  height: 80px;
+}
+
+.nav__link {
+  margin-left: 20px;
+}
+
+*:focus {
+  outline: none;
+}
+
+.is-active {
+  background: black;
+  color: white;
+}
+
+// :not(pre) > code[class*="language-"], pre[class*="language-"] {
+//   background-color: $colorBlack;
+// }
+</style>

docs/src/layouts/README.md

@@ -0,0 +1,5 @@
+Layout components are used to wrap pages and templates. Layouts should contain components like headers, footers or sidebars that will be used across the site.
+
+Learn more about Layouts: https://gridsome.org/docs/layouts/
+
+You can delete this file.

docs/src/main.js

@@ -0,0 +1,17 @@
+import Prism from 'prismjs'
+import 'prismjs/themes/prism-coy.css'
+import 'prismjs/components/prism-jsx.js'
+import DefaultLayout from '~/layouts/Default.vue'
+import Demo from '~/components/Demo'
+import Tab from '~/components/Tab'
+import ReactRenderer from '~/components/ReactRenderer'
+
+export default function (Vue, { router, head, isClient }) {
+  Vue.component('Layout', DefaultLayout)
+  Vue.component('Demo', Demo)
+  Vue.component('Tab', Tab)
+  Vue.component('ReactRenderer', ReactRenderer)
+  Vue.filter('highlight', (code, lang = 'javascript') => {
+    return Prism.highlight(code, Prism.languages[lang], lang)
+  })
+}

docs/src/pages/Index.vue

@@ -0,0 +1,25 @@
+<template>
+  <Layout>
+
+    <div v-for="edge in $static.allPost.edges" :key="edge.node.id">
+      <g-link :to="edge.node.path">
+        {{ edge.node.title }}
+      </g-link>
+    </div>
+
+  </Layout>
+</template>
+
+<static-query>
+query {
+  allPost {
+    edges {
+      node {
+        id
+        title
+        path
+      }
+    }
+  }
+}
+</static-query>

docs/src/pages/README.md

@@ -0,0 +1,5 @@
+Pages are usually used for normal pages or for listing items from a GraphQL collection.
+Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
+Learn more about pages: https://gridsome.org/docs/pages/
+
+You can delete this file.

docs/src/pages/tests/Basic.vue

@@ -0,0 +1,45 @@
+<template>
+  <Layout>
+    <editor-content :editor="editor" />
+  </Layout>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import History from '@tiptap/extension-history'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      element: this.$refs.editor,
+      content: '<p>foo</p>',
+      extensions: [
+        new Document(),
+        new Paragraph(),
+        new Text(),
+        new History(),
+      ],
+    })
+
+    window.editor = this.editor
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/templates/Post.vue

@@ -0,0 +1,65 @@
+<template>
+  <Layout>
+    <h1>{{ $page.post.title }}</h1>
+    <VueRemarkContent />
+
+    <div ref="editor"></div>
+  </Layout>
+</template>
+
+<page-query>
+query Post ($id: ID!) {
+  post(id: $id) {
+    title
+  }
+}
+</page-query>
+
+<script>
+import Editor from '@tiptap/core'
+
+export default {
+  mounted() {
+    // console.log(tiptap())
+
+
+    // new Editor({
+    //   element: this.$refs.editor,
+    //   content: '<p>test <strong>strong</strong></p>',
+    // })
+    // .setContent('<p>hey</p>')
+      // .registerCommand('lol', (next) => {
+      //   console.log('lol')
+      //   next()
+      // })
+      // .focus('end')
+      // .insertText('mega ')
+      // .focus('start')
+      // .command('insertText', 'giga ')
+      // .lol()
+
+      // .registerCommand('insertHTML', (next, editor, html) => {
+      //   console.log(html)
+      //   next()
+      // })
+      // .registerCommand('insertHello', async (next, editor) => {
+      //   await editor.insertHTML('<strong>HELLO</strong>')
+      //   next()
+      // })
+      // .registerCommand('insertHello', (next, editor) => {
+      //   editor
+      //     .focus('start')
+      //     .insertHTML('<strong>HELLO</strong>')
+      //   next()
+      // })
+      // .focus('start')
+      // .insertHello()
+      // .insertText('eins')
+      // .insertText('zwei')
+      // .insertText('drei')
+      // .insertHello()
+      // .focus('end')
+      // .insertHTML('<p>end</p>')
+  }
+}
+</script>

docs/src/templates/README.md

@@ -0,0 +1,7 @@
+Templates for **GraphQL collections** should be added here.
+To create a template for a collection called `WordPressPost`
+create a file named `WordPressPost.vue` in this folder.
+
+Learn more: https://gridsome.org/docs/templates/
+
+You can delete this file.

docs/src/variables.scss

@@ -0,0 +1,3 @@
+$colorWhite: #FFF;
+$colorLightGrey: #F8F8F8;
+$colorBlack: #000;