tiptap: MenuBubble: Error in v-on handler: "IndexSizeError: Failed to execute 'setStart' on 'Range'

Describe the bug

using the editor-menu-bubble for adding a Link will result in the following error:

Error in v-on handler: "IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 4294967295 is larger than the node's length (16)."

Steps to Reproduce / Codesandbox Example

Browser: Chrome (Google Chrome, Vivaldi):

      <div
        class="menububble"
        :class="{ 'is-active': menu.isActive }"
        :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
      >

        <form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
          <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
          <button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
            <icon name="remove" />
          </button>
        </form>

        <template v-else>
          <button
            class="menububble__button"
            @click="showLinkMenu(getMarkAttrs('link'))"
            :class="{ 'is-active': isActive.link() }"
          >
            <span>{{ isActive.link() ? 'Update Link' : 'Add Link'}}</span>
            <icon name="link" />
          </button>
        </template>

      </div>
    </editor-menu-bubble>

Screenshots

Screen Shot 2021-01-25 at 12 56 36

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 9
  • Comments: 29 (2 by maintainers)

Commits related to this issue

Most upvoted comments

It’s an overflow issue, because Math.pow(2, 32) - 1 === 4294967295

Looking at the traces quickly, it seems like this function triggers it every time from is -1:

https://github.com/ueberdosis/tiptap/blob/3b8ba27cc8871a7b8949fc423a8335edf7f9c3c8/packages/tiptap/src/Plugins/MenuBubble.js#L3-L8

image

As -1 is truthy, I think you need to use Math.max(from, 0) or from > 0 ? from : 0 instead.

This may be a red herring of course!

Same problem here using these versions:

tiptap: 1.32.1 tiptap-commands: 1.17.1 tiptap-extensions: 1.35.1

The link is inserted correctly though.

If you downgrade to the following build versions and ensure you recompile all of your assets post downgrade, it should solve the issue.

tiptap @1.31.0 tiptap-extensions@1.34.0

Awesome! There is no BUG using the 1.32.2 version.

Sorry for the long wait. Merged the PR, thanks @MarcelloTheArcane! And thanks for all others helping out with reports und debugging! I’ll release a new version of tiptap probably tomorrow.

This happens if you preload content and initialise the editor within the ‘mounted’ method. To fix this I initialise the editor within the data object.

data() { return { contentString: '', editor: new Editor({ extensions: [ new Heading({ levels: [1, 2, 3] }), new Link(), new Bold(), new Italic(), new History(), ], content: this.propDataContent, onUpdate: ({ getJSON, getHTML }) => { this.$parent[this.method](getHTML()) }, }), linkUrl: null, linkMenuIsActive: false, } }

Thanks, no errors when using the latest version.

I am getting a similar type of error, in my case is an IndexSizeError.

TipTap IndexError

“tiptap”: “^1.32.1”, “tiptap-commands”: “^1.17.1”, “tiptap-extensions”: “^1.35.1”,

In looking at the https://tiptap.dev/menu-bubble, it triggers the same error.

Component: 
editor: new Editor({
        extensions: [new Blockquote(), ...],
        content: this.propValue,
        onUpdate: ({getHTML}) =>{
          console.log('onUpdate', this.method);
          this.$parent[this.method](getHTML())
          this.$emit("onUpdate", getHTML());
        }
      }),

After selecting a word or range of words, I click on any of the formatting choices in EditorMenuBubble — it triggers the IndexSizeError, it updates the DOM, but, it does not trigger the onUpdate Method.

I updated the tiptap/packages/tiptap/src/Plugins/MenuBubble.js textRange method as per @MarcelloTheArcane comment above — but in this case, it didn’t solve the problem.

  // range.setStart(node, from || 0)
  range.setStart(node, from > 0 ? from : 0 )

Any help would be greatly appreciated. \ carlos

Unfortunately there’s no solution currently in place for version 1.32.1. In order to resolver this you’ll need to downgrade as per my suggestion.

This happens if you preload content and initialise the editor within the ‘mounted’ method. To fix this I initialise the editor within the data object. data() { return { contentString: '', editor: new Editor({ extensions: [ new Heading({ levels: [1, 2, 3] }), new Link(), new Bold(), new Italic(), new History(), ], content: this.propDataContent, onUpdate: ({ getJSON, getHTML }) => { this.$parent[this.method](getHTML()) }, }), linkUrl: null, linkMenuIsActive: false, } }

@kevin-lynch do you use editor-menu-bubble ? error still persist on my side when using editor-menu-bubble

After further testing, the issue was still present. I downgraded to following versions, recompiled my build and the issue was no longer present. tiptap @1.31.0 tiptap-extensions@1.34.0

This happens if you preload content and initialise the editor within the ‘mounted’ method. To fix this I initialise the editor within the data object.

data() { return { contentString: '', editor: new Editor({ extensions: [ new Heading({ levels: [1, 2, 3] }), new Link(), new Bold(), new Italic(), new History(), ], content: this.propDataContent, onUpdate: ({ getJSON, getHTML }) => { this.$parent[this.method](getHTML()) }, }), linkUrl: null, linkMenuIsActive: false, } }

@kevin-lynch do you use editor-menu-bubble ? error still persist on my side when using editor-menu-bubble

For us tiptap@v1.31.0 with tiptap-extensions@v1.34.0 seems to work without the error.