Retort - a reaction-style plugin for Discourse

[angus (Angus McLeod)]

@bsawicki

One thing I’ve noticed (other than it’s working, yay) is that when you click the retort button it will snap the page so the emoji picker is on the top (latest Chrome, OSX), then if you scroll your page it moves the emoji picker to some weird places. Just wanted to report.

Thanks, yes this is a quirk of popper, the library the emoji picker uses for positioning. I’ve updated the usage of popper to address that.

https://github.com/gdpelican/retort/commit/69b67a33300a30027ed101ce84c46e028cdbe2e7

[Vaping_Community]

First off a massive thank you to @angus for taking this plugin on, it’s been a fav of ours for a while now

I have updated to the latest version and it seems to break PM’s

Uncaught TypeError: Cannot read property 'map' of undefined
    at _retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:57
    at _application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82147
    at Array.map (<anonymous>)
    at h (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82146)
    at i.html (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:78359)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82625)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82345)
    at s (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20534)
    at t.exports (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20521)
    at e (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:19890)
_retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:368 Uncaught TypeError: Cannot read property 'toString' of undefined
    at t.disabledFor (_retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:368)
    at _retort-2c5f89abb14744b92588a2ea05689cf5f5fe97d5b9094543abfacf0b1281182f.js:51
    at _application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82147
    at Array.map (<anonymous>)
    at h (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82146)
    at i.html (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:78359)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82625)
    at i.value (_application-95c62ce5b40d9a86771813c87729bec8a97a85040e9142c1de823499c05122ad.js:82345)
    at s (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20534)
    at t.exports (_vendor-66c7c54e4c3d88ab9a314688832cc04210ab4ae3401f48fb186a7134473d0d0a.js:20521)

[angus (Angus McLeod)]

Thanks, we had a PR removing lodash today, another deprecation.

Should be addressed now:

https://github.com/gdpelican/retort/commit/b86bb6870c91d70cfdc934ad0dc0291bdc88da52

Please update and let me know how you go.

[Vaping_Community]

Seems to be working ok now, thanks so much!

We applied this CSS to make things look a bit better for us

Desktop

.emoji-picker.has-limited-set img.emoji {
    width: 40px !important;
    height: 40px !important;
}

.post-retort {
    margin: 0px 2px;
}

.emoji-picker.has-limited-set .limited-emoji-set {
    flex-wrap: wrap;
}

.emoji-picker {
    min-height: 80px;
    max-width: 400px;
}

Mobile

.emoji-picker.has-limited-set .limited-emoji-set {
    flex-wrap: wrap !important;
}

.emoji-picker {
    min-width: 100% !important;
}

[gde]

I have juste rebuild discourse to update the plugin. But now, the plugin’s icon is missing and so are all of my theme-component. I don’t know if this is related but I have this message in the browser’s console:

Edit : after deactivating Retort, all theme-component came back so there really looks like there is a connection

[Vaping_Community]

I am seeing this error a lot on my site and after a while the whole site becomes slow / laggy for me.

In safe mode everything is fine, site is fast and responsive.

Using Google Chrome: Version 85.0.4183.83 (Official Build) (64-bit)

The Error:

