ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: fix tippy for react

Browse Source
This commit is contained in:
Philipp Kühn
2021-04-16 11:34:37 +02:00
parent 3b5746a34c
commit 398fc7f210
2 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/extension-bubble-menu/src/bubble-menu-plugin.ts
View File

@@ -1,7 +1,7 @@
import { Editor, posToClientRect } from '@tiptap/core' import { Editor, posToClientRect } from '@tiptap/core'
import { EditorState, Plugin, PluginKey } from 'prosemirror-state' import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view' import { EditorView } from 'prosemirror-view'
import tippy from 'tippy.js' import tippy, { Instance } from 'tippy.js'
export interface BubbleMenuPluginProps { export interface BubbleMenuPluginProps {
editor: Editor, editor: Editor,
@@ -21,7 +21,7 @@ export class BubbleMenuView {
public preventHide = false public preventHide = false
public tippy: any = null public tippy!: Instance
constructor({ editor, element, view }: BubbleMenuViewProps) { constructor({ editor, element, view }: BubbleMenuViewProps) {
this.editor = editor this.editor = editor
@@ -61,10 +61,9 @@ export class BubbleMenuView {
} }
createTooltip() { createTooltip() {
this.tippy = tippy('body', { this.tippy = tippy(this.view.dom, {
duration: 0, duration: 0,
getReferenceClientRect: null, getReferenceClientRect: null,
appendTo: () => document.body,
content: this.element, content: this.element,
interactive: true, interactive: true,
trigger: 'manual', trigger: 'manual',
@@ -90,7 +89,7 @@ export class BubbleMenuView {
return return
} }
this.tippy[0].setProps({ this.tippy.setProps({
getReferenceClientRect: () => posToClientRect(view, from, to), getReferenceClientRect: () => posToClientRect(view, from, to),
}) })
@@ -98,15 +97,15 @@ export class BubbleMenuView {
} }
show() { show() {
this.tippy[0].show() this.tippy.show()
} }
hide() { hide() {
this.tippy[0].hide() this.tippy.hide()
} }
destroy() { destroy() {
this.tippy[0].destroy() this.tippy.destroy()
this.element.removeEventListener('mousedown', this.mousedownHandler) this.element.removeEventListener('mousedown', this.mousedownHandler)
this.editor.off('focus', this.focusHandler) this.editor.off('focus', this.focusHandler)
this.editor.off('blur', this.blurHandler) this.editor.off('blur', this.blurHandler)

22
packages/extension-floating-menu/src/floating-menu-plugin.ts
View File

@@ -1,7 +1,7 @@
import { Editor, isNodeEmpty, posToClientRect } from '@tiptap/core' import { Editor, isNodeEmpty, posToClientRect } from '@tiptap/core'
import { EditorState, Plugin, PluginKey } from 'prosemirror-state' import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view' import { EditorView } from 'prosemirror-view'
import tippy from 'tippy.js' import tippy, { Instance } from 'tippy.js'
export interface FloatingMenuPluginProps { export interface FloatingMenuPluginProps {
editor: Editor, editor: Editor,
@@ -21,15 +21,15 @@ export class FloatingMenuView {
public preventHide = false public preventHide = false
public tippy: any = null public tippy!: Instance
constructor({ editor, element, view }: FloatingMenuViewProps) { constructor({ editor, element, view }: FloatingMenuViewProps) {
this.editor = editor this.editor = editor
this.element = element this.element = element
this.view = view this.view = view
// this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true }) this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
// this.editor.on('focus', this.focusHandler) this.editor.on('focus', this.focusHandler)
// this.editor.on('blur', this.blurHandler) this.editor.on('blur', this.blurHandler)
this.createTooltip() this.createTooltip()
this.element.style.visibility = 'visible' this.element.style.visibility = 'visible'
} }
@@ -44,7 +44,6 @@ export class FloatingMenuView {
} }
blurHandler = ({ event }: { event: FocusEvent }) => { blurHandler = ({ event }: { event: FocusEvent }) => {
console.log('blur')
if (this.preventHide) { if (this.preventHide) {
this.preventHide = false this.preventHide = false
@@ -62,10 +61,9 @@ export class FloatingMenuView {
} }
createTooltip() { createTooltip() {
this.tippy = tippy('body', { this.tippy = tippy(this.view.dom, {
duration: 0, duration: 0,
getReferenceClientRect: null, getReferenceClientRect: null,
appendTo: () => document.body,
content: this.element, content: this.element,
interactive: true, interactive: true,
trigger: 'manual', trigger: 'manual',
@@ -100,7 +98,7 @@ export class FloatingMenuView {
return return
} }
this.tippy[0].setProps({ this.tippy.setProps({
getReferenceClientRect: () => posToClientRect(view, from, to), getReferenceClientRect: () => posToClientRect(view, from, to),
}) })
@@ -108,15 +106,15 @@ export class FloatingMenuView {
} }
show() { show() {
this.tippy[0].show() this.tippy.show()
} }
hide() { hide() {
this.tippy[0].hide() this.tippy.hide()
} }
destroy() { destroy() {
this.tippy[0].destroy() this.tippy.destroy()
this.element.removeEventListener('mousedown', this.mousedownHandler) this.element.removeEventListener('mousedown', this.mousedownHandler)
this.editor.off('focus', this.focusHandler) this.editor.off('focus', this.focusHandler)
this.editor.off('blur', this.blurHandler) this.editor.off('blur', this.blurHandler)