In Your Notes (e.g. for a Vocab), the ‘Add/edit hyperlink’ popup (I’ll refer to it as EditLink) for an existing link (i.e. when editing a link) will close without updating after editing the link in the “Where should this link go to?” text-box, under specific circumstances. Reproduction:
- Copy some editor-formatted hyperlink into the clipboard.
- E.g.: Click the “Copy a link to this page to the clipboard” button on a particular item’s info page.
- Within the Notes editor, on an empty line, place some normal text which includes some whitespace.
- E.g.: Type a single Space character, ’
'.
- Paste the editor-formatted hyperlink from step (1) into the editor, after the whitespace-containing text from step (2).
- Delete some portion of the beginning of the hyperlink text, but without deleting everything to the beginning of the editor’s text line (this is why the whitespace is added in step 2, to make this easier to reproduce).
- E.g.: Sample line, with a ‘caret’ character ‘
‸
’ to indicate the resulting position of the text cursor:
’ ‸/vocabs/如何
’
- Key observations to note, immediately after the deletion (NB: do not move the cursor at this point, or click anywhere else after the deletion):
- The EditLink button [
] is ‘active’ and highlighted (mine shows as blue), indicating that the editor thinks there is a link ‘underneath’ the text cursor, ready to edit.
As further evidence of this state, the “Remove hyperlink” button is visible (and also highlighted, e.g. blue).
Compare to when the editor does not think there’s a link under the text cursor, the EditLink button appears plain (e.g. white), and the Remove button is not visible.
- The blinking text cursor itself (I’m on the latest Firefox; appearance may differ) is highlighted (again, blue in my case) as if it were over a hyperlink.
- Click the EditLink button to bring up the EditLink popup.
- Modify the link target in the textbox.
- E.g.: Sample edited link-target text:
/vocabs/如何
- Accept the change, either by pressing [Save Link] or by pressing Enter on the keyboard.
- E.g.: Sample after failed edit, with caret character:
’ ‸/vocabs/如何
’
- Key observations to note immediately after the popup closes (NB: do not move cursor or click anywhere at this point):
- The flashing text cursor/caret is now plain (e.g. white) rather than highlighted (e.g. blue). This would seem to indicate that the editor now thinks the text cursor is not over a hyperlink anymore. (Compare with sample line from step (4), where cursor/caret is highlighted.)
- However, the EditLink button is still highlighted (blue), and the RemoveLink button is still visible. This would seem to indicate that the editor thinks the text cursor is over a hyperlink.
- This ‘paradoxical’ UI state may indicate some flawed/inconsistent logic under the hood. Ideally, the visual cues in the editor should be based on the same underlying logic, and thus should always be consistent with one another.
- The hyperlink within the editor is not automatically selected. There is no particular text selection.
Compare to when a hyperlink has been successfully edited and saved. The text of the hyperlink is automatically selected. Sample, after a successful EditLink, starting with cursor/caret somewhere within the hyperlink text:
’ /vocabs/如何
’
Note that the flashing text cursor is now replaced by the automatically selected text which encompasses the whole of the hyperlink text.
- This difference in UI is helpful to notice when an EditLink has failed (no auto-select; cursor goes plain) or succeeded (auto-select replaces cursor). But, to really be sure that the EditLink has failed, …
- Click the EditLink button again. The EditLink popup shows, but the previously-edited link text has reverted to its original value before the EditLink in step (5).
Sample link text:
https://bunpro.jp/vocabs/如何
Expected:
/vocabs/如何
This bug was tricky to reproduce. There are many ways in which you do something very similar (such deleting all the way to the beginning of the editor’s text line) and the EditLink will work.
My hunch is that it has to do with the edge-case of when an editor action (in this case deleting text from the beginning of the hyperlink) results in the text cursor/caret landing at the very beginning of the hyperlink, on the boundary between not-a-link on the left, and is-a-link on the right.
E.g. I tried to see if similar things happen at the end of a hyperlink, and it did not reproduce. I also got confused when there was no plain text/whitespace in front of the hyperlink prior to deletion, as it seems to work okay if the beginning of the hyperlink happens to also be the beginning of the line of text.
There is also the curious behaviour when you use keyboard navigation (e.g. left and right arrows on the keyboard) to manually position the cursor to the beginning of any hyperlink. In this kind of situation, the editor thinks that the text cursor is not over a hyperlink, and so the EditLink button is not highlighted (i.e. it is plain, e.g. white), and thus clicking on it does not do an ‘edit link’, but rather an ‘add link’ (with a blank/empty textbox).
The reason I kept coming across this bug is because I’ve been using Notes to add links between Grammar items and their corresponding Vocab items (if they exist), formatted like this:
Self: /grammar_points/如何
Vocab: /vocabs/如何
This starts by copying the link from the “Copy a link to this page to the clipboard” button, pasting it after the text label such as "Self: ", and then deleting the ‘noisy’ https://bunpro.jp
part off the front of the hyperlink.
Then, just to be ‘consistent’ (not really necessary, but whatever) I would then immediately EditLink, and also remove the same https://bunpro.jp
from the target-link text, leaving a root-relative URL like /grammar_points/如何.
But when I would then Save Link the edit, and check again later, the URL would be unedited from the original https://bunpro.jp/grammar_points/如何
.
I know that making this specific kind of change (absolute to root-relative) is not really necessary – and in hindsight it has some downsides which I’m not going to bother with anymore – but the fact remains:
Any edit to the URL after deleting the front text of a hyperlink will fail to be saved in this edge-case circumstance. So, the bug remains, even if I stop doing this particular kind of link edit.