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

[mateo666]

When selecting multiline text with cmd+A and then pasting new text with cmd+V I get this error.

polyfills.js:6527 Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967295 is larger than the node's length (0). at Selection.getBounds (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/main.js:106585:19) at Selection.scrollIntoView (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/main.js:106719:25) at Quill.scrollIntoView (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/main.js:105074:22) at Quill.focus (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/main.js:104819:12) at Timeout.<anonymous> (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/main.js:112577:22) at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/polyfills.js:6756:35) at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.runTask (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/polyfills.js:6523:51) at push.../../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/polyfills.js:6838:38) at Timeout.ZoneTask.invoke (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/polyfills.js:6827:52) at Timeout.timer [as _onTimeout] (file:///Library/Application%20Support/Adobe/CEP/extensions/individeo_dev/main/polyfills.js:9369:33) at ontimeout (timers.js:469:11) at tryOnTimeout (timers.js:304:5) at Timer.listOnTimeout (timers.js:264:5)

Expected behavior:

text should replace actual text selection

Actual behavior:

I get error message

Platforms:

chrome "61.0.3163.91" Mac 10.14.6

Version:

"ngx-quill": "^11.0.0",
"@types/quill": "^1.3.10",
"quill": "^1.3.7",
"quill-mention": "^2.2.7",

[mateo666]

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

[Vac1911]

Having a similar problem after using editor.pasteHTML(html), then using a button in the toolbar.

quill.js:3192 Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967295 is larger than the node's length (115).
    at Selection.setNativeRange (http://localhost:8080/build/vendors~app.js:68979:17)
    at Selection.setRange (http://localhost:8080/build/vendors~app.js:69003:29)
    at Selection.focus (http://localhost:8080/build/vendors~app.js:68716:12)
    at Quill.focus (http://localhost:8080/build/vendors~app.js:67026:22)
    at HTMLButtonElement.<anonymous> (http://localhost:8080/build/vendors~app.js:75245:22)

[wuliupo]

+1

[ultravires]

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

[AlekseyMalakhov]

After quill.setContents(someContent) I get this error. And I'm not able to copy/past text there anymore.

[bhargavavarma]

We got the same error in sentry and tried to reproduced, but the error is not getting reproduced. For now It is getting reproduced only in mobiles.

Here are the breadcrumbs.

Versions

• Android Version - 11 & 6.0.1
• react-quill - 1.3.5
• @types/quill - 1.3.10
• quill - ^1.3.7

[yattias]

Had this issue. Was trying to focus on an editor in readonly mode

[ghost]

Get on vue2-editor 2.10.3 based on quilljs https://github.com/davidroyer/vue2-editor

Some hints to solve it?

[Hadrien-Estela]

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.

[JavierMonleonLopezMW]

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

`

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");

});

`

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

[Arahis]

Same error when using editor.setSelection

[jonaaldas]

Did you find a solution?

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.

Did you find the solution?

[eriknaslund]

I experienced the same issue. In my case I was using Phoenix LiveView and AlpineJS.

Initializing Quill in the init() (which is called automatically by AlpineJS) caused me to experience the exact same symptoms as @Hadrien-Estela did. Here's some pseudocode below to give you an idea of what I did to break Quill.

<div x-data="{editor: null, init() {this.editor = new Quill(...); this.editor.setContents([...]);}}">
     ...
</div>

The workaround for me was to new Quill(...) outside of the Alpine init(). So yeah, it seems like it's some kind of "timing issue", just like the others before me have suggested.

[paul-em]

For me the issue was, that I tried to use setContent with a plain object like { ops: [{inset: '\n'}] } instead of a Delta object new Delta({ ops: [{insert: '\n'}]}). Maybe this helps someone.

[mustafaekim]

Hello, as we transitioned from Vue2 to Vue3, we encountered a similar issue. The index begins at -1 when we set the initial content. I attempted to select the HTML element using document.getElementById, but this did not alter the outcome.

[mustafaekim]

Hi,

Below is the function that we call when the component is mounted. Actually, after this function is executed, the index is not -1 but 0 and there isn't any problem. The problem occurs after we "load" content into the editor. You can find the load function below as well.

  function initializeEditor() {
    if (quill.value) return;

    const editorEl = document.getElementById(editorUuid.value);
    if (!editorEl) return;

    quill.value = new QuillUtil.Block(editorEl, {

      modules: {
        history: {
          delay: 2500,
          userOnly: false
        },

        toolbar: {
          container: toolbarRef.value,
          handlers: {
            image: () => {
              cursor.value = getIndex();
              imageSelector.value.dialog = true;
              imageSelector.value.tab = 0;
              imageSelector.value.byImageDescriptor.uuid = "";
            },
            video: () => {
              cursor.value = getIndex();
              videoSelector.value.dialog = true;
            }
          }
        }
      },

      theme: "snow",
      readOnly: false
    });

    quill.value.root.setAttribute("spellcheck", "" + Boolean(props.spellcheck));
    quill.value.on("text-change", (newDelta: any, oldDelta: any, source: any) => {
      if (!quill.value) return;
      if (source === "user") {
        content.value.modal = quill.value.getContents();
        content.value.html = quill.value.root.innerHTML;
        if (validate()) {
          const updatedContent: RichContent = Object.assign(content.value, { modal: JSON.parse(JSON.stringify(content.value.modal)) });
          emit("update:model-value", updatedContent);
          console.log("inside validate - modal:  ", content.value.modal);
        } else console.log("May be next time");
      }
    });

    quill.value.on("selection-change", (range: { index: number; length: number }) => {
      if (!quill.value) return;
      if (range) {
        console.log(`While index is ${getIndex()}, selection at ${range.index} of ${range.length} length`);
        const blot = quill.value.getLeaf(range.index);
        console.log(blot);
        // console.log("Blot: ", blot, "Range: ", range);
      }
    });

    // setTimeout(() => {
    //   if (props.modelValue) load(props.modelValue);
    // }, 1);
  }


  function load(){
    if(!quill.value) return;
    quill.value.setText("", "silent");
    console.log(`Index: ${getIndex()}, Length: ${quill.value.getLength()}`)
  }

[mustafaekim]

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

[SCLisa]

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.

[Denyoze]

Got this with VueQuill when passed editor object as a prop to the child component (custom toolbar) and operate with formatting from it. For me solution was using of markRaw for editor object and then pass it as prop.

• "vue": "^3.4.15"
• "@vueup/vue-quill": "^1.2.0"

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide :pray: