add new pages, add more content

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

@@ -1,14 +1,83 @@
 <template>
   <div>
-    <button @click="setName">
+    <div v-if="editor">
-      Set Name
+      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-    </button>
+        bold
-    <button @click="changeName">
+      </button>
-      Random Name
+      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-    </button>
+        italic
-    <button @click="changeColor">
+      </button>
-      Random Color
+      <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
-    </button>
+        strike
+      </button>
+      <button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
+        code
+      </button>
+      <button @click="editor.chain().focus().removeMarks().run()">
+        clear marks
+      </button>
+      <button @click="editor.chain().focus().clearNodes().run()">
+        clear nodes
+      </button>
+      <button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+        paragraph
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+        h1
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+        h2
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+        h3
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+        h4
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+        h5
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+        h6
+      </button>
+      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
+        bullet list
+      </button>
+      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
+        ordered list
+      </button>
+      <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+        code block
+      </button>
+      <button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
+        blockquote
+      </button>
+      <button @click="editor.chain().focus().horizontalRule().run()">
+        horizontal rule
+      </button>
+      <button @click="editor.chain().focus().hardBreak().run()">
+        hard break
+      </button>
+      <button @click="editor.chain().focus().undo().run()">
+        undo
+      </button>
+      <button @click="editor.chain().focus().redo().run()">
+        redo
+      </button>
+
+      <br>
+      <br>
+
+      <button @click="setName">
+        Set Name
+      </button>
+      <button @click="changeName">
+        Random Name
+      </button>
+      <button @click="changeColor">
+        Random Color
+      </button>
+    </div>
 
     <div class="collaboration-status">
       {{ users.length }} user{{ users.length === 1 ? '' : 's' }}
@@ -29,7 +98,7 @@
 </template>
 
 <script>
-import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@@ -60,21 +129,15 @@ export default {
 
   mounted() {
     this.ydoc = new Y.Doc()
-    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
     this.type = this.ydoc.getXmlFragment('prosemirror')
     this.indexdb = new IndexeddbPersistence(this.documentName, this.ydoc)
 
+    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
     this.provider.awareness.on('change', this.updateState)
 
     this.editor = new Editor({
-      // TODO: This is added by every new user.
-      // content: `
-      //   <p>Example Text</p>
-      // `,
       extensions: [
-        Document(),
+        ...defaultExtensions(),
-        Paragraph(),
-        Text(),
         Collaboration({
           provider: this.provider,
           type: this.type,

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

@@ -1,9 +0,0 @@
-context('/examples/focus', () => {
-  before(() => {
-    cy.visit('/examples/focus')
-  })
-
-  it('should have class', () => {
-    cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
-  })
-})

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

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <editor-content :editor="editor" />
-  </div>
-</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 Code from '@tiptap/extension-code'
-import BulletList from '@tiptap/extension-bullet-list'
-import ListItem from '@tiptap/extension-list-item'
-import Focus from '@tiptap/extension-focus'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      extensions: [
-        Document(),
-        Paragraph(),
-        Text(),
-        Code(),
-        BulletList(),
-        ListItem(),
-        Focus({
-          className: 'has-focus',
-          nested: true,
-        }),
-      ],
-      autoFocus: true,
-      content: `
-        <p>
-          The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
-        </p>
-        <ul>
-          <li>Nested elements (like this list item) will be focused with the default setting of <code>nested: true</code>.</li>
-          <li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
-        </ul>
-      `,
-    })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>
-
-<style lang="scss">
-.has-focus {
-  border-radius: 3px;
-  box-shadow: 0 0 0 3px #3ea4ffe6;
-}
-</style>

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

@@ -1,31 +0,0 @@
-context('/examples/history', () => {
-  before(() => {
-    cy.visit('/examples/history')
-  })
-
-  beforeEach(() => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.clearContent()
-    })
-  })
-
-  it('should not have a mistake', () => {
-    cy.get('.ProseMirror').then(() => {
-      cy.get('.ProseMirror').should('not.contain', 'Mistake')
-    })
-  })
-
-  it('should have a mistake', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.insertText('Mistake')
-      cy.get('.ProseMirror').should('contain', 'Mistake')
-    })
-  })
-
-  it('the mistake should be removed again', () => {
-    cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.undo()
-      cy.get('.ProseMirror').should('not.contain', 'Mistake')
-    })
-  })
-})

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

