[FIXED] Editor background not always loading in Newsfeed

[Brettflan]

If you have the appropriate forum user group permission set under "Social Groups: Moderator Permissions" (as a super moderator or administrator or whatever of the overall forum), you are of course able to edit Newsfeed posts and comments within all groups. However, if you don't also have a role within the group which would let you post to that group's Newsfeed, the background of the post editor does not load in, so it can be hard to read or edit text.

Using web developer tools, I can see that it is not loading "public:editor.less" (and maybe others) in those circumstances, which leads to the problem.

In the attached "not loaded" screenshot where it didn't load in (Forum Administrator, but joined the group as just a Member, which role doesn't have the Newsfeed posting permission), you can see the text in our forum style ends up rather hard to see except when highlighted, like I did with some of the text there.
The "properly loaded" screenshot is from where I was also set to the group admin role within the group, which has the role permission to post to the Newsfeed.

 

[Brettflan]

As a temporary workaround for now, I just added this to the tlg_group_view template to force loading of editor.less on that page:

<xf:css src="editor.less" />

That results in an unnecessary bit of extra CSS loaded for users who aren't able to edit newsfeed posts or comments, but it works.

 

[Truonglv]

As a temporary workaround for now, I just added this to the tlg_group_view template to force loading of editor.less on that page:

<xf:css src="editor.less" />

That results in an unnecessary bit of extra CSS loaded for users who aren't able to edit newsfeed posts or comments, but it works.

BrettflanI don't have that issue. But editor.less is attached within editor it's not load manual.

 

[Brettflan]

I don't have that issue. But editor.less is attached within editor it's not load manual.

TruonglvI've tested with Xenforo 2.2.7 (and patch 1 for it), and Social Groups 3.1.0 and 3.1.3.

And yeah, that's the problem. When a person with the forum permission "Edit any comments" (under "Social Groups: Moderator Permissions") views the newsfeed for a social group which they're not a member of, or are just a member and don't have the role permission to post to the newsfeed or make comments to it, there is no posting box to post a newsfeed item. Without that posting box, the editor.less file isn't initially loaded when the page loads. And it isn't loaded later when it's needed, either.

When that newsfeed posting box isn't there (when "$group.canAddPost()" returns false within tlg_group_view and that section therefore isn't loaded), and the person tries to Edit a newsfeed post or comment, the editor for that comes up without the editor.less CSS having been loaded. And thus the problem.

 

[Truonglv]

I've tested with Xenforo 2.2.7 (and patch 1 for it), and Social Groups 3.1.0 and 3.1.3.

And yeah, that's the problem. When a person with the forum permission "Edit any comments" (under "Social Groups: Moderator Permissions") views the newsfeed for a social group which they're not a member of, or are just a member and don't have the role permission to post to the newsfeed or make comments to it, there is no posting box to post a newsfeed item. Without that posting box, the editor.less file isn't initially loaded when the page loads. And it isn't loaded later when it's needed, either.

When that newsfeed posting box isn't there (when "$group.canAddPost()" returns false within tlg_group_view and that section therefore isn't loaded), and the person tries to Edit a newsfeed post or comment, the editor for that comes up without the editor.less CSS having been loaded. And thus the problem.

BrettflanI cannot reproduce that bug but in the new version I have changed behavior to edit post.

 

[Brettflan]

I've just tested 3.1.4, including running a rebuild of the addon, and this problem persists for newsfeed posts and newsfeed comments under the very specific circumstances I outlined above.

I do notice the change to how the editor for newsfeed posts is displayed, inline instead of in a popup within the page. That didn't do anything for this bug, though.

My workaround within tlg_group_view still works, at least.

 

[Truonglv]

I've just tested 3.1.4, including running a rebuild of the addon, and this problem persists for newsfeed posts and newsfeed comments under the very specific circumstances I outlined above.

I do notice the change to how the editor for newsfeed posts is displayed, inline instead of in a popup within the page. That didn't do anything for this bug, though.

My workaround within tlg_group_view still works, at least.

BrettflanCan I have a test account?

 

[Truonglv]

I appreciate with your help. After analyzed the problem it's not belong to add-on. You have a customized editor with modification in extra.less

.fr-box.fr-basic .fr-wrapper { background: #d0d3d5; border: 0 solid transparent; }

The CSS rules applied as well but when editor.less load through AJAX the css was overwritten that why your css does not work in this case and I believe that you will have some with other add-ons which same scenario.

To fix this issue just suffix with important keywords will address its.

 

[Brettflan]

Strange, this problem has shown up nowhere else in the entire forums, just in the newsfeed section of Social Groups and only under those specific circumstances.
It's my understanding that, by design, extra.less is supposed to load last to have it override other .less files, which does seem to be the case everywhere else. Just not in these circumstances in your addon, I guess, as editor.less is ending up being lazy-loaded.

We also have quite a lot of froala editor changes in extra.less, not just that one. So that one edit will only fix part of the problem.

So, my options:

1. Marking every bit of CSS for all of those froala editor changes as !important just to make them work right for this addon on that one page under the infrequent circumstances that it happens. Doesn't seem reasonable, and it isn't good CSS practice to overuse !important.
2. Moving all of those editor CSS changes to editor.less, which receives updates from XenForo and would make it annoying to merge changes for various XF updates. Also we would need to remember to go over to editor.less instead of extra.less for froala editor style changes. Not a huge nuisance, but definitely still a nuisance.
3. Making a template modification to add those CSS changes to editor.less. I wouldn't have to merge changes for XenForo updates, but going in and editing that CSS for any style changes would then be a nuisance.
4. Just stick with my workaround to force editor.less to load with that particular page no matter what, forcing it to load before extra.less. Doesn't add much overhead to the CSS file for people who can't post to the newsfeed, and only on that particular page.

I guess I'll stick with #4, my workaround.

Thanks for looking into it, anyway.

 

[Brettflan]

As a follow-up, I've improved my workaround. Instead of adding it in tlg_group_view where it loads the extra editor.less CSS for everyone, I've moved it to tlg_post_macros under line 120, which is:

                        <xf:if is="$post.FirstComment.canEdit()">

Below that I have moved my workaround, now targeted only at people who have the Edit option on newsfeed posts and comments.

                            <xf:comment>Workaround fix for editor.less loading after extra.less and overriding custom CSS changes, if the user can't make new newsfeed posts but can edit them as well as comments.</xf:comment>
                            <xf:css src="editor.less" />

This is now a more proper focused fix. Truonglv, feel free to implement it, minus the extraneous comment.