image insert outside the editor when code is '<p></p><br> ' please help...

[KimDongUk93]

Checklist

• [X] I've looked at the documentation to make sure the behavior isn't documented and expected.
• [X] I'm sure this is an issue with Summernote, not with my app or other dependencies (Angular, Cordova, React, etc.).
• [X] I've searched through the current issues to make sure this hasn't been reported yet.
• [X] My issue is pertinent to this repository of Summernote (jQuery), or I was unable to have my issue resolved from the relevant version I'm using, such as Angular, dJango, Rails or React. Please try your issue at the relevent repository first.
• [X] I understand that issues without interaction for more than 14 days (2 weeks), may be closed at our discretion. We do this, as sometimes issues are abandoned. We may at our discretion, add issues to the relevant project to be looked at, or for maintainers to work through as time permits. This is to help keep issues relevant to the current version of Summernote, and to reduce clutter.
• [X] I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

https://summernote.org/

1. check codeview mode
2. write <p></p>{enter}<br>

   2 image

   

3. insert image using insert image button
4. image is outside the editor

   4 image

   

Expected behavior

image must be in .note-editable

Current behavior

image is not insert .note-editable

Minimal example reproducing the issue

No response

Environment

• Summernote version: latest
• Browser (with version): latest
• OS/Platform (with version): mac 12.5.1

[1der1]

Summernote and no other HTML tool ever generate the code <p></p><br>

However, there is generally a possibility that a picture insert happens outside of the editable area. There should be a test, and your given code is a simple, reproducible test case.

[DennisSuitters]

The content isn't added outside the editor, it's added outside of the editable area. Not sure why though, it's definitely something to investigate.

[1der1]

We added the following check to createFromSelection:

if(!$(sc).closest(".note-editable").length) {return null;}

[KimDongUk93]

Summernote and no other HTML tool ever generate the code <p></p><br>

However, there is generally a possibility that a picture insert happens outside of the editable area. There should be a test, and your given code is a simple, reproducible test case.

<p></p>
<br>
<img src=“…”>
<p></p>

here is my customer code

i think the reason of this error is p tag is duplicated isnt?

[1der1]

The p tag should have content.

[DennisSuitters]

@1der1 is correct, the <p/> being empty isn't helping the issue. You can have images outside of the paragraph tag, and ideally, within a <figure/> parent element, it's not paramount, but rather good practise, as it helps screen readers distinguish between different content elements for accessibility. Also, to note, some of the placement, or rather changing of placement, like auto closing tags, is handled via the Browser, more so than the Summernote API, which explains why we often have inconsistencies between behaviours depending on the Browser being used.