@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <div v-if="editor">
-      <button @click="editor.chain().focus().undo().run()">
-        undo
-      </button>
-      <button @click="editor.chain().focus().redo().run()">
-        redo
-      </button>
-    </div>
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
-
-export default {
-  components: {
-    EditorContent,
-  },
-
-  data() {
-    return {
-      editor: null,
-    }
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      content: `
-        <p>
-          With the <code>History</code> extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
-        </p>
-        <p>
-          And yes, you can also use a keyboard shortcut to undo changes (<code>Control/Cmd</code> <code>Z</code>) or redo changes (<code>Control/Cmd</code> <code>Shift</code> <code>Z</code>).
-        </p>
-      `,
-      extensions: defaultExtensions(),
-    })
-  },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
-}
-</script>

docs/src/demos/Extensions/Focus/index.vue

@@ -10,6 +10,9 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Focus from '@tiptap/extension-focus'
+import Code from '@tiptap/extension-code'
+import BulletList from '@tiptap/extension-bullet-list'
+import ListItem from '@tiptap/extension-list-item'
 
 export default {
   components: {
@@ -32,15 +35,19 @@ export default {
           className: 'has-focus',
           nested: true,
         }),
+        Code(),
+        BulletList(),
+        ListItem(),
       ],
       autoFocus: true,
       content: `
         <p>
           The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
         </p>
-        <p>
+        <ul>
-          Nested elements will be focused with the default setting nested: true. Otherwise the whole item will get the focus class, even when just a single nested item is selected.
+          <li>Nested elements (like this list item) will be focused with the default setting of <code>nested: true</code>.</li>
-        </p>
+          <li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
+        </ul>
       `,
     })
   },

docs/src/demos/Extensions/History/index.vue

@@ -39,7 +39,12 @@ export default {
         History(),
       ],
       content: `
-        <p>Edit this text and press undo to test this extension.</p>
+        <p>
+          With the History extension the Editor will keep track of your changes. And if you think you made a mistake, you can redo your changes. Try it out, change the content and hit the undo button!
+        </p>
+        <p>
+          And yes, you can also use a keyboard shortcut to undo changes (Control/Cmd Z) or redo changes (Control/Cmd Shift Z).
+        </p>
       `,
     })
   },

docs/src/docPages/api/extensions/focus.md

@@ -22,4 +22,4 @@ yarn add @tiptap/extension-focus
 [packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
 
 ## Usage
-<demo name="Extensions/Focus" highlight="31-34,12" />
+<demo name="Extensions/Focus" highlight="12,34-37" />

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

@@ -10,10 +10,10 @@ It connects client with WebRTC and merges changes to the document (no matter whe
 
 If you want to learn more about collaborative text editing, [check out our guide on that topic](/guide/collaborative-editing). Anyway, it’s showtime now:
 
-:::warning The content of this editor is shared with other users from the Internet.
+:::warning Shared Document
-Don’t share your password, credit card numbers or other things you wouldn’t make public.
+Be nice! The content of this editor is shared with other users from the Internet.
 :::
 
-<!-- <demo name="Examples/Collaboration" :show-source="false"/> -->
+<!-- <demo name="Examples/CollaborativeEditing" :show-source="false"/> -->
 
 <demo name="Examples/CollaborativeEditing" />

docs/src/docPages/examples/focus.md

@@ -1,3 +0,0 @@
-# Focus
-
-<demo name="Examples/Focus" highlight="15,37-40,42" />

docs/src/docPages/examples/history.md

@@ -1,3 +0,0 @@
-# History
-
-<demo name="Examples/History" highlight="4-9" />

docs/src/docPages/guide/advanced-node-views.md

@@ -0,0 +1 @@
+# Advanced node views

docs/src/docPages/guide/use-vue-components.md

@@ -1 +0,0 @@
-# Use Vue Components

docs/src/docPages/guide/working-with-typescript.md

@@ -0,0 +1,12 @@
+# Working with TypeScript
+
+## toc
+
+## Introduction
+
+
+## Options type
+
+
+## Create a command
+

docs/src/links.yaml

@@ -25,13 +25,8 @@
           draft: true
         - title: Todo App
           link: /examples/todo-app
-          draft: true
-        - title: History
-          link: /examples/history
         - title: Read-only
           link: /examples/read-only
-        - title: Focus
-          link: /examples/focus
         - title: Minimalist
           link: /examples/minimalist
         - title: Export HTML or JSON
@@ -54,13 +49,16 @@
       link: /guide/store-content
     - title: Build custom extensions
       link: /guide/build-custom-extensions
-    # - title: Use Vue Components
-    #   link: /guide/use-vue-components
-    #   draft: true
     - title: Collaborative editing
       link: /guide/collaborative-editing
       draft: true
       premium: true
+    - title: Advanced node views
+      link: /guide/advanced-node-views
+      draft: true
+    - title: Working with TypeScript
+      link: /guide/working-with-typescript
+      draft: true
 
 - title: API
   items: