Hi
I’m trying to create an editor which includes hashtag objects, which are non-editable, but selectable. Meaning - I should be able to erase it as an atom unit.
This version works well on desktop, but on mobile, the keyboard disappears when I’m trying to erase the contents of the text from the end of the document.
Actually, on mobile, I don’t have a way to erase the special “hashtag” element at all. Any suggestions?
Thank you Iswara Chaitanya
Which mobile platform(s) did you test on?
Chrome on Android, using GBoard as the keyboard.
Certain nodeviews are incredibly flakey on Android. When Android sees “contenteditable=false”, it gets really confused and the IME connection class is destroyed. A way we have been getting around this is by trying various dummy elements to trick the IME. We had some success with a dummy div that wraps an empty svg. You might also try messing with the user-select css property on some of your nodeview elements. I also think that Atlassian had some success with inline nodeviews that had a display of inline-block on the outer node but they had an internal element that was display block.
If you get it working, I’d love to know what you did. We still haven’t pinpointed all of the rules and we ended up just trying dummy elements and tweaking styles until it worked. It’s difficult to reverse engineer the base input connection classes in Android.
Thank you. I will try it out and let you know what I find.
Can you please tell me - is this something the “gapcursor” might help with?
Really, I have not figured out what it does precisely, and couldn’t find any documentation or example on it, but its name suggests it might be a good candidate for selecting the whole node.
Is this true?
Thank you
Om
Iswara Chaitanya
Ah, I see what you mean. This doesn’t occur for image elements (which are left editable), which is why it’s not very visible in the demos.
Browsers indeed don’t really deal with uneditable content very well. It’s getting better, and I encourage you to file bug reports for stuff like this to try and keep things moving, but there’s still lots of issues. As @jessejorgenson mentioned, when the entire selected content is uneditable, things fall apart. I was able to work around the disappearing keyboard with a toDOM output by leaving parts of the node editable, but then you get new problems with inserted text actually ending up inside of the element.
If anyone has more experience with this let me know. It is quite likely that there are hacks to make this work, but I haven’t found a good one.
Thank you very much.
In the meantime, I switched away from nodeviews into a plugin that filters out any change within this node type, and also changes any $cursor within the node into a NodeSelection of the entire node, and it works great. I can work both on desktop and mobile and everything moves as expected. It is, in effect, not-editable, and when the cursor is placed anywhere there, the whole node is selected. And that’s exactly the behavior I was looking for.
I encountered other issues in the meantime, but I will try to simplify them before submitting them here. Perhaps it’s just my bugs…
Would you be so kind to share the code ? I am after this myself would save me some time : )