Quote Callouts

There may be an error in here, enabling this (with the original disabled) created issues for accounts without admin access. Unsure of what conflicted exactly, but some topics were hidden and the Categories/Tags navigation was unusable at all for non-permissive accounts (TL1).

I’ll wait for Arkshine’s update.

2 Likes

I’m seeing the following when I updated today

[Admin Notice] Theme ‘Quote Callouts’ contains code which needs updating. (id:discourse.widgets-decommissioned) (learn more)

1 Like

I’ve pushed a fix, can you update the component and give it a try? :folded_hands:

7 Likes

Working fine so far!

2 Likes

I’m currently encountering an issue where the quote block cannot be collapsed/expanded

Do you mind pasting here a reproducible example or a link to your post in your forum (feel free to PM me if you prefer)?

1 Like

Of course, the bottom of this topic

Here’s an update that modernizes the component and brings rich text editor support! :rocket:
It might need some polish or may have unforeseen edge cases, but I believe it’s a fair good start. :folded_hands:

In short

Rich text editor

Let’s talk about the rich text editor and what to expect!

Creating callouts:

You have four ways to insert callouts:

  • Keyboard shortcut
  • Toolbar
  • Input rules
    • /callout<:type>
    • !!<type>
  • Paste support
    Video

Editing callouts

The controls to edit a callout appear only when you select it before.

  • Type chooser
    By clicking on the icon, a floating menu will appear.
  • Custom Title
    Supports inline formatting and emoji
  • Folding
    Set callouts as collapsible. It can be accessed from the options menu.
    Video

Organizing callouts

  • Move controls

    • Desktop
      There is a handle that you grab to drag and drop the callout.
    • Touch device
      You move callouts up/down or nest them into adjacent callouts. It’s disabled by default to avoid bloat in the view, since that’s not something you will do often. You can toggle in the options.
    Video

  • Keyboard navigation
    This helps make it easier to move in and out of nested callouts.
    It might require some future adjustments to make the behavior consistent in this version.

    • At the start of the title, the callout chooser will open automatically.
    • Inside a callout body with no paragraph to land on, it will create one; if you exit with empty content, the paragraph is removed.
    • Enter inside the title moves the cursor into the body (and creates one if necessary).
    Video

  • Click-to-insert

    • In areas where there is no paragraph, you can click inside to open a paragraph.
    • If you prefer, you can also use buttons to open a paragraph inside or outside a callout.
      Video

Possibly, later, I will look for:

  • input rules autocompletion
  • improve color using modern CSS, to ensure consistency and visibility, especially in dark mode.
  • I wish to remove all the settings and focus on simplicity first, with advanced customisation with CSS only, but it’s too late for that :rofl:

Special thanks to Moin for giving me feedback.

That’s it. Let me know what you think. Feedback is very welcome!

7 Likes

I noticed that you designed such an effect: if a certain type has multiple aliases, then when selecting the type in the rich text editor, each alias appears as an option, and they are positioned consecutively.
This is a nice design, but it seems to need further expansion: if no Title is defined, they will display the callout type, so these consecutive options that share the same final color scheme will show different names and titles; however, if a Title is defined, they will display and use the same Title in the list as when actually creating a Quote, which is somewhat confusing.
If this extension is difficult to implement, I think perhaps a checkbox could be provided to prevent adding extra entries in the type selection list that correspond one-to-one with aliases when a Title is defined. :slightly_smiling_face:

3 Likes

You’re right! Thanks for the feedback, it’s nice to see people using the TC.
Actually, I thought about it at some point, but completely forgot to fix it. :grinning_face_with_smiling_eyes:
I will work on a fix to properly filter the list when title is set.

2 Likes

I pushed a fix. Let me know how it goes! :+1:

3 Likes

I just tested the latest version, and now the ones with a Title will only show one in the category selection list, regardless of how many aliases there are. :smiley:

3 Likes

I have the following error, only when using the de translation*:

Screenshot of a red banner stating an error in Quote Callouts

JS-Console:

client-error-handler.js:109 [THEME 6 'Quote Callouts'] TypeError: Cannot set properties of undefined (setting 'callout_sample')
    at new po (callouts.gjs:30:19)
    at callouts.gjs:265:23
    at eK (plugin-api.gjs:3582:10)
    at Object.initialize (callouts.gjs:264:5)
    at i.initialize (app.js:304:28)
    at index.js:375:19
    at e.each (index.js:183:7)
    at e.walk (index.js:112:10)
    at e.each (index.js:59:20)
    at e.topsort (index.js:65:10)
    at ij._runInitializer (index.js:388:11)
    at ij.runInstanceInitializers (index.js:373:10)
    at l._bootSync (instance.js:111:22)
    at ij.didBecomeReady (index.js:780:18)
    at invoke (index.js:262:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at Y._end (index.js:762:32)
    at Y._boundAutorunEnd (index.js:499:12)
h	@	client-error-handler.js:109

It occurs in the last line of this quote:

class QuoteCallouts {
  constructor(owner, api) {
    [...]
    window.I18n.translations[
      window.I18n.fallbackLocale || "en"
    ].js.composer.callout_sample = ``;
  • Set /u//preferences/interface “Interface language” to “German (Deutsch)”

The error seems to have been introduced in one of the last Discourse updates between 2026.3.0-latest and 2026.4.0-latest, but I can’t pinpoint it any further. Currently I’m at 2026.4.0-latest 4b2c45376d and Quote Callout v0.0.1 9aa6548

2 Likes

I really thought this kind of issue was fixed.
Is the site’s locale set to default English (US), while the user’s locale is set to German, am I correct?

Looking at the error, the composer object doesn’t exist. Let me know how it goes.
I made a quick fix for that: FIX: Ensures composer translation object exists by Arkshine · Pull Request #11 · Arkshine/discourse-quote-callouts · GitHub

1 Like

Yes, that fixed the issue. Thank you! <3

1 Like

Hi @Arkshine, thanks for a great plugin!

Is it possible to use the callout with no title at all or with just an icon instead?

2 Likes

I don’t think you can do that at the moment, I’ll think of a way to do that in the next update!

In the meantime, there’s a trick: insert a zero width space and it should work :grinning_face_with_smiling_eyes:. You can copy it from this page for example: ​ U+200B ZERO WIDTH SPACE - Unicode Explorer


Or without any text

Let me know if that works for you.

4 Likes

I think it did work! Thank you! :heart_eyes:

2 Likes

Hey there, @Arkshine :waving_hand:

Is it possible to keep the original callout color when using the Hide details feature?

In the post editor mode the original colors are saved, but the background becomes gray after saving changes:

2 Likes

Thanks for the report!
I pushed a fix. Can you update the component and see if it happens again?

3 Likes