django-markdownx manually initialize with django-dinamic-formsets

[kuipumu]

Hi, Im using django-markdownx in a project in which I have a view of multiple markdown widgets inside modals, everytime I add a new form with django-dinamic formset I always call a function to initialize multiple fields like select2js, I saw an example inside the markdownx.js file that show a function called MardownX with this piece of comment::

/**
 * @example
 *
 *     let element = document.getElementsByClassName('markdownx');
 *
 *     new MarkdownX(
 *         element,
 *         element.querySelector('.markdownx-editor'),
 *         element.querySelector('.markdownx-preview')
 *     )
 *
 * @param {HTMLElement} parent - Markdown editor element.
 * @param {HTMLTextAreaElement} editor - Markdown editor element.
 * @param {HTMLElement} preview - Markdown preview element.
 */

I tried to manually execute that function to reinitialize all the mardown fields in the view, but I really don't see any way to initialize them, does anyone here has done this?, is there an easy way to do it with django-markdownx?.

Thank you very much.

[xenatisch]

Here is where Markdownx is initialised in by default.

What you're looking at is an example. It attempts to get all the elements with a specific class name (in this case markdownx), and the initialise a new MarkdownX object.

To initialise a new MarkdownX object, you must pass 3 input arguments to the constructor:

• The parent element, which itself must contain the next two arguments.
• The editor (textarea) whose text is to be transpiled from markdown.
• The element in which the transpiled markdown is to be display as HTML.

The follow code in JavaScript:

let elements = document.getElementsByClassName('markdownx');

Object.keys(ELEMENTS).map(key => {
        
        let element = ELEMENTS[key],
            editor  = element.querySelector('.markdownx-editor'),
            preview = element.querySelector('.markdownx-preview');
        
        // Only add the new MarkdownX instance to 
        // fields that have no MarkdownX instance yet.
        if ( !editor.hasAttribute('data-markdownx-init') ) {

                return new MarkdownX(element, editor, preview)

        }

});

is suitable for an HTML page that is structured as follows:

<div class="markdownx">

     <textarea class="markdownx-editor">

     <div class="markdownx-preview"></div>

</div>

and you can have as many of them as you want:

<section>

    <div class="markdownx" id="mdx-1">
    
         <textarea class="markdownx-editor">
    
         <div class="markdownx-preview"></div>
    
    </div>
    
    
    <div class="markdownx" id="mdx-2">
    
         <textarea class="markdownx-editor">
    
         <div class="markdownx-preview"></div>
    
    </div>

</section>

Hope this helps.

[kuipumu]

Hi @xenatisch, thank you very much for your response, excellent, tried something similar to from the documentation on Javascript. So I passed the let elements to the Objects key, but now I'm getting an error ReferenceError: MarkdownX is not defined. Not sure why, since all the other markdown editors on the view works, what can be wrong?, It's also needed to add an unique id to each editor?, Thank you.

[slippers]

MarkdownX object needs to be added as a window property to get that code to run? You can hack it into the js file but can it be added to the ts?

window.MarkdownX = MarkdownX;

I'm not a typescript expert. There is already a function called docReady that does this process. Could that functionality be moved into an window property. Instead of exposing the MarkdownX object?

Thank you