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

[itinance]

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

[dolbex]

Just experienced the same here.

[BinarMorker]

Just started implementing the bubble menu and saw the same error. I was worried this was a major bug, but it doesn't seem to do anything except pollute the console.

[leadbro]

The same

[Duranom]

Noticed the same.
To avoid cluttering the console, or perhaps any error message showing in the user interface if you have a middleware configured, you can wrap the code in the setLinkUrl method in a try catch.
However you would need a watch this issue and a tracking in your repo for it so you don't forget.

[okydk]

Got the same issue, rolling back to version 1.30.0 seems to fix it for now.

[oezkancodes]

Got the same issue, rolling back to version 1.30.0 seems to fix it for now.

Doesn't fix it for me. Did you change anything else?

[dominik-bln]

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

[itinance]

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

@dominik-bln:
Error persists here at our side. Can you provide some more information pls or a working example, if present? Would be much appreciated!

[kevin-lynch]

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, } }

[fardiansyah-bioelite]

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

[benmandr]

Getting the same error after the bumping to latest versions of tiptap packages. Rolling back till fix is rolled out

[zvitek]

@benmandr please, which versions of tiptap packages do you use and don't have an problem?

[benmandr]

@benmandr please, which versions of tiptap packages do you use and don't have an problem?

tiptap@^1.31.0
tiptap-commands@^1.17.0
tiptap-extensions@^1.34.0

[itinance]

We had no luck with either version. Although we love the clear and modern interface of TipTap, we switched to TinyMCE because of this issue. But we'd love to come back soon :)

[kevin-lynch]

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

[zvitek]

@benmandr please, which versions of tiptap packages do you use and don't have an problem?

tiptap@^1.31.0
tiptap-commands@^1.17.0
tiptap-extensions@^1.34.0

Thank you. I have the same problem in these versions too. That's strange.

[benmandr]

@benmandr please, which versions of tiptap packages do you use and don't have an problem?

tiptap@^1.31.0
tiptap-commands@^1.17.0
tiptap-extensions@^1.34.0

Thank you. I have the same problem in these versions too. That's strange.

As mentioned by above posts, be sure to do a clean install after the downgrade - remove old node modules (just for the sake of it), run npm ci and only then test. Maybe even test a build version of your app to see if it is really not the cache after the downgrade.
I reproduced the issue on these versions after the downgrade too, but after clean install, everything worked like a charm

[jelle-eastground]

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.

[kevin-lynch]

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

[paulca]

Just to note you can actually see this in action on the main tiptap website: https://tiptap.dev/menu-bubble

[MarcelloTheArcane]

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:

tiptap/packages/tiptap/src/Plugins/MenuBubble.js

Lines 3 to 8 in 3b8ba27

	function textRange(node, from, to) {
	const range = document.createRange()
	range.setEnd(node, to == null ? node.nodeValue.length : to)
	range.setStart(node, from || 0)
	return range
	}

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!

[toxin20]

@MarcelloTheArcane Thanks, thats seems to fix it

[carloslema]

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

"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

[kevin-lynch]

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

"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.

[carloslema]

@kevin-lynch it works, Thank you!

[hanspagel]

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.

[zbysir]

Awesome! There is no BUG using the 1.32.2 version.

[jelle-eastground]

Thanks, no errors when using the latest version.

[carloslema]

Awesome, @hanspagel no error on my part using Titap 1.32.2