Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Menu bubble position #228

Merged
merged 4 commits into from
Apr 30, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion examples/Components/Routes/MenuBubble/index.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="editor">
<editor-menu-bubble :editor="editor">
<editor-menu-bubble :editor="editor" :keepInBounds="keepInBounds">
<div
slot-scope="{ commands, isActive, menu }"
class="menububble"
Expand Down Expand Up @@ -69,6 +69,7 @@ export default {
},
data() {
return {
keepInBounds: true,
editor: new Editor({
extensions: [
new Blockquote(),
Expand Down
5 changes: 5 additions & 0 deletions packages/tiptap/src/Components/EditorMenuBubble.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ export default {
default: null,
type: Object,
},
keepInBounds: {
default: true,
type: Boolean,
},
},

data() {
Expand All @@ -27,6 +31,7 @@ export default {
this.$nextTick(() => {
editor.registerPlugin(MenuBubble({
element: this.$el,
keepInBounds: this.keepInBounds,
onUpdate: menu => {
// the second check ensures event is fired only once
if (menu.isActive && this.menu.isActive === false) {
Expand Down
67 changes: 62 additions & 5 deletions packages/tiptap/src/Plugins/MenuBubble.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,63 @@
import { Plugin } from 'prosemirror-state'

function textRange(node, from, to) {
const range = document.createRange()
range.setEnd(node, to == null ? node.nodeValue.length : to)
range.setStart(node, from || 0)
return range
}

function singleRect(object, bias) {
const rects = object.getClientRects()
return !rects.length ? object.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1]
}

function coordsAtPos(view, pos, end = false) {
const { node, offset } = view.docView.domFromPos(pos)
let side
let rect
if (node.nodeType === 3) {
if (end && offset < node.nodeValue.length) {
rect = singleRect(textRange(node, offset - 1, offset), -1)
side = 'right'
} else if (offset < node.nodeValue.length) {
rect = singleRect(textRange(node, offset, offset + 1), -1)
side = 'left'
}
} else if (node.firstChild) {
if (offset < node.childNodes.length) {
const child = node.childNodes[offset]
rect = singleRect(child.nodeType === 3 ? textRange(child) : child, -1)
side = 'left'
}
if ((!rect || rect.top === rect.bottom) && offset) {
const child = node.childNodes[offset - 1]
rect = singleRect(child.nodeType === 3 ? textRange(child) : child, 1)
side = 'right'
}
} else {
rect = node.getBoundingClientRect()
side = 'left'
}

const x = rect[side]

return {
top: rect.top,
bottom: rect.bottom,
left: x,
right: x,
}
}


class Menu {

constructor({ options, editorView }) {
this.options = {
...{
element: null,
keepInBounds: true,
onUpdate: () => false,
},
...options,
Expand Down Expand Up @@ -36,19 +88,24 @@ class Menu {
const { from, to } = state.selection

// These are in screen coordinates
const start = view.coordsAtPos(from)
const end = view.coordsAtPos(to)
// We can't use EditorView.cordsAtPos here because it can't handle linebreaks correctly
// See: https://github.com/ProseMirror/prosemirror-view/pull/47
const start = coordsAtPos(view, from)
const end = coordsAtPos(view, to, true)

// The box in which the tooltip is positioned, to use as base
const box = this.options.element.offsetParent.getBoundingClientRect()
const el = this.options.element.getBoundingClientRect()

// Find a center-ish x position from the selection endpoints (when
// crossing lines, end may be more to the left)
const left = Math.max((start.left + end.left) / 2, start.left + 3)
const left = ((start.left + end.left) / 2) - box.left

// Keep the menuBubble in the bounding box of the offsetParent i
this.left = Math.round(this.options.keepInBounds
? Math.min(box.width - (el.width / 2), Math.max(left, el.width / 2)) : left)
this.bottom = Math.round(box.bottom - start.top)
this.isActive = true
this.left = parseInt(left - box.left, 10)
this.bottom = parseInt(box.bottom - start.top, 10)

this.sendUpdate()
}
Expand Down