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.

Sign up for GitHub

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(MenuBubble): MenuBubble doesn't update position when it resizes #239

Closed
wants to merge 2 commits into from
Closed

fix(MenuBubble): MenuBubble doesn't update position when it resizes #239

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
656e117
fix(MenuBubble): MenuBubble doesn't update position when it resizes
bvkimball Mar 18, 2019
ffbd1fb
fix duplicate sendUpdate calls removed
bvkimball Mar 18, 2019
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
51 changes: 36 additions & 15 deletions packages/tiptap/src/Plugins/MenuBubble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,24 @@ class Menu {
this.bottom = 0

this.editorView.dom.addEventListener('blur', this.hide.bind(this))
this.startObservingSize()
}

update(view, lastState) {
const { state } = view

// Don't do anything if the document/selection didn't change
if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
return
}
startObservingSize() {
if(window && window.ResizeObserver)
this.observer = new ResizeObserver(() => {
this.reposition(this.editorView)
this.sendUpdate()
})
this.observer.observe(this.options.element)
}

// Hide the tooltip if the selection is empty
if (state.selection.empty) {
this.hide()
return
}
stopObservingSize() {
this.observer && this.observer.unobserve(this.options.element)
}

reposition(view) {
const { state } = view
// Otherwise, reposition it and update its content
const { from, to } = state.selection

Expand All @@ -41,14 +43,32 @@ class Menu {

// 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)

this.isActive = true
const left = Math.max((start.left + end.left) / 2, start.left + 3, el.width / 2)
// console.log(`${left} - ${box.left} > ${el.width} / 2`, left - box.left, el.width / 2)
this.left = parseInt(left - box.left, 10)
this.bottom = parseInt(box.bottom - start.top, 10)
}

update(view, lastState) {
const { state } = view

// Don't do anything if the document/selection didn't change
if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
return
}

// Hide the tooltip if the selection is empty
if (state.selection.empty) {
this.hide()
return
}

this.reposition(view)
this.isActive = true

this.sendUpdate()
}
Expand All @@ -71,6 +91,7 @@ class Menu {
}

destroy() {
this.stopObservingSize()
this.editorView.dom.removeEventListener('blur', this.hide)
}

Expand Down