phived
phived copied to clipboard
LukeberryPi
add support for Links in Tasks
Currently, when writing tasks, if a task contains a link, such as "Watch this video: https://www.youtube.com/", I need to copy the link, open another window, and paste.
It would be cool if when I type something like "Watch this [video](link)" (using Markdown syntax or similar), it automatically converts to "Watch this video".
If you need more explanation about this idea, contact me, nice project :)
this is a neat idea, thanks for the issue! but i won't code it.
if you want to send a PR, i will definetly approve it if it works smoothly.
We can do this in typescript, to interpret the markedown according to the links, for common services such as X, tiktok and youtube
Maybe this is what we're looking for? https://github.com/remarkjs/react-markdown.
It would be possible to treat the whole task input as Markdown and parse it properly using this library.
PS: Maybe this idea is not the best one because we can't render JSX on the
valueinput, and we'll probably need to refactor the whole structure to separate editing/showing. But I'll leave it here anyways.
Maybe this is what we're looking for? https://github.com/remarkjs/react-markdown.
It would be possible to treat the whole task input as Markdown and parse it properly using this library.
PS: Maybe this idea is not the best one because we can't render JSX on the
valueinput, and we'll probably need to refactor the whole structure to separate editing/showing. But I'll leave it here anyways.
I'm not sure if this library converts the text to react components while typing, if not we should confirm if that's ok to format the text only when the user hits enter if so I could work on this implementation.
I'll drop this here just so I don't lose the idea, but I made some draft on this feature using the React Markdown lib for parsing the link syntax to a <a> tag. Then if the input was selected, it would render the actual input. If not, it would render the React Markdown parsed div.
It became kind of buggy with some things like trying to drag the task to rearrange them and deselect the input when clicking outside (triggering the blur event). Maybe there are some other ways to display the task to be less buggy.
Also, I think the UX for formatting the link and its name is not good since the input is small, so it could have something similar to how Notion handles that (when selecting or hovering the text, a tooltip with some action appears).
Demo:
https://github.com/LukeberryPi/phived/assets/74937642/ad001bb6-7f63-4b64-bb6a-56d98ff3fb39
how hard is it to accomplish twitter/x link logic? it feels like the smoothest UX among the current options. example below:
https://github.com/LukeberryPi/phived/assets/98068247/aaf19052-4a4b-4b5b-8b29-ccb468fc458d
some UI ideas. the floating "open external" icon helps with long links (or even a long task that doesn't show any of the link!). i also noticed that on the twitter compose box, when i type "twitter.com" it becomes styled as a link, but isn't actually clickable. it only becomes clickable when you post it. this interaction could be triggered on phived when you blur "from" the task (click another element or the background) to achieve a similar effect.
the aforementioned twitter compose link interaction illustrated
https://github.com/LukeberryPi/phived/assets/98068247/741b5085-bdce-4f43-bcd7-74da02d0fbff
i did code it after all! some updates. i don't want to support markdown because it sounds a bit overkill. if the goal is to support links, we display a button on hover if there's any links in the task. if you click the button you visit the link in a new tab.
any thoughts? @gabrielvsc
https://github.com/LukeberryPi/phived/assets/98068247/502b1e8f-c08f-4194-8d37-25f641d2b083
seeking public opinion rn
https://x.com/LukeberryPi/status/1765871164532899853?s=20
this is pretty much solved, closing
https://github.com/LukeberryPi/phived/assets/98068247/4eb7b6f3-9895-4f42-867b-3dfe98ebed1e