Merge branch 'feature/landingpage' of https://github.com/ueberdosis/tiptap-next into feature/landingpage

docs/src/components/LiveDemo/index.vue

@@ -23,6 +23,8 @@
   </div>
 </template>
 
+<script>
+/*
 <static-query>
 query {
   packages: allPackage {
@@ -34,8 +36,7 @@ query {
   }
 }
 </static-query>
-
-<script>
+*/
 // import collect from 'collect.js'
 import { VueLive } from 'vue-live'
 import CustomLayout from './CustomLayout'

docs/src/demos/Examples/Images/index.spec.js

@@ -0,0 +1,7 @@
+context('/demos/Examples/Images', () => {
+  before(() => {
+    cy.visit('/demos/Examples/Images')
+  })
+
+  // TODO: Write tests
+})

docs/src/demos/Examples/Images/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div v-if="editor">
+    <button @click="addImage">
+      add image from URL
+    </button>
+    <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 Image from '@tiptap/extension-image'
+import Dropcursor from '@tiptap/extension-dropcursor'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  methods: {
+    addImage() {
+      const url = window.prompt('URL')
+
+      if (url) {
+        this.editor.chain().focus().setImage({ src: url }).run()
+      }
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Image,
+        Dropcursor,
+      ],
+      content: `
+        <p>This is a basic example of implementing images. Drag to re-order.</p>
+        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
+        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400" />
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid #68CEF8;
+    }
+  }
+}
+</style>

docs/src/demos/Experiments/Embeds/iframe.ts

@@ -0,0 +1,70 @@
+import { Node, Command } from '@tiptap/core'
+
+export interface IframeOptions {
+  allowFullscreen: boolean,
+  HTMLAttributes: {
+    [key: string]: any
+  },
+}
+
+export default Node.create({
+  name: 'iframe',
+
+  group: 'block',
+
+  // selectable: false,
+
+  defaultOptions: <IframeOptions>{
+    allowFullscreen: true,
+    HTMLAttributes: {
+      class: 'iframe-wrapper',
+    },
+  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      frameborder: {
+        default: 0,
+      },
+      allowfullscreen: {
+        default: this.options.allowFullscreen,
+        parseHTML: () => {
+          return {
+            allowfullscreen: this.options.allowFullscreen,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{
+      tag: 'iframe',
+    }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', this.options.HTMLAttributes, ['iframe', HTMLAttributes, 0]]
+  },
+
+  addCommands() {
+    return {
+      /**
+       * Add an iframe
+       */
+      setIframe: (options: { src: string }): Command => ({ tr, dispatch }) => {
+        const { selection } = tr
+        const node = this.type.create(options)
+
+        if (dispatch) {
+          tr.replaceRangeWith(selection.from, selection.to, node)
+        }
+
+        return true
+      },
+    }
+  },
+})

docs/src/demos/Experiments/Embeds/index.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="editor">
+    <button @click="addImage">
+      add iframe
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import {
+  Editor, EditorContent, defaultExtensions,
+} from '@tiptap/vue-starter-kit'
+import Iframe from './iframe'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        Iframe,
+      ],
+      content: `
+        <p>Here is an exciting video:</p>
+        <iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
+      `,
+    })
+  },
+
+  methods: {
+    addImage() {
+      const url = window.prompt('URL')
+
+      if (url) {
+        this.editor.chain().focus().setIframe({ src: url }).run()
+      }
+    },
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  .iframe-wrapper {
+    position: relative;
+    padding-bottom: 100/16*9%;
+    height: 0;
+    overflow: hidden;
+    width: 100%;
+    height: auto;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid #68CEF8;
+    }
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

docs/src/demos/Experiments/Placeholder/extension/placeholder.ts

@@ -0,0 +1,67 @@
+import { Extension } from '@tiptap/core'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { Plugin } from 'prosemirror-state'
+
+export interface PlaceholderOptions {
+  emptyEditorClass: string,
+  emptyNodeClass: string,
+  placeholder: string | Function,
+  showOnlyWhenEditable: boolean,
+  showOnlyCurrent: boolean,
+}
+
+export default Extension.create({
+  name: 'placeholder',
+
+  defaultOptions: <PlaceholderOptions>{
+    emptyEditorClass: 'is-editor-empty',
+    emptyNodeClass: 'is-empty',
+    placeholder: 'Write something …',
+    showOnlyWhenEditable: true,
+    showOnlyCurrent: true,
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        props: {
+          decorations: ({ doc, selection }) => {
+            const active = this.editor.isEditable || !this.options.showOnlyWhenEditable
+            const { anchor } = selection
+            const decorations: Decoration[] = []
+            const isEditorEmpty = doc.textContent.length === 0
+
+            if (!active) {
+              return
+            }
+
+            doc.descendants((node, pos) => {
+              const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
+              const isNodeEmpty = node.content.size === 0
+
+              if ((hasAnchor || !this.options.showOnlyCurrent) && isNodeEmpty) {
+                const classes = [this.options.emptyNodeClass]
+
+                if (isEditorEmpty) {
+                  classes.push(this.options.emptyEditorClass)
+                }
+
+                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                  class: classes.join(' '),
+                  'data-empty-text': typeof this.options.placeholder === 'function'
+                    ? this.options.placeholder(node)
+                    : this.options.placeholder,
+                })
+                decorations.push(decoration)
+              }
+
+              return false
+            })
+
+            return DecorationSet.create(doc, decorations)
+          },
+        },
+      }),
+    ]
+  },
+})

docs/src/demos/Experiments/Placeholder/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Placeholder from './extension/placeholder'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Placeholder,
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+/* Placeholder */
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-empty-text);
+  float: left;
+  color: #ced4da;
+  pointer-events: none;
+  height: 0;
+}
+</style>

docs/src/demos/Nodes/Image/index.vue

@@ -31,7 +31,9 @@ export default {
     addImage() {
       const url = window.prompt('URL')
 
-      this.editor.chain().focus().setImage({ src: url }).run()
+      if (url) {
+        this.editor.chain().focus().setImage({ src: url }).run()
+      }
     },
   },
 
@@ -68,6 +70,10 @@ export default {
   img {
     max-width: 100%;
     height: auto;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid #68CEF8;
+    }
   }
 }
 </style>

docs/src/docPages/examples/images.md

@@ -0,0 +1,3 @@
+# Images
+
+<demo name="Examples/Images" />

docs/src/docPages/experiments.md

@@ -7,6 +7,7 @@ Congratulations! You’ve found our secret playground with a list of experiments
 * [Comments](/experiments/comments)
 * [Color](/experiments/color)
 * [Commands](/experiments/commands)
+* [Embeds](/experiments/embeds)
 
 ## Waiting for approval
-–
+* [Placeholder](/experiments/placeholder)

docs/src/docPages/experiments/embeds.md

@@ -0,0 +1,5 @@
+# Embeds
+
+⚠️ Experiment
+
+<demo name="Experiments/Embeds" highlight="" />

docs/src/docPages/experiments/placeholder.md

@@ -0,0 +1,5 @@
+# Placeholder
+
+⚠️ Experiment
+
+<demo name="Experiments/Placeholder" highlight="" />

docs/src/docPages/guide/collaborative-editing.md

@@ -1,7 +1,7 @@
 # Collaborative editing
 
-:::pro Become a sponsor
-Using collaborative editing in production? Do the right thing and [sponsor our work](/sponsor)!
+:::pro Professionals
+Using the collaborative editing commercially? [Become a sponsor](/sponsor) to fund its development!
 :::
 
 ## toc
@@ -9,7 +9,7 @@ Using collaborative editing in production? Do the right thing and [sponsor our w
 ## Introduction
 Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of [Y.js](https://github.com/yjs/yjs). The following guide explains all things to take into account when you consider to make tiptap collaborative. Don’t worry, a production-grade setup doesn’t require much code.
 
-## Configure collaboration
+## Configure the editor
 The underyling schema tiptap uses is an excellent foundation to sync documents. With the [`Collaboration`](/api/extensions/collaboration) you can tell tiptap to track changes to the document with [Y.js](https://github.com/yjs/yjs).
 
 Y.js is a conflict-free replicated data types implementation, or in other words: It’s reaaally good in merging changes. And to achieve that, changes don’t have to come in order. It’s totally fine to change a document while being offline and merge the it with other changes when the device is online again.
@@ -209,17 +209,13 @@ All changes will be stored in the browser then, even if you close the tab, go of
 
 Yes, it’s magic. As already mentioned, that is all based on the fantastic Y.js framework. And if you’re using it, or our integration, you should definitely [sponsor Kevin Jahns on GitHub](https://github.com/dmonad), he is the brain behind Y.js.
 
-## Store the content
+## A plug & play backend
 Our collaborative editing backend is ready to handle advanced use cases, like authorization, persistence and scaling. Let’s go through a few common use cases here!
 
+### Where is it?
 :::warning Work in progress
-Our plug & play collaboration backend hocuspocus is still work in progress. We’re setting up a dedicated website and documentation, and need to add one or two features before publishing it.
-
-If you want to give it a try, send us an email to humans@tiptap.dev to receive early access.
+Our plug & play collaboration backend hocuspocus is still work in progress. If you want to give it a try, send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev) to receive early access.
 :::
-<!-- :::pro Backend as a Service (Paid)
-Don’t want to wrap your head around the backend part? No worries, we offer a managed backend. For less than 1.000 documents, it’s $49/month (VAT may apply) and probably saves you a ton of time. Send us an email to [humans@tiptap.dev](mailto:humans@tiptap.dev) for further details.
-::: -->
 
 ### The document name
 The document name is `'example-document'` in all examples here, but it could be any string. In a real-world app you’d probably add the name of your entity and the ID of the entity. Here is how that could look like:

docs/src/index.html

@@ -7,6 +7,10 @@
   <body ${bodyAttrs}>
     ${app}
     ${scripts}
+    ${process.env.NODE_ENV === 'production'
+      ? '<script async defer data-ignore-pages="/demos/*" src="https://data.next.tiptap.dev/latest.js"></script><noscript><img src="https://data.next.tiptap.dev/image.gif" alt=""></noscript>'
+      : ''
+    }
     ${process.env.NODE_ENV === 'production'
       ? '<script async defer data-exclude="/demos/**" data-domain="next.tiptap.dev" src="https://plausible.io/js/plausible.exclusions.js"></script>'
       : ''

docs/src/links.yaml

@@ -41,6 +41,9 @@
     - title: Tables
       link: /examples/tables
       type: draft
+    - title: Images
+      link: /examples/images
+      type: draft
 
 - title: Guide
   items:

docs/src/pages/404.vue

@@ -1,17 +1,24 @@
 <template>
   <div class="error-page">
-    Oh no, page not found.
-    <g-link
-      to="/"
-    >
-      → Back
-    </g-link>
+    <div class="error-page__content">
+      Oh no, we can’t find this page.
+      <g-link
+        to="/"
+      >
+        → Go back
+      </g-link>
+    </div>
   </div>
 </template>
 
 <style lang="scss">
 .error-page {
-  margin: 5rem 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+
+  // margin: 5rem 1rem;
   text-align: center;
   color: rgba($colorWhite, 0.4);
 

docs/src/templates/DocPage/index.vue

@@ -37,7 +37,7 @@ export default {
         },
         {
           property: 'og:image',
-          content: 'https://next.tiptap.dev/og-image.png',
+          content: this.getOpenGraphImage(),
         },
         /* Twitter */
         {
@@ -50,7 +50,7 @@ export default {
         },
         {
           name: 'twitter:image',
-          content: 'https://next.tiptap.dev/og-image.png',
+          content: this.getOpenGraphImage(),
         },
         {
           name: 'twitter:site',
@@ -59,5 +59,14 @@ export default {
       ],
     }
   },
+  methods: {
+    getOpenGraphImage() {
+      const path = this.$route.path.replace(/\/$/, '')
+
+      return path === ''
+        ? 'https://next.tiptap.dev/og-image.png'
+        : `/images${path}/og-image.png`
+    },
+  },
 }
 </script>