refactoring

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="position: relative">
     <div ref="menu">
       menu
     </div>

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

@@ -0,0 +1,238 @@
+import { Editor } from '@tiptap/core'
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+
+interface BubbleMenuSettings {
+  bottom: number;
+  isActive: boolean;
+  left: number;
+  top: number;
+}
+interface BubbleMenuPluginOptions {
+  editor: Editor;
+  element: HTMLElement;
+  keepInBounds: boolean;
+  onUpdate(menu: BubbleMenuSettings): void;
+}
+type DOMRectSide = 'bottom' | 'left' | 'right' | 'top';
+
+function textRange(node: Node, from?: number, to?: number) {
+  const range = document.createRange()
+  range.setEnd(
+    node,
+    typeof to === 'number' ? to : (node.nodeValue || '').length,
+  )
+  range.setStart(node, from || 0)
+  return range
+}
+
+function singleRect(object: Range | Element, bias: number) {
+  const rects = object.getClientRects()
+  return !rects.length
+    ? object.getBoundingClientRect()
+    : rects[bias < 0 ? 0 : rects.length - 1]
+}
+
+function coordsAtPos(view: EditorView, pos: number, end = false) {
+  const { node, offset } = view.domAtPos(pos) // view.docView.domFromPos(pos);
+  let side: DOMRectSide | null = null
+  let rect: DOMRect | null = null
+  if (node.nodeType === 3) {
+    const nodeValue = node.nodeValue || ''
+    if (end && offset < nodeValue.length) {
+      rect = singleRect(textRange(node, offset - 1, offset), -1)
+      side = 'right'
+    } else if (offset < 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 as Element),
+        -1,
+      )
+      side = 'left'
+    }
+    if ((!rect || rect.top === rect.bottom) && offset) {
+      const child = node.childNodes[offset - 1]
+      rect = singleRect(
+        child.nodeType === 3 ? textRange(child) : (child as Element),
+        1,
+      )
+      side = 'right'
+    }
+  } else {
+    const element = node as Element
+    rect = element.getBoundingClientRect()
+    side = 'left'
+  }
+
+  if (rect && side) {
+    const x = rect[side]
+
+    return {
+      top: rect.top,
+      bottom: rect.bottom,
+      left: x,
+      right: x,
+    }
+  }
+  return {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  }
+}
+
+class Menu {
+  public options: BubbleMenuPluginOptions;
+
+  public editorView: EditorView;
+
+  public isActive = false;
+
+  public left = 0;
+
+  public bottom = 0;
+
+  public top = 0;
+
+  public preventHide = false;
+
+  constructor({
+    options,
+    editorView,
+  }: {
+    options: BubbleMenuPluginOptions;
+    editorView: EditorView;
+  }) {
+    this.options = {
+      ...{
+        element: null,
+        keepInBounds: true,
+        onUpdate: () => false,
+      },
+      ...options,
+    }
+    this.editorView = editorView
+    this.options.element.addEventListener('mousedown', this.mousedownHandler, {
+      capture: true,
+    })
+    this.options.editor.on('focus', this.focusHandler)
+    this.options.editor.on('blur', this.blurHandler)
+  }
+
+  mousedownHandler = () => {
+    this.preventHide = true
+  };
+
+  focusHandler = () => {
+    this.update(this.options.editor.view)
+  };
+
+  blurHandler = ({ event }: { event: FocusEvent }) => {
+    if (this.preventHide) {
+      this.preventHide = false
+      return
+    }
+
+    this.hide(event)
+  };
+
+  update(view: EditorView, lastState?: EditorState) {
+    const { state } = view
+
+    if (view.composing) {
+      return
+    }
+
+    if (
+      lastState
+      && lastState.doc.eq(state.doc)
+      && lastState.selection.eq(state.selection)
+    ) {
+      return
+    }
+
+    if (state.selection.empty) {
+      this.hide()
+      return
+    }
+
+    const { from, to } = state.selection
+    const start = coordsAtPos(view, from)
+    const end = coordsAtPos(view, to, true)
+    const parent = this.options.element.offsetParent
+
+    if (!parent) {
+      this.hide()
+      return
+    }
+
+    const box = parent.getBoundingClientRect()
+    const el = this.options.element.getBoundingClientRect()
+    const left = (start.left + end.left) / 2 - box.left
+
+    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.top = Math.round(end.bottom - box.top)
+    this.isActive = true
+
+    console.log({
+      left: this.left,
+      top: this.top,
+    })
+
+    this.sendUpdate()
+  }
+
+  sendUpdate() {
+    this.options.onUpdate({
+      isActive: this.isActive,
+      left: this.left,
+      bottom: this.bottom,
+      top: this.top,
+    })
+  }
+
+  hide(event?: FocusEvent) {
+    if (
+      event
+      && event.relatedTarget
+      && this.options.element.parentNode
+      && this.options.element.parentNode.contains(event.relatedTarget as Node)
+    ) {
+      return
+    }
+
+    this.isActive = false
+    this.sendUpdate()
+  }
+
+  destroy() {
+    this.options.element.removeEventListener(
+      'mousedown',
+      this.mousedownHandler,
+    )
+    this.options.editor.off('focus', this.focusHandler)
+    this.options.editor.off('blur', this.blurHandler)
+  }
+}
+
+const BubbleMenuPlugin = (options: BubbleMenuPluginOptions) => {
+  return new Plugin({
+    key: new PluginKey('menu_bubble'),
+    view(editorView) {
+      return new Menu({ editorView, options })
+    },
+  })
+}
+
+export { BubbleMenuPlugin }

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

