Let’s improve our linking functionality to make it easier to create references and connections, add support for auto-linking of typed/pasted URIs, and support for an oft-requested feature: open in a new tab.
When a user pastes or types a URI into the editor, it should automatically create a link, rather than having to add it manually. If possible, this feature should support https, http, and mailto schemes.
Ideal behavior for pasted links: automatic linking immediately after paste
Ideal behavior for typed links: automatic linking after the first whitespace after a link is typed.
Advanced link options
In the link editor, there should be a dropdown that opens an advanced link options menu containing options for links. This should always be closed by default when a user clicks on a link, but openable.
2.1 Open link in new tab option
In advanced options, users should be able to toggle between a link opening in a new tab or not. When on, links should have target=”_blank” appended.
2.2 Create connection from link option
In advanced options, users should be able to add the link as a connection. When they choose to do so, they should be able to choose the connection type and direction, see a preview of what the connection card will look like, edit the title/contributors/image of the connection, and save or cancel creation of the connection.
Once saved, the connection should automatically show up at the top or bottom of the Pub. When clicking on the link after it’s been created, users should have the ability to delete the connection and a convenient edit link that takes them to the Connection tab of the Pub. We do not need to implement full connection updating as part o this feature.
What is success?
Some, but not too much, usage of target=”_blank”
Increased usage of Connections
Implementation Checklists
How do people do this now and how does this change that?
Auto-linking doesn’t exist, so users effectively have to paste in a link, highlight it, click link again, and paste it in again.
There’s no way to target blank currently.
Connections must be added via the Connections tab, taking users away from the editor and creating redundancy.
What other parts of the system are impacted?
The editor’s link schema will likely need to support the option for opening links in new tab.
Shouldn’t impact exports, but we should check pagedjs exports to make sure links in new tabs carry over. And if there’s a setting for link targets in pandoc’s AST, we should support it.
Who has permissions to do what?
Same permissions as now — pub editors and above can do all of the described
Mobile support?
Check that the new advanced pub options works properly on mobile and doesn’t overflow the page — particularly the connection editor
Active states?
Checked/unchecked for new link toggle
Flow for adding connections can mostly duplicate the connection tab
Error states?
Should be handled by existing connection editor code, but we should display errors if a connection can’t be scraped or saved.
Future considerations
The design for advanced options should be expandable. We may want to expand advanced options to include semantic tagging schemes
At some point, we may want to expand the widget to include reference, block, section, and even Pub linking — that is, the ability to “search” the document for things to link to, and even to search PubPub to find Pubs to link to, a la google docs. This would be less of advanced options, more of turning the link bar into an omni search of sorts.
At some point, we may want to recognize pubpub URLs and automatically fill in their titles as the text of the link if one is pasted in, a la notion.
Designs, Mockups & Interactions
Figma Assets
UI sketches for the improved Link Popover is in ✅ this Figma file.
Creative Commons Attribution 4.0 International License (CC-BY 4.0)
