Hi! I'm Raihan and here's my notes and stuff. Ping me on any of the channels listed if you have any questions or suggestions!
I decided to pivot this. The thread Idea is interesting but after trying to write a thread of my own on twitter it wasn't that.. hard. Well I still can provide value but another thing I want to try is to make an interesting text app, inspired by @rjs' tweet on text editing. Let's see how far I can get it by the end of the week. And, good thing too I don't have to deal with the overlays again.
After 2 hours of work, I made some progress in pivoting. For now I removed the character-count highlighting, and focused on the main interactions which is split and create new element on enter. I restructured the data so the data primary lives on the container component and passed down to the ThreadBox component just to display. Any update detected on ThreadBox is bubbled up as an event, and passed down as props again. The split event is also triggered this way.
Now this feels.. really rough but OK as a first implementation. I just realized where I got this interaction idea from; It's from Dynalist. Because Asana and todoist just creates a new element on enter, but doesn't split the current focused element. I'm still struggling with how to let the focus shift up and down to make the editing feels more natural. I peeked into Dynalist's JS and saw the amount of code needed to make it happen. Amazed. The closer a dev needs to get to basic interaction (text editing, in this case), the more we need to handle really basic events and figure out how to work with it.
After some more digging turns out Dynalist also does some shenanigans with contenteditable and rendered Notes. They do need to do it as they do not mix previews and link render on the markdown editing interaction.
Finally figured out how to highlight the overflow characters without too much JS Shenanigans. What I finally did was have 2 overlaying DOMs. One is set to only display the text highlight (color: rgba(0,0,0,0) to set text color to transparent) and non-editable, the one on top is editable with no highlight. The bottom DOM is updated dynamically using Vue, but directly using this.$refs.display.innerHTML = this.htmlOutput. By having two separate DOM, I don't have to handle anything regarding undo/redo or copy/paste shenanigans.
When trying to implement this, I looked into Twitter's implementation and they are handling every keystroke through JS and their own Rich Text Editor. CKEditor also does this when I researched about contentEditable divs and text editors in general. I decided to double render as all I need is the highlights on overflowing text, in this case >280 characters.
The document.execCommand function doesn't work for me as I need to update the displayed text automatically, without selection from the user. The Rich Text Editor examples work nicely because the user selects the text and then applies the modification. The function also expects the selection. I need to work around that, either by applying selection through JS or some other thing and I think it's too involved for me.
The performance with double render was really bad, but turns out the root cause is because I was using @keyup or @keydown events on the top div. @input handles it much faster, and have no sync issues between the top and bottom divs. I also need to use style="white-space: pre-wrap; overflow-wrap: break-word;" to render \\n into <br> on the bottom div.
Pretty good progress for 1.5 hours. Now the position: absolute is wrecking havoc but the next thing I need to tackle is creating new sections when pressing Enter, like Asana/Trello. Might still have to debounce the @input thing to reduce events handled by the browser..
final commit: 343dc1c
WIP for the draft tweet box. Tried out using <textarea> but turns out it's really limited to displaying plain text. Did some digging to existing highlightable inputs and turns out they are using <div contentEditable=true>. Now the component is able to highlight text > X characters, but still messing up the undo flow provided from the browser. I need to dig deeper into this.
github.com/rraihansaputra twitter.com/rraihansaputra hello [at] raihansaputra.com