Allow fine-grained control of event handling for interactive option about vue-tippy HOT 4 CLOSED

I've found the solution to the issue I was encountering. As it turns out, the solution was available in the official documentation all along. The fix is to add contenteditable="false" to the elements outside of the node-view-content.

This attribute tells the browser that the content of the node-view-content should not be editable by the user. By adding this attribute, the issue with the cursor not moving up and down as expected has been resolved.

from vue-tippy.

instead of using interactive, u can use manual trigger https://vue-tippy.netlify.app/props#trigger or set hideOnClick to false

from vue-tippy.

Here's the part of my Vue component code where the issue is:

<template>
  <node-view-wrapper>
    <tippy
        ref="tippyInstance"
        arrow
        :hide-on-click="false"
        interactive
        placement = 'left'
        theme="sidebar-bubble-toolbar"
        :inertia="true"
    >
      <!-- ... -->

      <template #content>
        <tippy
            arrow
            interactive
            :hide-on-click="false"
            :inertia="true"
            placement = "left"
            theme="sidebar-bubble-toolbar"
            animation="shift-away"
            :duration="[450, 250]"
            :onMount = "handleHoverStart"
            :onUntrigger = "handleHoverEnd"
        >
          <!-- ... -->

          <template #content>
            <side-tool-bar
                v-show = "isHovered"
                :hide-button-list="['history','bold','italic','underline','strike']"
                 style="border: 0px solid blue;padding: 0;"
                 :editor="editor"
                 :posFrom="posFrom"
                 :nodeViewProps="props"
                 :categoryOrder="['heading','text-align','mark']"/>
          </template>
        </tippy>
      </template>
    </tippy>
  </node-view-wrapper>
</template>

This is a screenshot showing the behavior before modification:

I tried removing the interactive attribute from the first tippy component, and changed the trigger to 'mouseenter focus'. This is how it looks after the modification:

  <node-view-wrapper>
    <tippy
        ref="tippyInstance"
        arrow
        :hide-on-click="false"
        trigger="mouseenter focus"
        placement='left'
        theme="sidebar-bubble-toolbar"
        :inertia="true"
    >
    <!-- ... -->

However, after this change, the second Tippy tooltip doesn't show up when the cursor is moved to anymore.
This is a screenshot showing the behavior after modification:

I'm unsure of how to modify my code to achieve the desired behavior. Can you help?

The desired effect I am aiming for is that when the first tippy instance is visible, if the cursor in the corresponding line presses the down arrow key, it should ideally move to the nearest position on the next line, not to the end of the current line. Currently, it moves to the end of the current line, which is inconsistent with the expected behavior. However, when I remove the "interactive" property, the cursor in the corresponding line can move to the nearest position on the next line upon pressing the down arrow key, as expected.However, when I make this modification, the second tippy instance can no longer be displayed and interacted with, which is also not my expected outcome.

from vue-tippy.

Upon investigation, it seems the issue arises from the selectVertically function in prosemirror-view. This function seems to handle vertical cursor movement, but it doesn't consider tiptap's NodeView components that contain elements beyond node-view-content.

function selectVertically(view: EditorView, dir: number, mods: string) {
  let sel = view.state.selection
  if (sel instanceof TextSelection && !sel.empty || mods.indexOf("s") > -1) return false
  if (browser.mac && mods.indexOf("m") > -1) return false
  let {$from, $to} = sel

  if (!$from.parent.inlineContent || view.endOfTextblock(dir < 0 ? "up" : "down")) {
    let next = moveSelectionBlock(view.state, dir)
    if (next && (next instanceof NodeSelection))
      return apply(view, next)
  }
  if (!$from.parent.inlineContent) {
    let side = dir < 0 ? $from : $to
    let beyond = sel instanceof AllSelection ? Selection.near(side, dir) : Selection.findFrom(side, dir)
    return beyond ? apply(view, beyond) : false
  }
  return false
}

I believe this function is causing the issue because it does not accommodate for the structure of a NodeView that contains more than just the node-view-content.

from vue-tippy.