Uncaught TypeError: Cannot read property 'map' of undefined
    at retort-11c49191cf3e1f7f570d8808ade67b5d7fcfdfe612b792c49f064baacdebadc7.js:1
    at application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1
    at Array.map (<anonymous>)
    at h (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.html (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.value (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at i.value (application-acabe31b416e73071c4f82b77bdadcf4a5fc525109638830baeeacd14e3a3656.js:1)
    at s (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)
    at t.exports (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)
    at e (vendor-bf8061112a1b547c1b596d16d89c9a42af976a43984f9eacd40a8c690c0f30b2.js:1)



 if (!v.default.disabledFor(e))
                    return v.default.storeWidget(r),
                    o.retorts.map(function(e) {   <<<<< ERRORS ON THIS
                        var t = e.usernames
                          , i = e.emoji;
                        return r.attach("retort-toggle", {
                            post: o,
                            usernames: t,
                            emoji: i
                        })

[Vaping_Community]

Some CSS issues and how I resolved them for our personal use

Desktop

The first is not so much a problem but it could be, we rarely have this many retorts on a post but you should know that if you go over 8 retorts it will break the Post Controls

Here it is with 8 retorts, looks great

CSS Used for Desktop

.post-retort {
	margin: 0px 2px;
	border: 1px solid #333;
	border-radius: 5px;
	padding: 3px;
	background-color: #666;
}

---

Phone: iPhone SE Gen1

Mobile

The maximum number of retorts at the moment on mobile without breaking post control, at least using a smaller screen is 1

With more than one retort, post controls are moved off the screen

Here’s how it looks with our CSS changes

Mobile CSS

.post-retort {
	border: 1px solid #333;
	border-radius: 5px;
	padding: 3px;
	background-color: #666;
	margin: 2px 2px;
	float: none;
}

You can achieve the same look on Desktop as on Mobile using the Mobile CSS above this will put the retorts above your post controls

We love this plugin and it gets a lot of use on our forum, thanks for taking it on @angus

[DoomDesign]

I also get this error. My theme components are still working, though, but the retort picker is not visible anywhere (since the JS broke).

We updated our discourse to 2.5.1 and then installed this plugin for the very first time.

[Bank_Live]

I cannot use wait load

[gde]

I’ve somehow managed to fix my issue by rebuilding the app today.
Maybe try this on your side ?

I’m also on stable (2.5.1)

[DoomDesign]

Yeah, I reported the problem on their github issue tracker and it was fixed on the next day, very nice

[luisherranz]

Hey guys, we love this plugin, but after the last update, we’re seeing white-skin emojis instead of the neutral yellow ones in our community forum.

We didn’t change any setting. This is our current configuration:

Is this expected? Can it be changed?

Thanks!!

[kchang (KC)]

Hello Guys,
I am new to Discourse. I installed discourse using source code in github and it is working online already.
Today I have retort installed, and I can see in Admin-Plugins the new installed retort was there and activated.

When I posted a new topic and review that using another account, with the hope I can use the new retort plugin, yet I cannot see the expected button there…

I went back to Admin and confirmed options of the plugin was set as described in manual. Please see picture below.

Since I can only post one picture here, I combine all three pictures together here.

So, please do me the favor to help me figure out what was wrong please. Any suggestions are appreciated. Thanks a lot in advance.

[angus (Angus McLeod)]

@luisherranz

after the last update, we’re seeing white-skin emojis instead of the neutral yellow ones

Not expected no. I’ll take a look on the weekend.

@kchang Could you open up the web console (How can I open the browsers console? – Mailster Knowledge Base) and see if there are any exceptions there from this or any other plugins or themes you have (copy and paste any red lines from the console here (hide them in a “Hide Details” tab if they’re long).

[kchang (KC)]

Hi @angus ,
Thank you so much for your reply. I do notice several red lines in the console, please see the picture below from Opera whenever I entered to a post.

It looks like there is something wrong at “import” in my installation. I install Discourse using source code, not Docker, therefore I always put new plugins into discourse/plugins, by which I successfully installed another two plugins. I am not sure if it was the proper way to have retort installed in the same way.

By the way, I did have @popperjs/core installed using npm before, but I don’t know why I encountered this error…

Thank you.

[angus (Angus McLeod)]

That import was added as part of the emoji-picker refactor that led to this plugin being updated a little while ago (see above). It was added to Discourse about a month ago. If you’re getting that error it means you’re running an older version of Discourse. I’m guessing you’re running the stable branch.

This plugin also supports stable, via the .discourse_compatibility file, but if you’re not using Docker, you’ll need to install the plugin using the rake task plugin:pull_compatible_all which will pull the right version of the plugin for stable.

If this is a production environment, and you’re relatively new to Discourse I would strongly recommend you use Docker. It handles a number of aspects of managing a Discourse environment, like pulling the right plugin version for your environment, that could potentially trip you up.

[Heliosurge (Dan DeMontmorency)]

Hi I had emoji restricted. An update awhile ago I had to allow unrestricted emojis for the plugin to work.

[kchang (KC)]

Thank you so much @angus, you are right I am on stable branch of discourse now. I will run rake task to pull the compatible version of retort. After I obtain domain name, I will go with Docker image for a more convenient way.

Update:
I ran rake plugin:pull_compatible_all, yet it seems my stable version of discourse is way too old. So I pull latest version of discourse. Now everything works smoothly

Thank you again for your kind help

[gerald]

In the default theme of Discourse, in the mobile view, the reply button is split from the rest of the bottom toolbar icons (like, share, etc) and it pushes the retort icon down and looks really ugly.
I am using this css added to the theme to correct the design. Perhaps you will find it useful for you too

.mobile-view {
    
    .topic-post nav.post-controls .actions button.reply {
        margin: inherit;
        margin-left: 10px;
    }
    
    nav.post-controls .actions {
        text-align: right;
        float: right;
        display: inline-block;
    }
    
    .topic-post nav.post-controls .actions .double-button {
        display: inline-flex;
    }
    
    .post-menu-area {
        margin: 0;
        padding-top: 15px;
    }
}

[luisherranz]

@angus

Not expected no. I’ll take a look on the weekend.

Awesome, thanks

If you need help debugging this or have a clue of what may be the issue please let me know.