search

sagemathinc / cocalc

CoCalc: Collaborative Calculation in the Cloud
https://CoCalc.com
Other
1.17k stars 216 forks source link

using GUI to add image, then center it in md editor produces invalid result #4257

Closed DrXyzzy closed 1 week ago

DrXyzzy commented 4 years ago

This is about centering a remote image in a .md file.

  1. Start with a URL to some image in the clipboard, for example: https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Proton_proton_cycle.svg/330px-Proton_proton_cycle.svg.png

  2. Open a .md file in the CoCalc editor.

  3. Click the image icon in the toolbar, paste the image URL into the "URL or Filename" field, and click Insert image.

  4. Select the img line that is created, then click the center-justify icon. You get the following in the "Code" pane, and the result is not rendered as a centered image in the "Rendered View" pane:

    <div align='center'>![](https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Proton_proton_cycle.svg/330px-Proton_proton_cycle.svg.png)</div>

  5. If you share the .md file on the Public server, the image does not render correctly there, either.

Workaround

The following works. Center, then add the image.

  1. Click the center-justify icon to create a div with align='center'.

  2. Put the cursor between open and close div tags

  3. Click the image icon and paste in the image URL as before. You get the following, which does render correctly in the CoCalc "Rendered View" as well as on the share server:

    <div align='center'><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Proton_proton_cycle.svg/330px-Proton_proton_cycle.svg.png'></div>

NOTE: The <div> align attribute is deprecated. Should we be using style="text-align:center" instead of align='center'?

williamstein commented 1 week ago

I don't think this is a problem we should or can solve. If anything, we might want to remove the "align center" functionality, since it's really not part of markdown.