TextformatterRockDown

[bernhard]

TextformatterRockDown

ProcessWire Textformatter for simple mardown-like text formatting ideal for headlines:

*bold*
_italic_
~strike~
```monospace```
#monospace#

This module does intentionally not support full markdown syntax! It is intended to be used for simple formattings that you usually want to apply to headlines.

Problem

The title field is always available in ProcessWire and it is often used for page headlines. But unfortunately when using such a plain textfield it will not be possible to print some words in bold or italic font.

One solution is to create a CKEditor/TinyMCE field, but it's a lot more tedious to setup. Also it's not easy to make it single-line-only.

Solution

Just apply this textformatter to your field and you'll get quick and easy headlines with bold and italic fonts that will also work with frontend editing.

Backend Editing:

Frontend Editing:

Formatted:

Custom tags

You can add custom replacements easily via hook in /site/ready.php

$wire->addHookAfter("TextformatterRockDown::replace", function ($event) {
  $str = $event->arguments(0);
  $start = $event->arguments(1);
  $end = $event->arguments(2);
  $str = preg_replace("/$start@(.*?)@$end/", "$1<span style=\"color:red;\">$2</span>$3", $str);
  $event->return = $str;
});

Download

https://github.com/baumrock/TextformatterRockDown

https://processwire.com/modules/textformatter-rock-down/

[wbmnfktr]

Yet again curious but how does this differ to the Markdown/Parsedown Extra textformatter?

[bernhard]

If you have a link for me I can answer your question ? 

[wbmnfktr]

It's in the core.

 

[bernhard]

Thx - that's why I found no link and no docs ? 

The main difference that I see: I can point my clients to the readme of my module and it is instantly clear what it does: https://github.com/baumrock/TextformatterRockWhatsApp

Markdown/Parsedown: I don't know exactly what it does and I did not find it with a quick research. Seems to be the same for you (as you where asking)? But I guess they are very similar.

Also my module is super simple and does not need any other libraries. Easy to understand. Easy to maintain.

It looks as if the core module supports lists and headlines. I don't want that in my markup as it's intended to be used for quick and easy headline styling and not for richtext.

Maybe that's the main difference ? 

Thx for the question, didn't know about that core module!

[wbmnfktr]

I know what Markdown/Parsedown do and how the core module works.

I used it before in the exact same way as you describe it but as the title field is often a fallback for the page title and in other places the additional markup didn't play out that well - at least with the title field in my case.

But in other simple fields it's nice to have this option. Adding links was nice. The markup was easier to add for non-tech people than the whole anchor tag.

That's why I was asking. As I thought it would do things in a totally different or another way.

 

16 minutes ago, bernhard said:

I can point my clients to the readme of my module and it is instantly clear what it does

I can see your point here.

 

 

[bernhard]

36 minutes ago, wbmnfktr said:

Adding links was nice. The markup was easier to add for non-tech people than the whole anchor tag.

36 minutes ago, wbmnfktr said:

I know what Markdown/Parsedown do and how the core module works.

I don't and I didn't find any docs. Could you please let me know? Does that mean you can insert links with the core module? I don't want that in headlines ? 

36 minutes ago, wbmnfktr said:

but as the title field is often a fallback for the page title and in other places the additional markup didn't play out that well

Yeah I've used another field today so I don't have this problem but I thought a simple strip_tags should be enough, no?

[Stefanowitsch]

Interesting. I have those "Headlines with bold/italic Text inside" in nearly all projects.

I used to solve this by using a CKEditor for the Headline. Which is a bit over the top for a single headline that can (and should?) be handled in a text field:

How does the formatted text element look inside the HTML code? Does your module apply the <i></i> or <b></b> tags dynamically?

Is it possible to define custom formatting options for example a colored word inside a headline phrase (see screenshot).

Last but not least: I never used a Textformatter before. How and where do I apply the Formatter to my field?

 

[wbmnfktr]

12 minutes ago, bernhard said:

I don't and I didn't find any docs. Could you please let me know?

It's markdown... so: https://www.markdownguide.org/cheat-sheet/

12 minutes ago, bernhard said:

Does that mean you can insert links with the core module? I don't want that in headlines

