Full formatting cannot be configured in the Markdown element on the Modern page (version 2)

Hello!

I want to format the displayed “dynamic” element, consisting of a combination of fields from the current record on the Details page, using the Markdown frontend element. I am configuring this on the Modern Page (version 2) - in the example in the screenshot, I am displaying the values of the Order Name and Category fields (current record). However, I cannot use, for example, the H5 header format and Italic font at the same time. In this case, I only get one option - either Heading 5 or Italic.

If I apply this setting to static text, everything displays correctly.

Am I doing something wrong? How do I correctly configure the formatting combination in Markdown?

The problem can be reproduced on the page
https://a_8hwne7u84ho.v13.demo.nocobase.com/admin/gxpzwd86ai1/view/30a0353f123/filterbytk/346796233850880
As an addition, it would be nice to have the option to display text in a different color and highlight the background.

I noticed that there is a non-removable space between the formatting symbol (for example, “*” - one asterisk indicates italics) and the dynamic content itself, which should not be there.

image

In the case of static text, there is no such space (neither at the beginning nor at the end of the text), or it can be deleted. As I understand it, for the formatting function to work, there should be no spaces between the formatting symbols and the content on the right and left?

Could this be the problem?

1 Like

That space is the reason, just remove it.
As for the colors, you actually can use some HTML inside the Markdown field. Not sure if it’s a documented approach, but it works.

1 Like

The whole problem is that I can’t “physically” remove it :slightly_smiling_face:. It just won’t be removed (as if it were part of this “dynamic” expression), and this only happens with “dynamic expressions.” I can’t delete this space at the beginning - i.e., after the asterisk on the left (as in the screenshot above).

There are no problems with static text - I can easily delete the space manually.

I have indicated the page with the test platform where this problem occurs. You can try to remove this space by going to the Markdown settings.

https://a_8hwne7u84ho.v13.demo.nocobase.com/admin/gxpzwd86ai1/view/30a0353f123/filterbytk/346796233850880

I cannot access your demo platform as I don’t know the credentials. :slight_smile:
But I was not able to reproduce it in my NocoBase instance. The Markdown code is in the editor, so it’s possible to do anything with the text there - removing spaces, adding spaces, even writing of mustache parts manually…

image

At the beginning of this post, I mentioned that the formatting settings combine Heading 5 and Italics. This combination does not allow (at least for me) to remove this “extra” space.

image

Yes, if you do it separately, Heading or Italics, this format works. But I wanted to have a Heading (I need it for internal design tasks) and also for the text to be in Italics.

Since there is no option (at least for now) to adjust the font size (as can be done in the data field settings on the Classic page version 1), I chose Markdown, where I can adjust the font size by selecting one of the Headings (H1-H6).

Until the formatting functions are implemented in version 2 Modern, I have to “improvise” with the visual display of the content. :upside_down_face:

Of course, I can use another method to configure the visualization - using HTML tags:

<div style="color:#1ac456; text-align:right;"> {{ ctx.record.order_price }} {{ ctx.record.order_currency.currency_iso }}</div>

In that case, I won’t really need Markdown formatting tools, but I still really want to use NocoBase’s built-in features and tools so that I can do as much as possible no-code.

@ilyaB Thank you for your help and helpful advice!

Ah, yes, now I can see that. Definitely a bug of a Markdown editor.
But I was able to overcome it by adding a space between hashes and the first star.

1 Like