Slideshow Guide Tool Update: Automatic Detection of External Links
Last month I built a web tool for creating slideshow presentations. Unlike Google Slides, my tool is focused around making guides. The slide format lends itself to being viewed either in a vertical scroll with slides acting as cards or in a carousel, suitable for a YouTube video guide. Currently the only viewership experience available is the carousel version with fullscreen for use as a prop to record video guides, but in the next couple of weeks I plan to implement the vertical scroll as well.
So far my favorite feature to implement has been the drag-and-drop (DnD) functionality which allows a slideshow creator to reorder their slides. I looked into many DnD packages for React but ultimately decided to build the functionality from scratch. The actual implementation ended up being quite small — only 82 lines of code — but the fun part was the planning stage beforehand. I grabbed a piece of paper and over dinner jotted down in meticulous detail all the functionality I desired and to which components each bit should belong. My careful planning paid off when I sat down to code the thing; everything fell right into place and the feature worked immediately, on the first try. Now that’s a good (and rare) feeling.
My idea here today is to plan the next feature I want to add: automatic links from slides to a particular external database. This will be additionally powerful for users of my tool because the external database offers a convenient tool to enhance links with icons and mouseover tooltip functionality. Specifically, I want any text formatted inside square brackets to automatically link out to the external database if such an entity exists there.
But how to do this? The text content area already uses the React-Markdown library so I have to ensure anything I do to the text on each slide remains compatible with Markdown in its original format. Probably the best way to detect and build these links is to scan the text when it enters Redux state, then build any links required right away. That way the user can see whether their link worked and whether it was the correct one right away before submitting their guide — key for user experience as it would be frustrating to have to submit your guide before being able to check your links.
Plan:
1) When slide text content enters Redux state, check for square brackets.
This would be an onBlur event.
2) If text contains square brackets, check contents of those brackets for a matching item in the database.
3) If no matching item, check for a matching spell.
4) If no matching spell, check for a matching creature.
5) First match found: replace text with DB link in state, otherwise do nothing.
Item is most likely, spell 2nd most likely, creature 3rd most likely assuming this tool will be used primarily for guide creation as it is designed. Scanning all 3 tables together is an option as well. Breaking up the scan into these pieces seems both simpler and faster to me, but is that so?
Also anticipating possible edge cases here: if an item and spell both have the same name, this will always link out to the item. How much of an inconvenience might that be? Furthermore, this allows no customization of links: the guide creator cannot use shorthand; links will build only to exact matches. That latter case should be of little to no concern as guide creators can manually build out a link if they want to use a name that isn’t an exact match. I think the priority of items > spells > creatures should provide a minimum amount of issues with regards to the same-name edge cases.
