Displaying code in "Quotes" in bbPress Reply

ajtruckle commented 3 years ago

Hi

I hope you are well.

I noticed yesterday that when a user quoted me and my code yesterday it rendered funny in bbPress:

code

What is likely to be the cause of this? Seems funny seeing two sets of "line numbers" ...

Andy

AndiDittrich commented 3 years ago

Hi,

i'm not sure what's going on because the line-numbers of EnligterJS3/Enlighter4 are implemented as div containers. i would suggest to disable quoting within TinyMCE

ajtruckle commented 3 years ago

Hi

I am not prepared to switch off quoting within my editor since it is a useful feature and I personally rely on.

I examined the HTML source of those elements and they look like this:

<blockquote>
    <p>Also, we already include the Publisher Database data file on line 9:</p>
    <div class="enlighter-default enlighter-v-standard enlighter-t-trucklesoft enlighter-hover enlighter-linenumbers enlighter-overflow-scroll EnlighterJSRAW">
        <div class="enlighter">
            <div class="">
                <div class="enlighter-default enlighter-v-standard enlighter-t-trucklesoft enlighter-hover enlighter-linenumbers enlighter-overflow-scroll EnlighterJSRAW">
                    <div class="enlighter-toolbar-top enlighter-toolbar">
                        <div class="enlighter-btn enlighter-btn-raw" title="Plain text">
                        </div>
                        <div class="enlighter-btn enlighter-btn-copy" title="Copy to clipboard">
                        </div>
                        <div class="enlighter-btn enlighter-btn-window" title="Open code in new window">
                        </div>
                        <div class="enlighter-btn enlighter-btn-website" title="EnlighterJS 3 Syntax Highlighter">
                        </div>
                    </div>
                    <div class="enlighter" style="">
                        <div class="">
                            <div>
                                <span class="enlighter-g1">&lt;</span><span class="enlighter-text">xsl:variable 
                                name=</span><span class="enlighter-s0">"PubDB"</span><span class="enlighter-text"> 
                                select=</span><span class="enlighter-s0">"document('MSA_PublisherDatabase.XML')"</span><span class="enlighter-text">/</span><span class="enlighter-g1">&gt;</span></div>
                        </div>
                    </div>
                    <div class="enlighter-raw">
&lt;xsl:variable name="PubDB" select="document('MSA_PublisherDatabase.XML')"/&gt;</div>
                    <div class="enlighter-toolbar-bottom enlighter-toolbar">
                    </div>
                </div>
                <pre class="EnlighterJSRAW enlighter-origin">&lt;xsl:variable name="PubDB" select="document('MSA_PublisherDatabase.XML')"/&gt;</pre>
                <p><span style="font-size: 12pt">So you do not need the duplication 
                of this line further down your script.</span></p>
            </div>
        </div>
    </div>
</blockquote>

Does anything jump out at you?

AndiDittrich commented 3 years ago

no really, i would assume that's some kind of css issue because it works flawlessly within the dev env. check the blockquote styles an disable the related rulesets

ajtruckle commented 3 years ago

Interestingly, if I create a test topic in my public forum and then go to "Quote", I instantly see this:

Quote

When I inspect it:

<body id="tinymce" class="mce-content-body bbp_reply_content post-type-topic post-status-publish page-template-default locale-en-gb mceContentBody webkit wp-editor html5-captions" contenteditable="true" data-id="bbp_reply_content">

<p>[quote quote=8242]Test code:</p>
<div class="enlighter-default enlighter-v-standard enlighter-t-trucklesoft enlighter-hover enlighter-linenumbers enlighter-overflow-scroll EnlighterJSRAW">
    <div class="enlighter-toolbar-top enlighter-toolbar">
        <div class="enlighter-btn enlighter-btn-raw" title="Plain text">
            <br></div>
        <div class="enlighter-btn enlighter-btn-copy" title="Copy to clipboard">
            <br></div>
        <div class="enlighter-btn enlighter-btn-window" title="Open code in new window">
            <br></div>
        <div class="enlighter-btn enlighter-btn-website" title="EnlighterJS 3 Syntax Highlighter">
            <br></div>
    </div>
    <div class="enlighter">
        <div class="">
            <div>
                <span class="enlighter-text">This is some text</span></div>
        </div>
    </div>
    <div class="enlighter-raw">
        This is some text</div>
    <div class="enlighter-toolbar-bottom enlighter-toolbar">
        <br></div>
</div>
<pre class="EnlighterJSRAW enlighter-origin" data-enlighter-language="generic">This is some text</pre>
<p>[/quote]</p>

At first I thought that it looked odd but if I leave it as it is and hit submit:

Quote2

I don't know then. I can't reproduce his issue. Unless it is because I am an Admin.

That said, I think it looks funny that the code is being displayed before the code block when quoted (when composing the reply).

AndiDittrich commented 3 years ago

i'm not sure what your "quote plugin" (shortcode) does internally...the html above is invalid due to the quote shortcode. i would assume that's this kind of quoting is only designed to be used in regular text editor of bbpress and not with TinyMCE

ajtruckle commented 3 years ago

Fair point. Let me make some enquiries on the bbPress support forum and I will get back to you.

EnlighterJS / Plugin.TinyMCE

Displaying code in "Quotes" in bbPress Reply #14