Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Menu bubble does not appear after adding styles

See original GitHub issue

Describe the bug I am trying to recreate the example from here (with the menu bubble)

It all seems to be working okay, apart from the fact that the menu bubble just appears above the RTE, like this:

So i found some styles here and included them at the bottom of my component

Now the bubble menu does not appear by deafult, but it also doesn’t appear after selecting some text

Please note that I have got no console errors, and no build errors. Also, I am using these type definitions:

https://gist.github.com/grindpride/bc1f9e8db202c681b6d35c1055627a42 https://gist.github.com/grindpride/ce8a7b7d94f8c8d797262dc278607682 https://gist.github.com/grindpride/e436290d359b6da878b320b8ebf33446

Steps to Reproduce / Codesandbox Example Steps to reproduce the behavior:

vue create test-project (use typescript)
Copy code below into th HelloWorld component

Expected behavior I am expecting the bubble menu to only appear after highlighting some text in the editor

Environment

OS: Windows 10
Browser: Chrome, Firefox
Mobile / Desktop: Desktop

Code

<template>
  <div class="editor">
      <editor-menu-bubble :editor="editor" 
                          :keep-in-bounds="keepInBounds" 
                          v-slot="{ commands, isActive, menu }">
        <div class="menububble"
            :class="{ 'is-active': menu.isActive }"
            :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
          <button class="menububble__button"
                  :class="{ 'is-active': isActive.bold() }"
                  @click="commands.bold">
            <icon name="bold" />
          </button>

          <button class="menububble__button"
                  :class="{ 'is-active': isActive.italic() }"
                  @click="commands.italic">
            <icon name="italic" />
          </button>

          <button class="menububble__button"
                  :class="{ 'is-active': isActive.code() }"
                  @click="commands.code">
            <icon name="code" />
          </button>
        </div>
      </editor-menu-bubble>

      <editor-content class="editor__content" :editor="editor" />
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Editor, EditorContent, EditorMenuBubble } from 'tiptap';
import { Bold, Italic, Code } from 'tiptap-extensions';

import Icon from './Icon.vue';

@Component({
  components: { 
    EditorContent,
    EditorMenuBubble,
    Icon
  }
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  editor: null | Editor = null;

  keepInBounds = true; 

  mounted() {
    this.editor = new Editor({
      content: '<p>This is just a boring paragraph.</p>',
      extensions: [
        new Bold(),
        new Italic(),
        new Code()]
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$color-black: #0000;
$color-white: #ffffff;

.menububble {
  position: absolute;
  display: flex;
  z-index: 20;
  background: $color-black;
  border-radius: 5px;
  padding: 0.3rem;
  margin-bottom: 0.5rem;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;

  &.is-active {
    opacity: 1;
    visibility: visible;
  }

  &__button {
    display: inline-flex;
    background: transparent;
    border: 0;
    color: $color-white;
    padding: 0.2rem 0.5rem;
    margin-right: 0.2rem;
    border-radius: 3px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      background-color: rgba($color-white, 0.1);
    }

    &.is-active {
      background-color: rgba($color-white, 0.2);
    }
  }

  &__form {
    display: flex;
    align-items: center;
  }

  &__input {
    font: inherit;
    border: none;
    background: transparent;
    color: $color-white;
  }
}
</style>