quill: copy paste error : Failed to execute 'setStart' on 'Range': The offset 4294967295 is larger than the node's length (0).

I think I’ve found the problem. The quill should not be a reactive or ref but a simple variable.

Thank you so much, you just saved me a lot of time trying to solve this problem. We also encountered this error using Quill with Vue 3 (Options API) and storing the Quill Instance in a reactive variable for various content modifications. The error only occured after pasting content into the editor (no matter how long after it was initialized).

For anyone also having this problem, this is how I solved it: I removed everything where Vue might interfere and handled everything manually by

• Creating a uniqeId for the container in onCreated
• Not accessing the container via $refs but fetching and initializing it with document.querySelector(‘#uniqueId’)
• Not storing the Quill instance in a reactive variable but using Quill.find(document.querySelector(‘#uniqueId’)) every time we need to access the instance

Everything is working flawlessly now.

I have the same problem after instantiated a new editor and call setContents() with previous delta stored in database. When I want to add new line or edit the document start doing weird stuff and finally raise the error: Uncaught DOMException: Failed to execute ‘setStart’ on ‘Range’: The offset 4294967295 is larger than the node’s length.

I think I’ve found the problem. The quill should not be a reactive or ref but a simple variable.

When I quill.setContents([]), then input some text, finnally ⌫ one by one, I got it.

I was having the same problem whith Vue3 Composition API. The way I solved it is avoiding using Vue refs for handling the editor and instead catching the quill instance via id (as quill docs specify).

`<script setup lang="ts" > import { onMounted } from “vue”; import Quill from “quill”;

type Props = { payload: Delta }; const props = defineProps<Props>();

onMounted(() => { const options = your options

const container = document.getElementById(“container”); const editor = new Quill(container, options);

editor.setContents(props.payload, “api”);

}); </script> <template>

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" /> <div id="container"></div> </template>`

The con is you have to insert logic inside onMounted hook but this way you can avoid using the quill instance via a ref

found the problem

core/selection.js

else {
      range.setStart(node, offset - 1);
      range.setEnd(node, offset);
      side = 'right';
     }

need to check if offset if > 0 like this

else {
        if (offset > 0) {
          range.setStart(node, offset - 1);
        } else {
          range.setStart(node, offset);
        }
        range.setEnd(node, offset);
        side = 'right';
      }

pull request here https://github.com/quilljs/quill/pull/3081