Port the bubble menu

docs/src/demos/Extensions/MenuBubble/index.spec.js

@@ -0,0 +1,7 @@
+context('/demos/Extensions/MenuBubble', () => {
+  before(() => {
+    cy.visit('/demos/Extensions/MenuBubble')
+  })
+
+  // cy.get('p').setSelection('established')
+})

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div ref="bubbleMenu">
+      <div 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().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+          strike
+        </button>
+        <button @click="editor.chain().focus().toggleCode().run()" :class="{ 'is-active': editor.isActive('code') }">
+          code
+        </button>
+      </div>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import MenuBubble from '@tiptap/extension-menu-bubble'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    const { bubbleMenu } = this.$refs
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        Document,
+        Paragraph,
+        Text,
+        MenuBubble.configure({
+          menuEl: bubbleMenu,
+          xOffset: 0,
+          yOffset: -36,
+        }),
+      ],
+      content: `
+        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

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

@@ -0,0 +1,27 @@
+# Menu Bubble
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-menu-bubble.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-menu-bubble)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-menu-bubble.svg)](https://npmcharts.com/compare/@tiptap/extension-menu-bubble?minimal=true)
+
+This extension will make a contextual menu appear near a selection of text.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-menu-bubble
+
+# with Yarn
+yarn add @tiptap/extension-menu-bubble
+```
+
+## Settings
+| Option   | Type          | Default   | Description                                                           |
+| ---------| ------------- | --------- | --------------------------------------------------------------------- |
+| menuEl   | `HTMLElement` | `null`    | $ref to html element containing menu options.                         |
+| xOffset  | `Number`      | `0`       | Positive or negative number to offset horizontal alignment.           |
+| yOffset  | `Number`      | `0`       | Positive or negative number to offset vertical alignment.             |
+
+## Source code
+[packages/extension-menu-bubble/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-menu-bubble/)
+
+## Usage
+<demo name="Extensions/MenuBubble" />

docs/src/links.yaml

@@ -202,6 +202,8 @@
           link: /api/extensions/gapcursor
         - title: History
           link: /api/extensions/history
+        - title: MenuBubble
+          link: /api/extensions/menu-bubble
         - title: TextAlign
           link: /api/extensions/text-align
         - title: Typography

packages/extension-menu-bubble/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/extension-menu-bubble/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-menu-bubble
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-menu-bubble.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-menu-bubble)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-menu-bubble.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-menu-bubble.svg)](https://www.npmjs.com/package/@tiptap/extension-menu-bubble)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Offical Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md).

packages/extension-menu-bubble/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@tiptap/extension-menu-bubble",
+  "description": "menu (bubble) extension for tiptap",
+  "version": "2.0.0-beta.1",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-menu-bubble.cjs.js",
+  "umd": "dist/tiptap-extension-menu-bubble.umd.js",
+  "module": "dist/tiptap-extension-menu-bubble.esm.js",
+  "unpkg": "dist/tiptap-extension-menu-bubble.bundle.umd.min.js",
+  "types": "dist/packages/extension-menu-bubble/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.1"
+  },
+  "dependencies": {
+    "prosemirror-state": "^1.3.4"
+  }
+}

packages/extension-menu-bubble/src/index.ts

@@ -0,0 +1,5 @@
+import { MenuBubble } from './menu-bubble'
+
+export * from './menu-bubble'
+
+export default MenuBubble

packages/extension-menu-bubble/src/menu-bubble.ts

@@ -0,0 +1,80 @@
+import {
+  Extension,
+} from '@tiptap/core'
+
+export interface MenuBubbleOptions {
+  menuEl: HTMLElement | null,
+  xOffset: number,
+  yOffset: number,
+  isActive: boolean,
+  keepInBounds: boolean,
+}
+
+function hide(options: MenuBubbleOptions) {
+  if (!options.menuEl) {
+    return
+  }
+
+  const attrs = {
+    position: 'absolute',
+    left: '-100000px',
+  }
+
+  options.isActive = false
+  Object.assign(options.menuEl.style, attrs)
+}
+
+export const MenuBubble = Extension.create<MenuBubbleOptions>({
+  name: 'menuBubble',
+
+  defaultOptions: {
+    menuEl: null,
+    xOffset: 0,
+    yOffset: -36,
+    isActive: false,
+    keepInBounds: true,
+  },
+
+  onCreate() {
+    hide(this.options)
+  },
+
+  onSelectionUpdate() {
+    const { editor, options } = this
+    const { from, to } = editor.state.selection
+
+    if (editor.state.selection.empty) {
+      hide(options)
+      return
+    }
+
+    const start = editor.view.coordsAtPos(from)
+    const end = editor.view.coordsAtPos(to)
+
+    if (!options.menuEl) {
+      return
+    }
+
+    const parent = options.menuEl ? options.menuEl.offsetParent : null
+
+    if (!parent) {
+      hide(options)
+      return
+    }
+
+    const box = parent.getBoundingClientRect()
+    const el = options.menuEl.getBoundingClientRect()
+    const left = (start.left + end.left) / 2 - options.menuEl.offsetWidth / 2
+
+    const attrs = {
+      position: 'absolute',
+      zIndex: 1000,
+      display: 'block',
+      left: `${options.xOffset + left}px`,
+      top: `${options.yOffset + start.top}px`,
+    }
+
+    options.isActive = true
+    Object.assign(options.menuEl.style, attrs)
+  },
+})