range.js:194 addRange(): The given range isn't in document when calling 'insertImage'

[omuleanu]

I'm calling $('#id').summernote("insertImage", url);
from the console it works ok.

But when I call it from a button (button outside summernote container) click event handler, I'm getting this in the console:

range.js:194 addRange(): The given range isn't in document.
  | value | @ | range.js:194
-- | -- | -- | --
  | (anonymous) | @ | Editor.js:736
  | setTimeout (async) |   |  
  | (anonymous) | @ | async.js:39
  | load (async) |   |  
  | (anonymous) | @ | async.js:37
  | value | @ | async.js:34
  | value | @ | Context.js:238
  | summernote | @ | summernote.js:38
...

summernote.js line that starts this is:
return context.invoke.apply(context, lists.from(arguments));

and my current workaround is to call it in a setTimeout

setTimeout(function () {
    $('#id').summernote("insertImage", url);
});

using windows 10, chrome 121, summernote 0.8.18

[DennisSuitters]

Have you tried this from the latest source, it will require you building the project on your local machine?

Are there many people calling this from outside of Summernotes API though? I've not seen (or remember) other issues related to this specifically, though it could be something that could be useful.

[omuleanu]

@diemendesign I've cloned it, how do I build it ?
some node command in powershell ?

[DennisSuitters]

Did you fork the project, and then clone it to your local machine? (some people clone the main project, and try to push changes directly, which isn't the way to do it).
In the terminal use "yarn install", in the project folder, and let that install, it should install the necessary libraries. Once that's finished, use "yarn build", and let that run. Once that is done, there will be a new folder in the project called "dist/", the generated Summernote files are in there.

Instructions are also here: https://github.com/summernote/summernote/blob/develop/.github/CONTRIBUTING.md

[DennisSuitters]

I should add, (and probably add it to the instructions), if you're considering submitting PR's with changes, make a copy of the cloned repository, and do the changes, building, and testing there. When you're happy with your changes, then copy the changed files to the clone, then push your changes back to your fork from there, so you can then submit your PR from the fork. If you build the clone, you will also push the dist/ folder, which will have your PR rejected to be resubmitted without the dist/ folder.

[omuleanu]

@diemendesign if I reference the summernote.js from dist/ in my project, all of my document.ready scripts don't execute, and I'm not getting any errors in the console.
with
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script> everything works ok

[DennisSuitters]

Not sure what to tell you, I use a folder outside of the Summernote project that I use to test changes, using the <script/> to reference like you have, but I use it like:

<link rel="stylesheet" href="../summernote-test/dist/summernote-lite.css">
<script type="text/javascript" src="../summernote-test/dist/summernote-lite.js"></script>
$(document).ready(function() {
      $('.summernote').summernote();
}

[DennisSuitters]

Silly question, has jQuery also been included, and Bootstrap if your using one of those versions of Summernote?

[omuleanu]

@diemendesign yes jquery 3.6.0, bootstrap 3.4.1 and tried 4.0.0 also
this works:

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js">

but when I replace it with

<link href="~/summernote.css" />
<script src="~/summernote.js" />

my document.ready $(function(){ }) is not executing anymore.

[omuleanu]

doc.ready won't execute but if I call from the console:
$('#t1').summernote() I'll get warning in the console:

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See:

and the editor will look like this:

[DennisSuitters]

Is there anything else on the page, other than jQuery, Bootstrap (if you're using that), and Summernote, that could be interfering.

[omuleanu]

only my own custom js, no other libraries,
here's a small demo:
stest.zip
at least here the doc.ready works, but the editor is the same as in the picture above