[Bug report] Editor is blank till it is clicked

Describe the bug

I am using Cherry Markdown inside of a modal (created using Bootstrap) :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cherry-markdown@0.8.26/dist/cherry-markdown.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/cherry-markdown@0.8.26/dist/cherry-markdown.min.css" rel="stylesheet">

<div class="modal fade" id="someID" tabindex="-1" aria-labelledby="someID" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="someID">Title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="bodyID">
                    <form id="formID">
                        <div class="form-group mb-3">
                            <div id="markdown-reply-editor"></div>
                            <textarea class="form-control" rows="3" name="reply" id="textAreaID" required
                                hidden></textarea>
                        </div>
                        <button id="submitID" type="submit" class="btn btn-primary"
                            data-bs-dismiss="modal">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

var cherryReply = new Cherry({
            id: 'markdown-reply-editor',
            value: 'Your Reply Goes Here !',
            locale: 'en_US',
            toolbars: {
                theme: 'dark', // light or dark                                                                            
                toolbar: ['bold', 'italic', 'strikethrough', '|', 'code', 'quote', '|', 'header', 'list',
                    'togglePreview'
                ],
                bubble: ['bold', 'italic', 'strikethrough', 'sub', 'sup', '|',
                    'size'
                ], // array or false                 
                float: ['h1', 'h2', 'h3', '|', 'checklist', 'quote', 'quickTable',
                    'code'
                ], // array or false         
            },
            callback: {
                afterChange: function (value) {
                    console.log(value);
                    document.getElementById('textAreaID').value = value;
                }
            }
        });

Doing this opens the editor as a blank white area, with output only in the HTML Preview, when I click on the blank editor, the markdown appears in the editor, after the click. I suppose this is happening because the editor is not visible when the page loads, but this might also be some other issue.

This bug seems to not occur in versions v0.8.8 and below. The bug can be reproduced in versions v0.8.9 onwards until the recent version v0.8.25.

Reproduction

Use version >= v0.8.9

System Info

No response

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Help us

No, I don't want to do it now.

Reproduce the issue with Cherry Markdown v0.8.9 or later inside the provided Bootstrap modal example, then compare it with v0.8.8. Confirm that the initial markdown is visible before the editor is clicked; the fix is complete when the editor renders its content while the modal is opened.