Topic Template Placeholder Text theme component

Theme component
1

Topic Template Placeholder Text theme component

This theme component enables you to display Topic Templates as placeholders (watermarks) instead of as editable template text.

This allows you to provide custom instructions as a placeholder for each topic.

For example:

This is the normal placeholder (watermark) text.

image
image922Ɨ259 4.35 KB

NB You can already change this site-wide by changing the custom text

Go to Admin >> Customise >> Text

Then search for the text that you see there on the screen.
A search for ā€œBBCodeā€ should get you what you want:

Then change the values for js.composer.reply_placeholder to the placeholder text you want to display

You can also set a Topic Template in each category

In the Edit Category dialog select Topic Templates. You can add a custom template for your category.

image
image654Ɨ722 17.2 KB

This works well BUT the user has to delete the template text before they can start typing their post.

This theme component enables you to display the topic template text as a placeholder (watermark) text instead of the editable text. You simply click on the box and start typing.

It can be set to display all Topic Templates as placeholders, or you can do it on a case-by-case basis by adding a [placeholder] indicator to the Topic Template.

image
image721Ɨ578 16.4 KB

Install the theme component

:hammer_and_wrench: Git repo: https://github.com/naidihr/discourse-topic-template-placeholders

:thinking: How do I install a Theme or Theme Component?

Credits

Thanks to @merefield for refactoring the JQuery element to use the Ember framework and Discourse core.

Please note the updated version is only tested to work on Discourse versions from 2.4.1 If you are on an earlier version of discourse, please try the original version which has been tested in version 2.3.10
Original version repo: https://github.com/naidihr/discourse-topic-template-placeholders_original

35 Likes
How to Add Category-specific Message Above Topic Editor
How can I add labels in create topic form fields?
Template for replies
Is there an option to trigger a guidelines prompt for the first few posts a user does?
I there a way to setup a template (placeholder) in the topic creation editor
Reply Template
Something like shortcodes for Discourse?
Discourse Category Headers theme component
Quote formatting of support category template
I need two different placeholders on new topic and reply body fields
Have users complete form when creating a topic?
[PAID] extra input fields for new topic
New lines in the composer's reply placeholder?
2020: The Year in Review
Can a user block a user group?
Js.composer.reply_placeholder applies to New Topics as well as Replies
2

PS development note. I had to do a JQuery hack to get this to work as a theme component. If it is possible to update the placeholder via the model - I would be grateful of you would let me know.

8 Likes
3

You can try something like this

<script type="text/discourse-plugin" version="0.8">
  api.modifyClass("model:composer", {
    applyTopicTemplate() {
      this._super(...arguments);

      Ember.run.schedule("afterRender", () => {
        // do your work here
      });
    }
  });
</script>

This should allow you to add some custom logic when Discourse applies category topic templates.

That said, this type of way of writing stuff is a bit outdated. I would also recommend that you give this a read if you plan to spend a lot time on Discourse themes. It makes life much easier.

9 Likes
4

Great idea for a Theme Component!

Iā€™ve gone ahead and submitted a PR to do the following:

  • removes need for jQuery
  • removes need to worry about timing (use Ember framework & Discourse core, donā€™t fight them)
  • modifies the Composer Model to help achieve the result (as you rightly suggested)

I wonā€™t be upset if you donā€™t merge it, but hope it helps to see another way of doing things :slight_smile:

(I canā€™t promise there are no bugs, but happy to follow up on any ! :cowboy_hat_face: )

9 Likes
5

Thanks Robert. Iā€™ve merged that PR. Much appreciated :+1:

2 Likes
6

This is literally what I was looking for! You are a god! :bowing_man: :shallow_pan_of_food: :bowing_woman:
Please accept this humble emoji offering. :canned_food:

1 Like
7

FYI this only works if you first go to the category and create a new topic. If you try to create a new topic from the latest page and then select a category from the dropdown the text doesnā€™t display.

2 Likes
8

Thatā€™s expected? Thatā€™s how Topic Template functionality normally works. The Topic Template wonā€™t be considered in the latter case.

But yeah, imho, that could be improved in even vanilla Discourse without this TC to support your latter case. I have personally found it annoying that users are not presented with the Template if they go the second route.

This TC is just piggybacking off of core so ā€¦

9

Maybe weā€™re talking about different things, but this is how it works for meā€¦

1 Like
11

This might be due to some other reason because it works here on Meta. if you go to /latest, open the composer and then select the marketplace category you get the template we have for that.

4 Likes
12

Yep weird. Sorry I think it might have been resolved. This was nagging me for ages but seems to work now.

Ok that presents a new challenge. Haha.

4 Likes
13

Hi Robert - I tested it after the merge and it was working - but it no longer is for me? This is with the override setting - not using the [placeholder]. Please can you check with your build as well?

Also on my original version - it did work the same if you started a new Topic from the latest page and then select the category.

I may need to roll backā€¦?

14

Iā€™m looking at it now. Give me a little while.

15

OK PR for fix raised: FIX: change the placeholder & template when switching selected Category by merefield Ā· Pull Request #2 Ā· naidihr/discourse-topic-template-placeholders Ā· GitHub

It is now taking the Category from the Composer selection. Now thatā€™s done, it seems to work in all situations, but please confirm.

2 Likes
16

Hi Robert, I merged that last PR and updated to the latest theme component version in but it is still showing the template text for default by me, even though I have ā€œdisplay all topic templates as placeholdersā€ set. I am on Discourse 2.4.1. Any more thoughts?

2 Likes
17

That works, but it also doesnā€™t work at all if display all topic templates as placeholders is turned on, even if Iā€™m in the category. Regretting volunteering for this now? :stuck_out_tongue_winking_eye:

2 Likes
18

No problem guys. We just iterate. :). Iā€™ll take a look.

Update: PR https://github.com/naidihr/discourse-topic-template-placeholders/pull/3

When checking out remember to refresh the page if you change a setting.

2 Likes
19

Great Robert. That last PR has fixed it. Also when starting a topic from the latest or category pages. All looking good now. Thank you for taking the time to look at this. Very neat solution _super job :wink::+1:

3 Likes
20

No problem. A pleasure. Sorry my initial testing should have been more thorough. Thanks for your patience.

I think we are on a good track right now, hopefully!

Keep coming up with more great ideas and putting them into practice!

3 Likes
21

Howdy folks! We love the idea of this theme component!

I just tried to install it on our discourse instance but Iā€™m running into some trouble here.
It seems that when enabled on the theme, it breaks some of the styling already in the theme.
For example, the buttons at the user drop down:

image
image630Ɨ262 11.5 KB

become like this when enabled:

image
image680Ɨ230 21.4 KB

In addition to this, the placeholder doesnā€™t appear to work, both with 'Display all your Topic Templates as placeholders (watermark text)' enabled, and disabled.

It could be that our discourse instance is v2.3.10?

Iā€™ve taken a look at the code here and canā€™t discern why our styling would be messy.

We rely on another team to manage and update our discourse instance & itā€™s a bit of a big task to get that done.

Iā€™m hoping for a quick tip to potentially fix this, but, if it boils down to our discourse version thatā€™s fine too!

Thanks in advance :smiley: