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

docs/src/demos/Examples/BubbleMenu/React/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      ...defaultExtensions(),
+    ],
+    content: `
+      <p>
+        Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+      </p>
+    `,
+  })
+
+  return (
+    <div style={{ position: 'relative' }}>
+      {editor && <BubbleMenu editor={editor}>
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          className={editor.isActive('code') ? 'is-active' : ''}
+        >
+          code
+        </button>
+      </BubbleMenu>}
+      <EditorContent editor={editor} />
+    </div>
+  )
+}

docs/src/demos/Examples/BubbleMenu/React/index.spec.js

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

docs/src/demos/Examples/BubbleMenu/React/styles.scss

@@ -0,0 +1,5 @@
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}

docs/src/demos/Examples/BubbleMenu/Vue/index.spec.js

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

docs/src/demos/Examples/BubbleMenu/Vue/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div style="position: relative">
+    <bubble-menu :editor="editor" v-if="editor">
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        bold
+      </button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        italic
+      </button>
+      <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+        code
+      </button>
+    </bubble-menu>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
+import { defaultExtensions } from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+    BubbleMenu,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+      ],
+      content: `
+        <p>
+          Hey, try to select some text here. You’ll see a formatting menu pop up. And as always, you are in full control about content and styling of this menu.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>

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

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

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

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

docs/src/demos/Extensions/BubbleMenu/Vue/index.vue

@@ -38,7 +38,7 @@ export default {
       ],
       content: `
         <p>
-          Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+          Hey, try to select some text here. You’ll see a formatting menu pop up. And as always, you are in full control about content and styling of this menu.
         </p>
       `,
     })

docs/src/docPages/api/extensions/bubble-menu.md

@@ -2,7 +2,9 @@
 [![Version](https://img.shields.io/npm/v/@tiptap/extension-bubble-menu.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-bubble-menu)
 [![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-bubble-menu.svg)](https://npmcharts.com/compare/@tiptap/extension-bubble-menu?minimal=true)
 
-This extension will make a contextual menu appear near a selection of text.
+This extension will make a contextual menu appear near a selection of text. Use it to let users apply [marks](/api/marks) to their text selection.
+
+As always, the markup and styling is totally up to you. The menu is positioned absolute and requires a wrapper with `position: relative`, that’s basically the only requirement though.
 
 ## Installation
 ```bash
@@ -13,15 +15,17 @@ yarn add @tiptap/extension-bubble-menu
 ```
 
 ## Settings
-| Option       | Type          | Default   | Description                                               |
-| ------------ | ------------- | --------- | --------------------------------------------------------- |
-| element      | `HTMLElement` | `null`    | The DOM element of your menu.                             |
-| keepInBounds | `Boolean`     | `true`    | Specifies that the element is not rendered across bounds. |
+| Option       | Type          | Default | Description                                                          |
+| ------------ | ------------- | ------- | -------------------------------------------------------------------- |
+| element      | `HTMLElement` | `null`  | The DOM element that contains your menu.                             |
+| keepInBounds | `Boolean`     | `true`  | When enabled, it’s rendered inside the bounding box of the document. |
 
 ## Source code
 [packages/extension-bubble-menu/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bubble-menu/)
 
-## Using Vanilla JavaScript
+## Usage
+
+### JavaScript
 ```js
 import { Editor } from '@tiptap/core'
 import BubbleMenu from '@tiptap/extension-bubble-menu'
@@ -35,7 +39,7 @@ new Editor({
 })
 ```
 
-## Using a framework
+### Frameworks
 <demos :items="{
   Vue: 'Extensions/BubbleMenu/Vue',
   React: 'Extensions/BubbleMenu/React',

docs/src/docPages/examples/bubble-menu.md

@@ -0,0 +1,6 @@
+# Bubble menu
+
+<demos :items="{
+  Vue: 'Examples/BubbleMenu/Vue',
+  React: 'Examples/BubbleMenu/React',
+}" />

docs/src/docPages/examples/interactivity.md

@@ -1,4 +1,4 @@
-# Interactive node views
+# Interactivity
 
 Thanks to [node views](/guide/node-views) you can add interactivity to your nodes. If you can write it in JavaScript, you can add it to the editor.
 

docs/src/docPages/examples/minimal.md

@@ -1,3 +1,3 @@
-# Minimal
+# Minimal setup
 
 <demo name="Examples/Minimal" highlight="7-9,25-27" />

docs/src/docPages/examples/savvy.md

@@ -1,3 +1,3 @@
-# Savvy editor
+# A clever editor
 
 <demo name="Examples/Savvy" />

docs/src/docPages/examples/suggestions.md

@@ -1,4 +1,4 @@
-# Suggestions
+# Mentions
 
 <demos :items="{
   Vue: 'Examples/Community/Vue',

docs/src/docPages/examples/tasks.md

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

docs/src/docPages/examples/todo-app.md

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

docs/src/links.yaml

@@ -53,6 +53,9 @@
       # type: pro
     - title: Markdown shortcuts
       link: /examples/markdown-shortcuts
+    - title: Bubble menu
+      link: /examples/bubble-menu
+      type: new
     - title: Tables
       link: /examples/tables
       # type: pro
@@ -61,19 +64,19 @@
     - title: Formatting
       link: /examples/formatting
     - title: Tasks
-      link: /examples/todo-app
+      link: /examples/tasks
     - title: Long texts
       link: /examples/book
     - title: Drawing
       link: /examples/drawing
     - title: Mentions
-      link: /examples/community
+      link: /examples/suggestions
     - title: Minimal setup
       link: /examples/minimal
     - title: A clever editor
       link: /examples/savvy
     - title: Interactivity
-      link: /examples/interactive
+      link: /examples/interactivity
 
 - title: Guide
   items:
@@ -197,6 +200,7 @@
         #   type: draft
         - title: BubbleMenu
           link: /api/extensions/bubble-menu
+          type: new
         - title: CharacterCount
           link: /api/extensions/character-count
         - title: Collaboration