Table editor breaks embedded images

Contribute Bug
,

AI-generated summary

The table editor in Discourse breaks embedded images when the | character in the alt text is escaped with a \. This issue is described in detail by lindsey, who provides steps to reproduce and expected results.

A fix has been submitted by Lhc_fl in the form of a PR (https://github.com/discourse/discourse/pull/27726), which prevents the \ from being dropped when editing a table. However, images that were previously broken due to unescaping will still need to be manually repaired.

Lhc_fl clarifies that no escaping is required when editing a table after the fix is applied. However, Jagster points out that the issue of needing to escape pipe-marks is still present, which may be a barrier for users who are not familiar with markdown syntax.

1

:information_source: Overview

Currently, you can embed images in tables if you escape any | in the alt text with a \ (e.g., ![image\|100x100]). However, if you open the table editor, the \ is dropped and the image is broken.

:walking_woman: Steps to reproduce

  1. In a post, create a table and insert an image, escaping the | in the alt text with an \.

  2. Save the post. The image should render properly in the table.

  3. Click the pencil icon to open the table editor. You can see at this point that the / has been dropped from the image alt text.
    CleanShot 2024-07-03 at 13.10.22

  4. Click Save.

:white_check_mark: Expected results

The image should display as expected. The \ should not be dropped from the image alt text upon opening the table editor.

:x: Observed results

The \ is dropped from the alt text and the image is broken.

:books: Additional context

:movie_camera: Recording:

6 Likes
3

I submitted a PR to fix this :slightly_smiling_face:

https://github.com/discourse/discourse/pull/27726

2 Likes
4

Does is fix breaking images when editing a table or need to escape pipe?

5

It cannot automatically repair images that have been damaged in the past due to unescaping. You have to fix them manually.

No escaping is required when editing a table.

These three images show the table editor, the generated Markdown, and the final rendering.

image
image1041×273 8.14 KB

image
image735×157 6.89 KB

image
image632×229 20.4 KB

1 Like
6

I’m more like a future oriented guy :joy: My users are very ordinary common people using mobiles. Just guiding them how to make a simple table was an awful task, because — sorry — markdown is far away user friendly. But let’s not discuss about that topic, but it is a reason why I never teached how to use images in tables. Escaping as a concept is totally unfamiliar, even scary, to them and if I tell them there is another thing among quite many they just must remember… well, it is better simple say they can’t use images.

But if I understood right that fixed editing issue, but need to escape pipe-marks is still there.

1 Like
7

This topic was automatically closed after 3 days. New replies are no longer allowed.