Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
aphalo opened this issue Jan 18, 2023 · 15 comments
Labels
Bug Edition/CE Enlighter Community Edition - the opensource version status/information-needed additional informations required to investigate the issue status/validated issue validated by the maintainer

Comments

@aphalo
Copy link

aphalo commented Jan 18, 2023

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.
image

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
Copy link
Author

aphalo commented Jan 18, 2023

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

@SuperBoss9
Copy link

SuperBoss9 commented Jan 18, 2023

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

@AndiDittrich
Copy link
Member

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 AndiDittrich added Bug status/validated issue validated by the maintainer Edition/CE Enlighter Community Edition - the opensource version status/information-needed additional informations required to investigate the issue and removed status/validation-pending labels Jan 18, 2023
@AndiDittrich
Copy link
Member

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

@SuperBoss9
Copy link

@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
Copy link
Member

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
Copy link
Author

aphalo commented Jan 18, 2023

@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
Copy link
Member

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
Copy link
Member

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

changing the compatibility modes takes longer

@ajtruckle
Copy link

I just upgraded to 4.6.1. Is there some easy way to identify where on my site I used inline code?Maybe with the Search field on my posts list? This way I can confirm it looks OK for you. I don't remember when I last used inline you see.

@SuperBoss9
Copy link

SuperBoss9 commented Jan 21, 2023 via email

@SuperBoss9
Copy link

I've just checked 4.6.1 with my notes. Inline code alone works pretty good. But if I have these fancy back-quotes (I don't know how to name them properly) inside a <pre> block - they also englighted. From my point of view this is a wrong behaviour. Nothing inside <pre> should be changed:

image

@ajtruckle
Copy link

I think I have inline code on here in two places and it seems OK:

https://www.publictalksoftware.co.uk/2018/05/s-89-slips-highlight-when-study-point-not-assigned/

@AndiDittrich
Copy link
Member

@SuperBoss9

in case your not using an Enlighter codeblock this is the expected behaviour of using markdown fenced codeblocks or shortcodes.

@SuperBoss9
Copy link

@SuperBoss9

in case your not using an Enlighter codeblock this is the expected behaviour of using markdown fenced codeblocks or shortcodes.

Then it works :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Edition/CE Enlighter Community Edition - the opensource version status/information-needed additional informations required to investigate the issue status/validated issue validated by the maintainer
Projects
None yet
Development

No branches or pull requests

4 participants