michael / michael/editable

Deep-linking to any content inside a page

Open
#57 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Svelte
Stars
1.8k
Forks
150
Avg merge
11h 46m
Merged PRs (30d)
8

Description

Since everything has an id already the first thing to do is to expose id="cHakxekvzavEawKMsPmfVWr" (not just data-id) on all the elements. Then you can start deep linking to /projects#cHakxekvzavEawKMsPmfVWr etc.

Next step - UX:

In order to "grab" those deep links (e.g. by opening the page you want to link to in another tab) I think EW might need a right-click context menu feature.

Image

This should even work for normal visitors in read mode. But for editors it's particularly a cool tool to deep link from one page to another reliably.

Still I do have some concerns:

  • overriding the native context menu may cause usability issues (that's a serious one to me)
    • e.g. select some text, right click copy
    • I'd need to include all those actions in the custom context menu (can I really include them all, and will they work? E.g. inspect or show page source?
  • There's already "Link to highlight" functionality in browsers for deep linking. So the question is: why not just promote using that?
    • what's better about EW deep-linking is that it allows linking to structural elements in a robust way, not just text anchors (which may not work anymore as soon as the page's content changes)

More considerations:

  • I don't want to spoil the link tool with deep linking (that will get messy and confusing, and you don't want to do deep linking so often)
  • I don't want any UI clutter. E.g. in read mode some tooltips like the classic hover over heading to then grab the link. Because this will never work with all the possible layouts. I needs to be UI-less.
  • Honestly at this moment I can't hink of a better gesture than right click, because in viewer-mode this allows you to "reveal" the closest parent block of where you clicked (which is the thing to be highlighted)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue names the /projects route, existing data-id attributes, hash URLs, and viewer/editor modes; start by tracing how these elements are rendered and how right-click behavior currently works. No file or test is named, and the open UX concerns need resolution before done can be defined.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.