HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Feedback for the Rich Editor
R_J
Admin
@Linc & @charrondev I know that creating single Issues on GitHub would be better but since the Rich Editor is here used for testing, the feedback could be given here, I guess. And I bet the barrier for giving feedback is lower when it just needs a comment...
Furthermore it might be easier to see for other users here what have been noted already.
- Font is too bright. The first feedback is just a matter of taste, but I would give the font color more contrast. It's much brighter than discussion and comment body anyway
- Paragraph sign disappears/is inconsistent visible. I wrote that comment and after it was posted I didn't have that little paragraph button (editorInstance1paragraphMenu-button) visible all the time, but only when the edit box is focused. When freshly loading a discussion the paragraph sign is always visible, even if the textarea is not focused
The live link detection fails. While writing the above feedback, the colors "went wild": I wrote a markdown link manually and pasted the link after the opening "(" in there. That link was colored blue but also every following text was colored blue, up to the "(editor..." part. Even the opening "(" from that part is colored blue and it is colored blue because all this text is recognized as one link, as I can tell by hovering over it.I hadn't realized that this is no markdown editor any more- I've experienced a severe bug when I started this discussion. The first character I've entered was "@" and then I pasted "charrondev" and then I hit space bar. After that the textarea wasn't visible any more. I'll try to reproduce this.
- User name recognition in mentions. Right at the above I've mentioned @linc and @charrondev. While "charrondev" is recognized as a user and is marked bold, "linc" is not
- Mentioning problems. When writing @charrondev and hitting the space bar, sometimes the cursor jumps right before the "@", right now this textarea disappeared again and when trying once more the cursor jumped to the next row. Oh yes, sometimes its working as expected, but most of the time not.
- Markdown isn't supported any more, but I guess that the rich editor strives to be a true WYSIWYG editor.
- UX problems 1: it took me quite a while to find out that there are formatting options behind that odd paragraph sign on the left
- UX problems 2: it would be great to have tool tip helps. 2.1. I really had no idea what "{..}" should be and 2.2. the crossed eye frightened me that much, that I used a test comment to see what it is doing.
- UX problems 3: while the inline formatting buttons (bold, strike through etc) are toggle controls, the paragraph formatting tools are "apply-once" controls. In order to switch between bold formatted text, you have to select the word and press the "B" button. In order to toggle between H1 text and normal text, I have to click between the paragraph sign and the H1 button. I find this a major inconsistency.
- UX problems 4: line breaks are paragraphs. When I hit enter key, I get a new paragraph. I found no way to simply get a line break and a line break is what I expect when I hit enter. When I want to structure a text I want to be able to create meaningful blank spaces myself. Not being able to "join" to lines by simply using a line break and let them close together is a major drawback for me. If text style would be of no importance for me, I would be a facebook user.
I haven't tried uploading or emojis yet.
3
Comments
attingEdit: No seems to be related to my test forum...
Glad someone else understands the inconsistency problem. It is a big deal.
Here's my take..
'quote' on a post doesn't use the same 'select this bit of text to modify it' action as selecting text in the editor. It copies the whole thread by default. Some forums allow you to quote a specific part this way.
Selecting text brings up a context menu for formatting, allowing you to deal with specific parts of the text, but it's also weird to have these controls suddenly pop up instead of being constantly available. This creates problems with turning that formatting feature on and off.
But the bottom controls for emojis, images, and embed are pretty standard issue.
So we have 3 different ways of thinking about how to format and insert elements here, which is a problem.
My solution - remove the javascript popup and put the controls at the bottom, separated from the emoji/picture/embed with 1 icon space. The bit about quotes won't matter so much afterwards.
This will be most familiar to users of other platforms and eliminate the issue of not being able to start/stop the formatting at certain times. The downside is that the logic for adding links will have to be changed. But anyone familiar with wordpress, microsoft word, etc could easily understand how to use an editor built like my mockup above in about 0 seconds.
I don't understand why the paragraph symbol is present. Maybe it's a leftover from debugging the editor. it's a bit weird. I find the paragraph symbol and the javascript formatting popup to be distracting and irritating. If they're something that don't leave the final release, it would be nice if there was a way to disable them without code-based hacks.
There are some other smaller bugs mentioned by @R_J but i won't comment on those until other things get sorted out.
Except i would also like the text in the editor to be black by default. The text in the editor is small and light, which could be a problem for people with impaired vision on high resolution screens. An easy fix is to just make it black like the rest of the text.
This happened to me yesterday (on another thread), and happens consistently now.
Also I found that when typing, the whole control would freeze at times for e.g. ten seconds.
I support @neptronix suggestion about using the unused space at the bottom of the textarea where only three options are shown right now.
a) On desktop there is room enough and no reason to hide UI elements.
b) On mobile there must be any other solution instead of the popup-on-marked-solution anyway
Ahh, i haven't tried the mobile version just yet..
In my mockup, all the formatting stuff is only 200 pixels wide. This will work even on an iPhone SE with it's very sad ~320px virtual width.
The paragraph indicator on the left, takes about 40px..
Without the paragraph indicator, the 'save draft' and 'post comment' could be renamed to 'save draft' and 'post' and actually fit within the posting box if the paragraph indicator was removed. So there's plenty of space left to do other things. :)
The javascript formatting popup might still help for mobile when writing long posts if the post writing box does not dynamically adjust to the vertical height of the screen. Not necessary on desktop at all, since pretty much everyone on a desktop has at least 900px of vertical height these days. ( the challenge with desktops is figuring out how to best make use of all the horizontal space! )
Before I wrote: Also I found that when typing, the whole control would freeze at times for e.g. ten seconds.
There are several second pauses taking place when autosaving, which happens fairly frequently. Also I notice sub-second latency when doing ordinary typing.
Regards
p.s. Sorry if my suggestions on the other discussion were annoying. I was just thinking out loud, probably not seeing the whole picture. Live and learn.
@R_J
Mentioning problems. When writing @charrondev and hitting the space bar, sometimes the cursor jumps right before the "@", right now this textarea disappeared again and when trying once more the cursor jumped to the next row. Oh yes, sometimes its working as expected, but most of the time not.
I wish I had a way to reproduce this. That is a terrible error to get. In my own testing I can't get this to occur at all though. Please update if either you or @DavidTanzer are able to create reproduction steps. Please file a github issue if you can consistently reproduce.
Mentions Sorting
Mentions now take casing and accents into account when filtering the highest priority results. Usernames are case sensitive so there could be two different links. @R_J your mention of @Linc didn't work because his username begins with a captital letter, and there are 3 other users with closer username matches when taking casing into account.
Unknown column Active in fieldlist
You seem to be missing a
utility/update.UX problem 1
The discoverability could be greater. We actually have descriptions of how to use the different menus already made and in the HTML of the document but we don't seem to have a way for sighted users to get to them. I feel like we had mockups for this at some point. I've filed an issue and we'll definitely address this. https://github.com/vanilla/vanilla/issues/8276
UX problems 2
We don't have any custom tooltips implemented but we do have accurate titles on the items. If you have your mouse over the item it should display their title. Is that not the case for you?
UX problems 3
while the inline formatting buttons (bold, strike through etc) are toggle controls, the paragraph formatting tools are "apply-once" controls. In order to switch between bold formatted text, you have to select the word and press the "B" button. In order to toggle between H1 text and normal text, I have to click between the paragraph sign and the H1 button. I find this a major inconsistency.
We spent a lot of time a few months ago trying to get make Rich Editor accessible. They are fundamentally different controls so they behave differently (and in ways that users with screenreaders can understand). We do have some plans to adjust the appearance of the paragraph menu that would make the visual distinction between the menus greater and offer greater choice of paragraph level formatting.
UX problem 4
line breaks are paragraphs. When I hit enter key, I get a new paragraph. I found no way to simply get a line break and a line break is what I expect when I hit enter. When I want to structure a text I want to be able to create meaningful blank spaces myself. Not being able to "join" to lines by simply using a line break and let them close together is a major drawback for me. If text style would be of no importance for me, I would be a facebook user.
@R_J do you think you could elaborate on this?
As you can see I've created multiple line breaks here. I'm quite confused by this one.
UX problems 5
We've essentially developed primarily a "minimal" mode for rich editor. This is the experience we believe most end users prefer, even if it's not ideal for power users. We are planning to iterate on this but there is effectively a 0% chance of us ditching the contextual menus entirely.
I'd like us to offer more configuration options for rich editor UI, but haven't had the time yet.
@charrondev
Here is the behavior I observed, in more detail. It actually shows up for some names and not others, but consistently.
If I type "@charrondev" and then hit space, the message "Loading..." flashes instantaneously and then entire input control disappears. All that remains is "Leave a Comment" and then underneath that the line with "Home . Vanilla 2.6 Help" and the Save Draft and Post Comment Buttons.
However, if I type "@charrondev" and then use the mouse to select your name, then it works fine.
Here are names that it fails on: charrodev, chanh, hanry. Here are names that it works on (with the space): aaa, channing.
The rule here appears to be this: it fails if and only if there is just a single name in the list of names that can be selected with the mouse.
For the name aaa, there are other names with aaa as a prefix (five altogether), and the behavior is fine.
This is under Google Chrome: Version 70.0.3538.77 (Official Build) (64-bit).
Are you able to reproduce it using these specific names?
<p>vs.<br>complain. If you look at the html the editor creates, you will not find a BR element, only<p>. A paragraph always adds extra space between two lines which creates a separation, think of good old books. A paragraph means a stronger separation than a line break; at least for me it is a stylistic help which i would miss very much.Thanks for that detailed answer. I apprecite whenever you guys spent time to talk about your motivations and decisions!
@DavidTanzer @R_J Thanks for the reproduction steps. I've been able to reproduce and will file an issue. This should be resolved before the 2.8 release final.
@charrondev Note under IE 11, the behavior of this bug is different. There, once I just type '@' followed by a single letter, the same problem occurs, every time. (Triggered by the second letter, no space involved in this scenario.)
(On internet explorer version 11.0.9600.19155CO)
@charrondev please take a look at this comment. It quotes another user but that quote isn't rendered. You should be able to see my quote if you edit the comment.
@R_J This issue was discovered internally before the 2.8.dev.6 release which is what is deployed here. It was fixed almost immediately after, but we opted not to fork another release until the final to lower the load on our support team. The fix was merged 15 days ago. https://github.com/vanilla/vanilla/pull/8236
The Rich Editor isn't active in Activity Comments. Don't know if that is on purpose...
Rich Editor should be active everywhere advanced editor was active (it uses the same event hook). A quick test on my local shows that advanced editor doesn't mount there either so it's not on purpose, I just don't think there's anyone that's championed it.
I'd accept a contribution enabling it there, but don't personally care much for the activity feed. I wasn't even aware you could comment on the activity feed.
Update: I noticed a similar issue and made it broader to cover the scope of this.
I find that the rich editor is sorely lacking in some very basic functions, such as coloring text or underlining.
There is no intention to allow colouring to text as an editor control. From our perspective that is the job of theming.
We may add underlining in the future.
Text formatting is not the job of the text editor?! But the one of the theme? I really can't follow your logic here...
The comment referred only to text colouring. Basic formatting is supported. As a forum admin, I see no benefit to our users being able to choose text colours.