@@ -1,93 +1,15 @@
 import { Editor } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
 import { EditorView } from 'prosemirror-view'
+import { coordsAtPos } from './helpers'
 
-interface BubbleMenuSettings {
-  bottom: number;
-  isActive: boolean;
-  left: number;
-  top: number;
-}
 interface BubbleMenuPluginOptions {
   editor: Editor;
   element: HTMLElement;
   keepInBounds: boolean;
-  onUpdate(menu: BubbleMenuSettings): void;
-}
-type DOMRectSide = 'bottom' | 'left' | 'right' | 'top';
-
-function textRange(node: Node, from?: number, to?: number) {
-  const range = document.createRange()
-  range.setEnd(
-    node,
-    typeof to === 'number' ? to : (node.nodeValue || '').length,
-  )
-  range.setStart(node, from || 0)
-  return range
 }
 
-function singleRect(object: Range | Element, bias: number) {
+class BubbleMenuView {
-  const rects = object.getClientRects()
-  return !rects.length
-    ? object.getBoundingClientRect()
-    : rects[bias < 0 ? 0 : rects.length - 1]
-}
-
-function coordsAtPos(view: EditorView, pos: number, end = false) {
-  const { node, offset } = view.domAtPos(pos) // view.docView.domFromPos(pos);
-  let side: DOMRectSide | null = null
-  let rect: DOMRect | null = null
-  if (node.nodeType === 3) {
-    const nodeValue = node.nodeValue || ''
-    if (end && offset < nodeValue.length) {
-      rect = singleRect(textRange(node, offset - 1, offset), -1)
-      side = 'right'
-    } else if (offset < 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 as Element),
-        -1,
-      )
-      side = 'left'
-    }
-    if ((!rect || rect.top === rect.bottom) && offset) {
-      const child = node.childNodes[offset - 1]
-      rect = singleRect(
-        child.nodeType === 3 ? textRange(child) : (child as Element),
-        1,
-      )
-      side = 'right'
-    }
-  } else {
-    const element = node as Element
-    rect = element.getBoundingClientRect()
-    side = 'left'
-  }
-
-  if (rect && side) {
-    const x = rect[side]
-
-    return {
-      top: rect.top,
-      bottom: rect.bottom,
-      left: x,
-      right: x,
-    }
-  }
-  return {
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-  }
-}
-
-class Menu {
   public options: BubbleMenuPluginOptions;
 
   public editorView: EditorView;
@@ -113,99 +35,97 @@ class Menu {
       ...{
         element: null,
         keepInBounds: true,
-        onUpdate: () => false,
       },
       ...options,
     }
+
     this.editorView = editorView
-    this.options.element.addEventListener('mousedown', this.mousedownHandler, {
+
-      capture: true,
+    this.render()
-    })
+    // this.options.element.addEventListener('mousedown', this.mousedownHandler, {
-    this.options.editor.on('focus', this.focusHandler)
+    //   capture: true,
-    this.options.editor.on('blur', this.blurHandler)
+    // })
+    // this.options.editor.on('focus', this.focusHandler)
+    // this.options.editor.on('blur', this.blurHandler)
   }
 