You could by using: [title](https://www.example.com)
Sometimes there was the need for a link... I didn't like it but the client paid for it.

13 minutes ago, bernhard said:

Yeah I've used another field today so I don't have this problem but I thought a simple strip_tags should be enough, no?

This would probably work out as expected. Still I didn't like it in the title field therefore took other fields and tried other approaches.

 

5 minutes ago, Stefanowitsch said:

Last but not least: I never used a Textformatter before. How and where do I apply the Formatter to my field?

[bernhard]

@Stefanowitsch yeah that's what I often did as well. I just stripped down all the options of CKE to only show the bold button. But that's a lot of work for a very simple and common need. That's why I finally built the formatter ? 

4 minutes ago, Stefanowitsch said:

How does the formatted text element look inside the HTML code? Does your module apply the <i></i> or <b></b> tags dynamically?

Yes, it's a simple preg_replace that finds *bold* and replaces it with <strong>bold</strong>

    $start = "(^| )"; // allowed start
    $end = "($|\W)"; // allowed ending whitespace
    $str = preg_replace("/$start\*(.*?)\*$end/", "$1<strong>$2</strong>$3", $str);
    $str = preg_replace("/$start\_(.*?)_$end/", "$1<em>$2</em>$3", $str);
    $str = preg_replace("/$start~(.*?)~$end/", "$1<s>$2</s>$3", $str);
    $str = preg_replace("/$start```(.*?)```$end/", "$1<tt>$2</tt>$3", $str);
    $str = preg_replace("/$start#(.*?)#$end/", "$1<tt>$2</tt>$3", $str);

 

5 minutes ago, Stefanowitsch said:

Is it possible to define custom formatting options for example a colored word inside a headline phrase (see screenshot).

You can do that with CSS, or am I missing something?

[bernhard]

6 minutes ago, wbmnfktr said:

It's markdown... so: https://www.markdownguide.org/cheat-sheet/

Ok finally we understand each other I guess ? I didn't want a markdown textformatter - I wanted a WhatsApp style formatter. I knew that we have markdown support in PW (https://processwire.com/api/ref/sanitizer/entities-markdown/) even though I forgot about the markdown textformatter. But fullblown markdown support is not what I want for headlines ? From your question I thought that the "markdown" extra was some kind of special markdown formatter that did the same as my module...

6 minutes ago, wbmnfktr said:

This would probably work out as expected. Still I didn't like it in the title field therefore took other fields and tried other approaches.

Yeah it depends on the project I guess. I think I'll also not use the title field and use a headline field instead. So I can use the title field in menus and the headline field for page titles. Still strip_tags or https://processwire.com/api/ref/sanitizer/textarea/ will be handy.

[Stefanowitsch]

25 minutes ago, bernhard said:

Yes, it's a simple preg_replace that finds *bold* and replaces it with <strong>bold</strong>

    $start = "(^| )"; // allowed start
    $end = "($|\W)"; // allowed ending whitespace
    $str = preg_replace("/$start\*(.*?)\*$end/", "$1<strong>$2</strong>$3", $str);
    $str = preg_replace("/$start\_(.*?)_$end/", "$1<em>$2</em>$3", $str);
    $str = preg_replace("/$start~(.*?)~$end/", "$1<s>$2</s>$3", $str);
    $str = preg_replace("/$start```(.*?)```$end/", "$1<tt>$2</tt>$3", $str);
    $str = preg_replace("/$start#(.*?)#$end/", "$1<tt>$2</tt>$3", $str);

You can do that with CSS, or am I missing something?

Yeah thats what I needed to know. I look for a way to insert a simple <span> around a word or phrase inside the headline. I can then style this <span> like I want (color, different font, etc.)

So I can just add this option here I guess (I used the @ as an example) ?

@i have span around@

$str = preg_replace("/$start@(.*?)@$end/", "$1<span>$2</span>$3", $str);

 

[bernhard]

Yep. I've added support for custom tags via hook:

Custom tags

You can add custom replacements easily via hook in /site/ready.php

$wire->addHookAfter("TextformatterRockDown::replace", function ($event) {
  $str = $event->arguments(0);
  $start = $event->arguments(1);
  $end = $event->arguments(2);
  $str = preg_replace("/$start@(.*?)@$end/", "$1<span style=\"color:red;\">$2</span>$3", $str);
  $event->return = $str;
});

[Jozsef]

Thanks Bernhard, I'll try it in my next project.
I did the exact same thing in most past projects, a headline text field in the format of *Bold Text* in the headline.
As wbmnfktr I used the core markdown textformatter but in the template file I had to strip all tags apart from <em>. It was necessary because the core formatter adds paragraph tags around the headline that doesn't play well inside heading tags. Another negative about this approach is that I can't use front end editing.

Your readme doesn't say anything about usage, does that mean I can just simply output the text field as $page->headline ? Or even $page->edit("headline")?

[bernhard]

Thx @Jozsef here you go: https://github.com/baumrock/TextformatterRockDown#usage ? 

[Stefanowitsch]

I just used this module in a project where I needed to add a line break into a headline field that does not allow HTML tags. Normally you would just insert a <br> tag.

Sometimes you have this case where you need just this one little tweak and don't want to change field settings globally or create a new field/setting just for a single purpose.

For example:

How do you get a linke break into this headline when HTML is now allowed in the field settings?

You could shrink down the parent container in the front end to "force break" the text. But this is kind of unpredictable as you never now if the client changes the text at one point in the future. 

So here's my solution. I can define line breaks via the @-sign like this:

Not without some custom code of course:

$wire->addHookAfter("TextformatterRockDown::replace", function ($event) {
    $str = $event->arguments(0);
    $str = preg_replace("/@/", "<br>", $str);
    $event->return = $str;
});

This is the result:

 

[bernhard]

Hey Stefan thx for sharing!

Your screenshots show me that we might need a feature to show available formattings in the field's notes? Or maybe that would be too much? It's actually not that easy to do if you want to support multilang setups for example...

[bernhard]

On 3/1/2023 at 3:07 PM, Stefanowitsch said:

I just used this module in a project where I needed to add a line break into a headline field that does not allow HTML tags. Normally you would just insert a <br> tag.

Just wanted to mention that nowadays I always use https://caniuse.com/css-text-wrap-balance for this. We have 84% coverage and if it doesn't work it does not really hurt 🙂