Inline code after latest update inserts newlines before and after the inline code.

[aphalo]

Describe the bug
Inline code after latest update inserts newlines before and after the inline code.

See https://www.r4photobiology.info/2023/01/ggspectra-0-3-10/

WordPress Editing Mode
Which WordPress editing mode you're using ?
Advanced Editor Tools (previously TinyMCE Advanced)
Should be irrelevant, as preexisting pages in the whole site were broken. I haven't edited anything since the automatic plugin update.

Frontend or Backend Issue
frontend: page rendering

To Reproduce
Steps to reproduce the behavior:
See for example https://www.r4photobiology.info/2023/01/ggspectra-0-3-10/ and almost every other post at https://www.r4photobiology.info

Expected behavior
Inline code to the displayed in line.

Screenshots
If applicable, add screenshots to help explain your problem.

This should be a single paragraph with no line breaks.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] PC
• OS: [e.g. iOS8.1] Win 10
• Browser Firefox 109.0; Microsoft Edge 109.0.1518.55 (Official build) (64-bit)
• Version Enlighter plugin 4.6.0
• WordPress 6.1.1 running Nirvana theme.

Additional context

Plugin configuration

{
    "translation-enabled": true,
    "enlighterjs-init": "inline",
    "enlighterjs-assets-js": true,
    "enlighterjs-assets-themes": true,
    "enlighterjs-assets-themes-external": true,
    "enlighterjs-selector-block": "pre.EnlighterJSRAW",
    "enlighterjs-selector-inline": "code.EnlighterJSRAW",
    "enlighterjs-indent": 2,
    "enlighterjs-ampersandcleanup": true,
    "enlighterjs-linehover": true,
    "enlighterjs-rawcodedbclick": false,
    "enlighterjs-textoverflow": "scroll",
    "enlighterjs-linenumbers": true,
    "enlighterjs-theme": "eclipse",
    "enlighterjs-retaincss": false,
    "enlighterjs-language": "r",
    "toolbar-visibility": "default",
    "toolbar-button-raw": true,
    "toolbar-button-copy": true,
    "toolbar-button-window": true,
    "toolbar-button-enlighterjs": true,
    "tinymce-backend": true,
    "tinymce-frontend": false,
    "tinymce-formats": true,
    "tinymce-autowidth": false,
    "tinymce-tabindentation": false,
    "tinymce-keyboardshortcuts": true,
    "tinymce-font": "sourcecodepro",
    "tinymce-fontsize": "0.7em",
    "tinymce-lineheight": "1.4em",
    "tinymce-color": "#000000",
    "tinymce-bgcolor": "#f9f9f9",
    "gutenberg-backend": true,
    "quicktag-backend": true,
    "quicktag-frontend": false,
    "quicktag-mode": "html",
    "shortcode-mode": "disabled",
    "shortcode-inline": true,
    "shortcode-type-generic": true,
    "shortcode-type-language": true,
    "shortcode-type-group": false,
    "shortcode-filter-content": true,
    "shortcode-filter-excerpt": true,
    "shortcode-filter-widget": false,
    "shortcode-filter-comment": false,
    "shortcode-filter-commentexcerpt": false,
    "gfm-enabled": true,
    "gfm-inline": true,
    "gfm-language": "generic",
    "gfm-filter-content": true,
    "gfm-filter-excerpt": true,
    "gfm-filter-widget": true,
    "gfm-filter-comment": true,
    "gfm-filter-commentexcerpt": true,
    "compat-enabled": true,
    "compat-crayon": false,
    "compat-codecolorer": false,
    "compat-type1": true,
    "compat-type2": false,
    "compat-filter-content": true,
    "compat-filter-excerpt": true,
    "compat-filter-widget": false,
    "compat-filter-comment": false,
    "compat-filter-commentexcerpt": false,
    "cache-custom": false,
    "cache-path": "",
    "cache-url": "",
    "dynamic-resource-invocation": true,
    "ext-infinite-scroll": false,
    "jetpack-gfm-code": false,
    "ext-ajaxcomplete": false,
    "bbpress-shortcode": false,
    "bbpress-markdown": false
}

Custom theme configuration

/*@BASETHEME:enlighter*/

