Not possible to inline Macro in Rich Text Editor

[jomehmet]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

10.3.2

Bug summary

I'm working for a bank where the use case is to have the current interest as variables in a text.
I've set up a Macro that renders a property of a selected Content node.

The problem is that we want the output rendered inside a sentence.

The macro plugin from Umbraco in tinymce inserts a placeholder for the macro in a div,
and since div is not allowed inside a p, tinymce splits the text into three elements spread on three lines.

Example Text output to the customer:
The current interest is 4.5% and will stay the whole year.

Wantet behaviour in the Rich Text Editor when inserting the macro:
The current interest is {MacoCurrentInterest} and will stay the whole year.

The current behaviour in the Rich Text Editor when the macro is inserted:
The current interest is
{MacoCurrentInterest}
and will stay the whole year.

Specifics

I propose a editor setting per. macro, as there are different need on different macros. See sketch:

Steps to reproduce

• Write a sentence
• Use the View Source Code button to see the sentence is inside one paragraph
• Add a macro somewhere in the sentence.
• Use the View Source Code button to see the sentence is split into two paragraps and one div. One paragraph with the part of the sentence before the macro, a div with the macro, and a second paragraph with the part of the sentence after the macro.

Expected result / actual result

As-is:
The sentence is now on three lines, split into
paragraph
macro
paragraph

Expected:
The sentence is on one line with just one paragraph with the macro markup inside it.

[kjac]

Hi @jomehmet - thank you for raising this 😄

As you have already gathered, macros are considered "blocks" of content at this point, which is why you see the surrounding text being split into two paragraphs around the inserted macro.

I will convert this feature request to a discussion, so we can have the community weigh in on it.

In the mean time I would encourage you to have a look at macro parameters. These are meant as editorial input to the macro rendering. In your case a "Text before" and a "Text after" parameter might do the trick.

[jomehmet]

Thanks for the workaround @kjac, it will let us use macros immediately.

When it comes to my suggestion, I still think its worth adding as it I think it's a low cost job that makes it more intuitiv for the content editors, and for all users/devs that can't figure out this workaround. I spent a lot of hours trying to configure tinymce away from this behaviour, and I hope we can save others from spending thier time on strugling with the same.

I'm adding an exmaple from the RTE where I changed the macro wrapper to span, and removed the extra paragraphs, I think it looks good just with that small adjustment.

[jomehmet]

I talked with the marketing department about your workaround @kjac and it turns out they need multiple macros in one paragraph, and in many cases the paragraphs are pretty long and needs rich text capabilities like linking and adding markup/styling.

So they will wait for the outcome of this discussion before we are taking this forward.

[jomehmet]

@kjac I created a PR for this and hope you can prioritize it as it has a big impact for the content editors in our organization, and hopefully for others as well 😊
#13628

[Nysosis]

I'm coming across essentially the same need, and I think there is value in it. However with #13628 I'm wondering would a more flexible approach be to instead of having a global setting across your entire installation for every macro, instead extend the editor properties (see image) on macros with an additional option so each macro can specify whether it renders itself as inline or block within the content?

[mikecp]

Hello @jomehmet ,

Thanks for raising this point. I see the usage of this possibility as well 😉

I had a look at your PR and I would agree with @Nysosis that changing the behavior for all macro's or none through an application settings will probably not be flexible enough to get into the core. I think it also means that, if you enable this for one specific macro, you will need to manually update the HTML to create back the necessary div's for all the other macro's that you might be using elsewhere, which could be quite tedious.

If I may ask you a question; on your first screenshot on top, your initial idea seemed to be the same as @Nysosis 's, being the fact to add an extra property on the macro editor's settings. So I was wondering what made you change the implementation from your initial plan? I see this is your first contribution, so if maybe you need some tips or info on how to get this extra property in there, the documentation or the forum might be your friend 😉

Cheers!

[jomehmet]

Thanks for the feedback @mikecp, the initial commit was about getting this up and running and see if there would be any responses to the PR. Adding per. Macros turned out to be a lot more complext than just having it in appsetting, but I have now updated the PR with this.

Nice to see others than me needing this @Nysosis 😊

What would be the next step to get this into the core?

[mikecp]

Hi @jomehmet ,
Thanks for the quick update 🎉
Myself or someone from the collaborators team will have a look in the coming days.

If it's all OK and we merge it to the v11/contrib branch, it will then "automatically" get into the core in the next version, currently 11.2.

Cheers!

[jomehmet]

That's great @mikecp, but could you also get this to Umbraco 10 since it is LTS, and as there is currently no simple way to upgrade from Umbraco 10 to 11 when you are on Umbraco Cloud.
https://docs.umbraco.com/umbraco-cloud/upgrades/major-upgrades

[mikecp]

Hi @jomehmet , cherry-picking this to V10 will be a decision of HQ. I cannot do it myself, but I'll raise the point 😉

[mikecp]

This has been merged into the V11 contrib branch via #13628