Newline required when using image in list #2427

New Issue

OVERLORD · 2026-02-05T04:06:49+03:00

OVERLORD commented

2026-02-05 04:06:49 +03:00

Originally created by @TobiasDeBruijn on GitHub (Oct 12, 2021).

Describe the bug
A clear and concise description of what the bug is.

When using an image in a list using the HTML <img> tag, a blank line after it is required to get the next level of indentation. If no blank line is provided, the indentation will not appear and itll render on the same line. See below for examples

Steps To Reproduce
Steps to reproduce the behavior:

Create a list
Put an image in the list
Add an indented level below the image
Observe

Expected behavior
A clear and concise description of what you expected to happen.
A new line is rendered

Screenshots
If applicable, add screenshots to help explain your problem.

- <img src="https://render.githubusercontent.com/render/math?math=Bar">
	- Foo

Produces:

With blank line

- <img src="https://render.githubusercontent.com/render/math?math=Bar">
	
    - Foo

produces:

This happens both in preview mode and the finals aved version.

Your Configuration (please complete the following information):

Exact BookStack Version (Found in settings): v21.08.5
PHP Version: PHP 7.4.24 (cli) (built: Sep 23 2021 21:24:59) ( NTS )
Hosting Method (Nginx/Apache/Docker): Docker
using the Docker image linuxserver/bookstack

Additional context
Add any other context about the problem here.
N.A.

Originally created by @TobiasDeBruijn on GitHub (Oct 12, 2021). **Describe the bug** A clear and concise description of what the bug is. When using an image in a list using the HTML `<img>` tag, a blank line after it is required to get the next level of indentation. If no blank line is provided, the indentation will not appear and itll render on the same line. See below for examples **Steps To Reproduce** Steps to reproduce the behavior: 1. Create a list 2. Put an image in the list 3. Add an indented level below the image 4. Observe **Expected behavior** A clear and concise description of what you expected to happen. A new line is rendered **Screenshots** If applicable, add screenshots to help explain your problem. ```md - <img src="https://render.githubusercontent.com/render/math?math=Bar"> - Foo ``` Produces: ![image](https://user-images.githubusercontent.com/28569170/136938812-ffe2200d-426d-4c83-853b-02c215f3241a.png) With blank line ```md - <img src="https://render.githubusercontent.com/render/math?math=Bar"> - Foo ``` produces: ![image](https://user-images.githubusercontent.com/28569170/136938886-c1f1c022-bbc8-4b8b-bfc8-5f02ea8103fa.png) This happens both in preview mode and the finals aved version. **Your Configuration (please complete the following information):** - Exact BookStack Version (Found in settings): `v21.08.5` - PHP Version: `PHP 7.4.24 (cli) (built: Sep 23 2021 21:24:59) ( NTS )` - Hosting Method (Nginx/Apache/Docker): Docker using the Docker image `linuxserver/bookstack` **Additional context** Add any other context about the problem here. N.A.

OVERLORD closed this issue

2026-02-05 04:06:51 +03:00

OVERLORD commented

2026-02-05 04:06:53 +03:00

@ssddanbrown commented on GitHub (Oct 12, 2021):

Hi @TheDutchMC,
For BookStack I generally adhere to comonmark as the standard for markdown.

The behaviour seems to be down to the use of a HTML element for inserting the image. I'm assuming HTML parsing is somewhat simplistic for performance, and hence the end of the HTML block can't be assumed until the blank line is encountered.

This behaviour aligns with commonmark's own site, as per this demo with a couple of the discussed cases here.

I'd only look to spend time changing something here if we're not adhering to commonmark, especially since markdown image syntax can just be used instead.

@ssddanbrown commented on GitHub (Oct 12, 2021): Hi @TheDutchMC, For BookStack I generally adhere to comonmark as the standard for markdown. The behaviour seems to be down to the use of a HTML element for inserting the image. I'm assuming HTML parsing is somewhat simplistic for performance, and hence the end of the HTML block can't be assumed until the blank line is encountered. This behaviour aligns with commonmark's own site, as per this demo with a [couple of the discussed cases here](https://spec.commonmark.org/dingus/?text=%23%23%23%20Original%20Case%0A%0A-%20%3Cimg%20src%3D%22https%3A%2F%2Frender.githubusercontent.com%2Frender%2Fmath%3Fmath%3DBar%22%3E%0A%20%20%20-%20Foo%0A%0A%23%23%23%20Markdown%20Image%20Syntax%20Instead%0A%0A-%20!%5B%5D(https%3A%2F%2Frender.githubusercontent.com%2Frender%2Fmath%3Fmath%3DBar)%0A%20%20-%20Foo%0A%0A%23%23%23%20Closed%20Image%20Tag%20(Sketchy%3F)%0A%0A-%20%3Cimg%20src%3D%22https%3A%2F%2Frender.githubusercontent.com%2Frender%2Fmath%3Fmath%3DBar%22%3E%3C%2Fimg%3E%0A%20%20%20-%20Foo%0A). I'd only look to spend time changing something here if we're not adhering to commonmark, especially since markdown image syntax can just be used instead.

OVERLORD commented

2026-02-05 04:07:00 +03:00

@TobiasDeBruijn commented on GitHub (Oct 13, 2021):

Oh that actually makes a lot of sense.

I'll switch to using commonmark syntax for images.

@TobiasDeBruijn commented on GitHub (Oct 13, 2021): Oh that actually makes a lot of sense. I'll switch to using commonmark syntax for images.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2427