-  mousedownHandler = () => {
+  // mousedownHandler = () => {
-    this.preventHide = true
+  //   this.preventHide = true
-  };
+  // };
 
-  focusHandler = () => {
+  // focusHandler = () => {
-    this.update(this.options.editor.view)
+  //   this.update(this.options.editor.view)
-  };
+  // };
 
-  blurHandler = ({ event }: { event: FocusEvent }) => {
+  // blurHandler = ({ event }: { event: FocusEvent }) => {
-    if (this.preventHide) {
+  //   if (this.preventHide) {
-      this.preventHide = false
+  //     this.preventHide = false
+  //     return
+  //   }
+
+  //   this.hide(event)
+  // };
+
+  update(view: EditorView, oldState?: EditorState) {
+    const { state, composing } = view
+    const { doc, selection } = state
+    const docHasChanged = !oldState?.doc.eq(doc)
+    const selectionHasChanged = !oldState?.selection.eq(selection)
+
+    if (composing || (!docHasChanged && !selectionHasChanged)) {
       return
     }
 
-    this.hide(event)
+    const { from, to, empty } = selection
-  };
 
-  update(view: EditorView, lastState?: EditorState) {
+    if (empty) {
-    const { state } = view
-
-    if (view.composing) {
-      return
-    }
-
-    if (
-      lastState
-      && lastState.doc.eq(state.doc)
-      && lastState.selection.eq(state.selection)
-    ) {
-      return
-    }
-
-    if (state.selection.empty) {
       this.hide()
+
       return
     }
 
-    const { from, to } = state.selection
     const start = coordsAtPos(view, from)
     const end = coordsAtPos(view, to, true)
     const parent = this.options.element.offsetParent
 
     if (!parent) {
       this.hide()
+
       return
     }
 
-    const box = parent.getBoundingClientRect()
+    const parentBox = parent.getBoundingClientRect()
-    const el = this.options.element.getBoundingClientRect()
+    const box = this.options.element.getBoundingClientRect()
-    const left = (start.left + end.left) / 2 - box.left
+    const left = (start.left + end.left) / 2 - parentBox.left
 
     this.left = Math.round(
       this.options.keepInBounds
-        ? Math.min(box.width - el.width / 2, Math.max(left, el.width / 2))
+        ? Math.min(parentBox.width - box.width / 2, Math.max(left, box.width / 2))
         : left,
     )
-    this.bottom = Math.round(box.bottom - start.top)
+    this.bottom = Math.round(parentBox.bottom - start.top)
-    this.top = Math.round(end.bottom - box.top)
+    this.top = Math.round(end.bottom - parentBox.top)
     this.isActive = true
 
-    console.log({
+    this.render()
-      left: this.left,
-      top: this.top,
-    })
-
-    this.sendUpdate()
   }
 
-  sendUpdate() {
+  render() {
-    this.options.onUpdate({
+    Object.assign(this.options.element.style, {
-      isActive: this.isActive,
+      position: 'absolute',
-      left: this.left,
+      zIndex: 1000,
-      bottom: this.bottom,
+      visibility: this.isActive ? 'visible' : 'hidden',
-      top: this.top,
+      opacity: this.isActive ? 1 : 0,
+      left: `${this.left}px`,
+      // top: `${this.top}px`,
+      bottom: `${this.bottom}px`,
+      transform: 'translateX(-50%)',
     })
   }
 
   hide(event?: FocusEvent) {
     if (
-      event
+      event?.relatedTarget
-      && event.relatedTarget
       && this.options.element.parentNode
       && this.options.element.parentNode.contains(event.relatedTarget as Node)
     ) {
@@ -213,16 +133,16 @@ class Menu {
     }
 
     this.isActive = false
-    this.sendUpdate()
+    this.render()
   }
 
   destroy() {
-    this.options.element.removeEventListener(
+    // this.options.element.removeEventListener(
-      'mousedown',
+    //   'mousedown',
-      this.mousedownHandler,
+    //   this.mousedownHandler,
-    )
+    // )
-    this.options.editor.off('focus', this.focusHandler)
+    // this.options.editor.off('focus', this.focusHandler)
-    this.options.editor.off('blur', this.blurHandler)
+    // this.options.editor.off('blur', this.blurHandler)
   }
 }
 
@@ -230,7 +150,7 @@ const BubbleMenuPlugin = (options: BubbleMenuPluginOptions) => {
   return new Plugin({
     key: new PluginKey('menu_bubble'),
     view(editorView) {
-      return new Menu({ editorView, options })
+      return new BubbleMenuView({ editorView, options })
     },
   })
 }

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

@@ -4,7 +4,6 @@ import { BubbleMenuPlugin } from './bubble-menu-plugin'
 export interface BubbleMenuOptions {
   element: HTMLElement,
   keepInBounds: boolean,
-  onUpdate: () => void,
 }
 
 export const BubbleMenu = Extension.create<BubbleMenuOptions>({
@@ -13,7 +12,6 @@ export const BubbleMenu = Extension.create<BubbleMenuOptions>({
   defaultOptions: {
     element: document.createElement('div'),
     keepInBounds: true,
-    onUpdate: () => ({}),
   },
 
   addProseMirrorPlugins() {
@@ -22,7 +20,6 @@ export const BubbleMenu = Extension.create<BubbleMenuOptions>({
         editor: this.editor,
         element: this.options.element,
         keepInBounds: this.options.keepInBounds,
-        onUpdate: this.options.onUpdate,
       }),
     ]
   },

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

@@ -0,0 +1,74 @@
+import { EditorView } from 'prosemirror-view'
+
+type DOMRectSide = 'bottom' | 'left' | 'right' | 'top';
+
+function textRange(node: Node, from?: number, to?: number) {
+  const range = document.createRange()
+  range.setEnd(
+    node,
+    typeof to === 'number' ? to : (node.nodeValue || '').length,
+  )
+  range.setStart(node, from || 0)
+  return range
+}
+
+function singleRect(object: Range | Element, bias: number) {
+  const rects = object.getClientRects()
+  return !rects.length
+    ? object.getBoundingClientRect()
+    : rects[bias < 0 ? 0 : rects.length - 1]
+}
+
+export function coordsAtPos(view: EditorView, pos: number, end = false) {
+  const { node, offset } = view.domAtPos(pos) // view.docView.domFromPos(pos);
+  let side: DOMRectSide | null = null
+  let rect: DOMRect | null = null
+  if (node.nodeType === 3) {
+    const nodeValue = node.nodeValue || ''
+    if (end && offset < nodeValue.length) {
+      rect = singleRect(textRange(node, offset - 1, offset), -1)
+      side = 'right'
+    } else if (offset < 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 as Element),
+        -1,
+      )
+      side = 'left'
+    }
+    if ((!rect || rect.top === rect.bottom) && offset) {
+      const child = node.childNodes[offset - 1]
+      rect = singleRect(
+        child.nodeType === 3 ? textRange(child) : (child as Element),
+        1,
+      )
+      side = 'right'
+    }
+  } else {
+    const element = node as Element
+    rect = element.getBoundingClientRect()
+    side = 'left'
+  }
+
+  if (rect && side) {
+    const x = rect[side]
+
+    return {
+      top: rect.top,
+      bottom: rect.bottom,
+      left: x,
+      right: x,
+    }
+  }
+  return {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  }
+}