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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 9
- Comments: 29 (2 by maintainers)
Commits related to this issue
- Constrain `from` to non-negative numbers Fix #954 — committed to MarcelloTheArcane/tiptap by MarcelloTheArcane 3 years ago
- Constrain `from` to non-negative numbers (#987) Fix #954 — committed to ueberdosis/tiptap by MarcelloTheArcane 3 years ago
It’s an overflow issue, because
Math.pow(2, 32) - 1 === 4294967295Looking at the traces quickly, it seems like this function triggers it every time
fromis-1:https://github.com/ueberdosis/tiptap/blob/3b8ba27cc8871a7b8949fc423a8335edf7f9c3c8/packages/tiptap/src/Plugins/MenuBubble.js#L3-L8
As -1 is truthy, I think you need to use
Math.max(from, 0)orfrom > 0 ? from : 0instead.This may be a red herring of course!
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.2version.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.
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.
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
@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.