Multiple tables are rendered in wrong order

Bugs
1

Issue Summary
I have more than 1 table in my article, in the ghost admin the article is correctly rendered , but in the site, all the tables are rendered where the last of them was inserted.

:exclamation:The error happens in the Source Theme v 1.2.1
In Headline theme the tables are rendered in the correct order

  • What did you expect to happen?
    The tables must be shown in the same order than I put them in the post editor.

Steps to Reproduce

This is the post text

image
image3104×1754 103 KB

I expect table 1 must be between paragraphs 2 and 3.
But in the preview and in the published article the table 1 renders after paragraph 4
image
image1608×1224 52 KB

I also used the md cards and I got the same result.

Setup information

Ghost Version
5.81.0

Node.js Version
Node Version 18.20.0

How did you install Ghost?
Self-hosting/docker image Ghost:5.81.0

Provide details of your host & operating system
Linux (ubuntu 20.04)

Database type
MySQL 8

Browser & OS version
Chrome 123.0.6312.59

Relevant log / error output
This is the html generated. It created a div class “gh-table” and inserted both tables and the html cards were commented.

            <p>Paragraph 1</p><p>Paragraph 2</p>
<!--kg-card-begin: html-->

<!--kg-card-end: html-->
<p>Paragraph 3</p><p>Paragraph 4</p>
<!--kg-card-begin: html-->
<div class="gh-table"><table>
    <thead>
        <tr>
            <th>table 1</th>
            <th>g</th>
            <th>r</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>2</td>
            <td>23</td>
        </tr>
    </tbody>
</table><table>
    <thead>
        <tr>
            <th>table 2</th>
            <th>g</th>
            <th>r</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>2</td>
            <td>23</td>
        </tr>
    </tbody>
</table></div>
<!--kg-card-end: html-->
<p>Paragraph 5</p>
        </section>```
2

It´s a Source theme v 1.2.1 bug.

The issue and a sololution has been reported here:
https://github.com/TryGhost/Source/issues/41

You have to change in the main.js the Responsive HTML table section

/* Responsive HTML table */
(function () {
    const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');

    tables.forEach(function (table) {
        const wrapper = document.createElement('div');
        wrapper.className = 'gh-table';
        table.parentNode.insertBefore(wrapper, table);
        wrapper.appendChild(table);
    });
})();
3

This issue has just been fixed in Source 1.2.2 which includes the proposed fix in the GitHub issue.

3 Likes