move docs to own folder

docs/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react"]
+}

docs/content/posts/basic.md

@@ -0,0 +1,8 @@
+---
+title: Basic Example
+slug: basic
+---
+
+This is a basic example of tiptap.
+
+<demo name="Basic" />

docs/content/posts/extensions.md

@@ -0,0 +1,8 @@
+---
+title: Handle Extensions
+slug: handle-extensions
+---
+
+Use a custom list of extensions.
+
+<demo name="HandleExtensions" />

docs/content/posts/install.md

@@ -0,0 +1,8 @@
+---
+title: Install
+slug: install
+---
+
+<tab>
+  npm install @tiptap/core @tiptap/vue
+</tab>

docs/content/posts/react.md

@@ -0,0 +1,8 @@
+---
+title: React Test
+slug: react
+---
+
+This is a basic example of tiptap.
+
+<demo name="React" mode="react" />

docs/gridsome.config.js

@@ -0,0 +1,51 @@
+const path = require('path')
+
+function addStyleResource(rule) {
+  rule.use('style-resource')
+    .loader('style-resources-loader')
+    .options({
+      patterns: [
+        path.resolve(__dirname, './src/variables.scss'),
+      ],
+    })
+}
+
+module.exports = {
+  siteName: 'TipTap',
+  port: 3000,
+  plugins: [
+    {
+      use: '@gridsome/vue-remark',
+      options: {
+        typeName: 'Post',
+        baseDir: './content/posts',
+        route: '/posts/:slug',
+        template: './src/templates/Post.vue',
+        plugins: [
+          '@gridsome/remark-prismjs',
+          [
+            '@noxify/gridsome-plugin-remark-embed',
+            {
+              'enabledProviders' : ['Youtube', 'Twitter', 'Gist'],
+            },
+          ],
+        ],
+      }
+    },
+    // {
+    //   use: '@gridsome/source-filesystem',
+    //   options: {
+    //     path: './people/**/*.json',
+    //     typeName: 'People',
+    //   }
+    // },
+  ],
+  chainWebpack(config) {
+    // Load variables for all vue-files
+    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
+
+    types.forEach(type => {
+      addStyleResource(config.module.rule('scss').oneOf(type))
+    })
+  },
+}

docs/gridsome.server.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const globby = require('globby')
+
+module.exports = function (api) {
+  api.chainWebpack(config => {
+    config.resolve.extensions
+      .add('.ts')
+
+    config.module
+      .rule('typescript')
+        .test(/\.tsx?$/)
+        .use()
+          .loader('ts-loader')
+          .options({ appendTsSuffixTo: [/\.vue$/] })
+
+    config.module
+      .rule('jsx')
+        .test(/\.jsx?$/)
+        .use()
+          .loader('babel-loader')
+    
+    globby.sync('./packages/*', { onlyDirectories: true })
+      .map(name => name.replace('./packages/', ''))
+      .forEach(name => {
+        config.resolve.alias
+          .set(`@tiptap/${name}`, path.resolve(`./packages/${name}`))
+      })
+  })
+}

docs/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@tiptap/docs",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "gridsome develop",
+    "build": "gridsome build"
+  },
+  "dependencies": {
+    "@gridsome/remark-prismjs": "^0.3.0",
+    "@gridsome/source-filesystem": "^0.6.2",
+    "@gridsome/transformer-json": "^0.2.1",
+    "@gridsome/vue-remark": "^0.1.10",
+    "@mvasilkov/outdent": "^1.0.4",
+    "@noxify/gridsome-plugin-remark-embed": "^1.1.5",
+    "globby": "^11.0.0",
+    "gridsome": "0.7.12",
+    "raw-loader": "^4.0.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "typescript": "^3.8.3"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.9.4",
+    "node-sass": "^4.13.1",
+    "sass-loader": "^8.0.2",
+    "style-resources-loader": "^1.3.3",
+    "ts-loader": "^6.2.2"
+  }
+}

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;

docs/static/README.md

@@ -0,0 +1,3 @@
+Add static files here. Files in this directory will be copied directly to `dist` folder during build. For example, /static/robots.txt will be located at https://yoursite.com/robots.txt.
+
+This file should be deleted.