Delimiter-based tag detection UI updates are broken in mixed-mode; works fine if using Enter to complete.

[atownley]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

💥 Demo Page

https://jsbin.com/sikahusuha/edit?html,js,output
Also a jsfiddle here: https://jsfiddle.net/xw89qpar/

Explanation

• What is the expected behavior?

1. Enter a tag using the following: '#tag'

2. the tag is displayed correctly in-line.

3. Enter a tag using the following: '#mytag,'

4. the "mytag" tag is displayed exactly as the first one.

• What is happening instead?
  Enter a tag to be completed using the delimiters (I want basic punctuation to complete the tag in most cases), and if you enter the following, '#mytag,' the event is fired, and you get the tag created, but the UI doesn't update.

Here's a picture:

I've looked through the code and I see where this happens, but I couldn't quickly find where the UI updates take place.

This doesn't seem like the expected behavior.

• What error message are you getting?

No error message.

[yairEO]

Hi, mix-mode is different in many ways and one of them is no "delimiter-based tag detection" because everything is considered text which is a part of the tag.

Do you have an example of another tagging UI which does what you want?

[atownley]

Hi. Yeah, I get it's tricky. I'm working around it for now, but I'm trying to get the UX as streamlined as possible.

What's strange is that I can see where in the code it correctly recognizes and adds the tag with the delimiters, but I couldn't figure out how to force the display formatting to be completed.

I think of all the sites/apps I've used, Slack actually does this the best. Some punctuation, it's immediate, but some it has to wait until you type the next character before it goes ahead. The nice thing about Slack vs. others is that there's no extra whitespace you have to delete between the tag/@ref and the punctuation. It's really annoying, and I hit this a lot with other tools.

I have things working without the delimiters at the moment, but it's a much better experience with them. And, like I said, the core code recognizes the situation and adds the tags, but the UI just isn't updated to show that it's happened.

Here's a quick capture – typo included ;) – of how it works on Slack.