Add parameter in getHtml function to remove css classes

[thomasmfinalcad]

Discussed in #199

^{Originally posted by thomasmfinalcad March 27, 2024}
Hello @stevengharris,
I think it could be a good id to add a parameter into getHtml function to remove extra elements in html and only return html balises with content.
Morehover, when I try to convert the result into NSAttributedString and break line is added.

Actual

<ul>
    <li>
        <p class="editor-paragraph" dir="ltr">NO <u>SYjjjjjjjj<i>​hhryhhghgggjf</i></u></p>
    </li>
</ul>

Expected

<ul>
    <li>
        <p>NO <u>SYjjjjjjjj<i>​hhryhhghgggjf</i></u></p>
    </li>
</ul>

[stevengharris]

Hmm, this shouldn't be happening. The default getHtml should be stripping all that stuff out, with options that let you keep it in if it's useful.

[stevengharris]

Oh, I see, no, by default getHtml strips out things like style elements, etc, but it leaves in the attributes for all HTML elements if they exist. For example, for an image it might look like: <img src="steve.png" alt="Local image" class="resize-image" tabindex="-1" width="80" height="80">, and for a table header spanning columns, it might look like: <th colspan="2">. So maybe what would be useful would be, by default, to strip all the attributes for what I refer to as "styles" (sorry for the contrary terminology wrt css!): P, H1, H2, H3, H4, H5, and H6. I can also tell you that if you have some attributes in those elements, it probably will be lost on copy/paste anyway. I'm already stripping them off of any HTML you paste-in, so this would be consistent.

So, to summarize what I would do here: Change the default getHtml behavior to strip all attributes from P and H1-H6.

By way of detail, this would be part of the "clean" option in MU.getHTML, which is true by default, so for debugging or other purposes, they could be left in place:

MU.getHTML = function(pretty="true", clean="true", divID) {
    const prettyHTML = pretty === "true";
    const cleanHTML = clean === "true";
    const div = (divID) ? document.getElementById(divID) : MU.editor;
    if (!div) {
        MUError.NoDiv.callback();
        return "";
    }
    let editor, text;
    if (cleanHTML) {
        const template = document.createElement('template');
        template.innerHTML = div.innerHTML;
        editor = template.content;
        _cleanUpDivsWithin(editor);
        _cleanUpSpansWithin(editor);
        _cleanUpEmptyTextNodes(editor);
    } else {
        editor = div;
    };
    if (prettyHTML) {
        text = _allPrettyHTML(editor);
    } else {
        text = MU.editor.innerHTML;
        //text = _isFragment(editor) ? _fragmentString(editor) : editor.innerHTML;
    };
    return text;
};