.enlighter-t-wpcustom{
	border-radius: 8px;
	border: solid 1px #e0e0e0;
	background-color: #eoeoeo;
}
.enlighter-t-wpcustom .enlighter-btn{
	border-radius: 3px;
	padding: 0;
	border: 1px solid #e0e0e0;
	margin: 0 0 0 8px;
	text-decoration: none;
	width: 23px;
	height: 23px;
	background-position: 0 0;
	background-size: contain;
}
.enlighter-t-wpcustom .enlighter-btn:hover{
	border-color: #c9c9c9;
}
.enlighter-t-wpcustom .enlighter-btn:after{
	content: '';
}
.enlighter-t-wpcustom.enlighter-hover.enlighter-linenumbers div.enlighter>div:hover{
	color: #444;
	background-color: #fffcd3;
}
.enlighter-t-wpcustom.enlighter-hover div.enlighter>div:hover{
	color: #444;
}
.enlighter-t-wpcustom .enlighter-raw{
	border-radius: 8px;
	padding: 0 5px 0 60px;
}
.enlighter-t-wpcustom div.enlighter>div{
	border: solid 0 #fff;
	line-height: 1.35em;
	color: #aaa;
}
.enlighter-t-wpcustom div.enlighter>div:FIRST-CHILD{
	border-radius: 8px 8px 0 0;
}
.enlighter-t-wpcustom div.enlighter>div:LAST-CHILD{
	border-radius: 0 0 8px 8px;
}
.enlighter-t-wpcustom div.enlighter>div.enlighter-special{
}
.enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div::before{
	border-right: solid 1px #e0e0e0;
}
.enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div:FIRST-CHILD::before{
	border-radius: 8px 0 0 0;
}
.enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div:LAST-CHILD::before{
	border-radius: 0 0 0 8px;
}
.enlighter-t-wpcustom .enlighter-text{
	color: #000;
}
.enlighter-t-wpcustom .enlighter-c0{
}
.enlighter-t-wpcustom .enlighter-c1{
}
.enlighter-t-wpcustom .enlighter-c2{
}
.enlighter-t-wpcustom .enlighter-c9{
}
.enlighter-t-wpcustom .enlighter-k0{
}
.enlighter-t-wpcustom .enlighter-k1{
}
.enlighter-t-wpcustom .enlighter-k2{
}
.enlighter-t-wpcustom .enlighter-k3{
}
.enlighter-t-wpcustom .enlighter-k4{
}
.enlighter-t-wpcustom .enlighter-k5{
}
.enlighter-t-wpcustom .enlighter-k6{
}
.enlighter-t-wpcustom .enlighter-k7{
}
.enlighter-t-wpcustom .enlighter-k8{
}
.enlighter-t-wpcustom .enlighter-k9{
}
.enlighter-t-wpcustom .enlighter-k10{
}
.enlighter-t-wpcustom .enlighter-k11{
}
.enlighter-t-wpcustom .enlighter-e0{
}
.enlighter-t-wpcustom .enlighter-e1{
}
.enlighter-t-wpcustom .enlighter-e2{
}
.enlighter-t-wpcustom .enlighter-e3{
}
.enlighter-t-wpcustom .enlighter-e4{
}
.enlighter-t-wpcustom .enlighter-s0{
}
.enlighter-t-wpcustom .enlighter-s1{
}
.enlighter-t-wpcustom .enlighter-s2{
}
.enlighter-t-wpcustom .enlighter-s3{
}
.enlighter-t-wpcustom .enlighter-s4{
}
.enlighter-t-wpcustom .enlighter-s5{
}
.enlighter-t-wpcustom .enlighter-n0{
}
.enlighter-t-wpcustom .enlighter-n1{
}
.enlighter-t-wpcustom .enlighter-n2{
}
.enlighter-t-wpcustom .enlighter-n3{
}
.enlighter-t-wpcustom .enlighter-n4{
}
.enlighter-t-wpcustom .enlighter-n5{
	text-decoration: underline;
}
.enlighter-t-wpcustom .enlighter-m0{
}
.enlighter-t-wpcustom .enlighter-m1{
}
.enlighter-t-wpcustom .enlighter-m2{
}
.enlighter-t-wpcustom .enlighter-m3{
}
.enlighter-t-wpcustom .enlighter-g0{
}
.enlighter-t-wpcustom .enlighter-g1{
}
.enlighter-t-wpcustom .enlighter-t0{
}
.enlighter-t-wpcustom .enlighter-t1{
}
.enlighter-t-wpcustom .enlighter-t2{
}
.enlighter-t-wpcustom .enlighter-t3{
}
.enlighter-t-wpcustom .enlighter-t4{
}
.enlighter-t-wpcustom .enlighter-t5{
}
.enlighter-t-wpcustom .enlighter-t6{
}
.enlighter-t-wpcustom .enlighter-t7{
}
.enlighter-t-wpcustom .enlighter-t8{
}
.enlighter-t-wpcustom .enlighter-x1{
}
.enlighter-t-wpcustom .enlighter-x2{
}
.enlighter-t-wpcustom .enlighter-x10{
}
.enlighter-t-wpcustom .enlighter-x11{
}
.enlighter-t-wpcustom .enlighter-x12{
	text-decoration: underline;
}
.enlighter-t-wpcustom .enlighter-x13{
}
.enlighter-t-wpcustom .enlighter-x14{
}
.enlighter-t-wpcustom .enlighter-x15{
}
.enlighter-t-wpcustom.enlighter-v-inline{
	border-radius: 3px;
	background-color: #fafafa;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter,.enlighter-t-enlighter.enlighter-v-codegroup .enlighter-raw{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter div:first-child{
	border-radius: 0;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-wrapper{
	position: relative;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch{
	border-radius: 8px 8px 0 0;
	background-color: #f9f9f9;
	border-bottom: 1px solid #e0e0e0;
	padding: 5px 5px 5px 45px;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn{
	padding: 3px 10px 3px 10px;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	width: auto;
}
.enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active{
	background-color: #e5e5e5;
	color: #000;
	border-color: #c9c9c9;
}
.enlighter-t-wpcustom .enlighter span{
	background-color: #eoeoeo;
}
.enlighter-t-wpcustom div.enlighter>div.enlighter-special:hover{
}
.enlighter-t-wpcustom .enlighter-x16{
}

[aphalo]

I also check with the Twenty-Twenty-Three theme and the problem persists.

[SuperBoss9]

Have the same behaviour on the fresh installed plugin. 'this text' arose closing the paragraph </p> or adding two paragraph tags <p></p>

[AndiDittrich]

thanks for your reports! it's a side effect of a required bugfix regarding the wpautop filter and the internal "placeholder" workaround to keep the code immutable. your html code is changed by wpauto and not Enlighter :(

Generally this issue only affects the compatibility mode, inline shortcodes and markdown style inline blocks - you can easily downgrade to v4.5.0 or revert the following commit: 6ed5d71

This commit adds a "pre" wrapper tag around the placeholders, which allows wpautop to recognize the content as pre-codeblock. And yes this causes your issues because now a "block" element is assumed by wpautop.

Technically the solution will take some time because it doesn't make sense to revert the commit which previously breaks all block codeblocks (much more needed..) within the mentioned modes. I've to "split" all filters for specific block+inline wrappers.

Gutenberg and TinyMCE should work as expected.

sry guys

[AndiDittrich]

@aphalo @SuperBoss9 can you confirm that only the mentioned editing modes are affected ?

[SuperBoss9]

@aphalo @SuperBoss9 can you confirm that only the mentioned editing modes are affected ?

I didn't manage to find other issues with the inline code. Is it possible to add something like a feature that will change this type of quotes to something like <code>this type of tags</code>? That may be a solution.

[AndiDittrich]

it much more complicated under the hood... technically the filters are extracting the codeblocks with a low wp_filter priority and restoring the content (converted to EnlighterJS codeblocks) with a high wp_filter priority. the extraction (placeholders are inserted) needs to be modified to detect inline content and wrap the placeholders selectively in code/pre tags temporarily to avoid wpautop issues.

in previous versions (without a pre wrapper) all codeblocks were assumed as inline by wpautop - therefore you didn't experienced any issues but the markup was broken in case of block content

[aphalo]

@AndiDittrich I am not sure how the editor in use matters in this, except when writing a new post or page. At the moment this bug affects a couple of hundred existing posts in my website from the last several years. The html includes the backquotes as & scapes, as I made sure my settings would stop the editor from converting backquotes into <code> </code> fences so as to let Enlighter do the highlighting. For the time being, I deactivated Enlighter and will think how to proceed. I can live with this. I am not using Guthember or blocks at all, at least not explicitly. I guess, I should downgrade to the previous version unril you have the time to correct the problem. I had not even noticed that a problem existed with blocks... Thanks, for the great plugin!

[AndiDittrich]

see #351 for details why the "legacy" compatibility modes have changed.

you can easily force the old (invalid) behaviour by reverting the commit mentioned above (replace one file)

[AndiDittrich]

da0d8ea should fix the issue for gfm(markdown) and shortcodes - maybe someone give it a try

changing the compatibility modes takes longer