stable
Clone or download
Purpose ======= When a section content contains some cross references, then when we mouseover them, a tooltip should be displayed, like it is done elsewhere, for example in the artifact view. Implementation notes ==================== Update of Tooltip library ------------------------- *Usage of data-href attribute* Initially the `loadTooltips` is looking for a.cross-reference[href]. However in the context of prosemirror, cross references are not `a` element, they are `span.cross-reference[data-href]. (Atual link is reached via the links popover). `loadTooltips` no looks for `href` or `data-href` attributes. Note: in order to match `loadTooltips` expectations, the Decoration classname is now `cross-reference` instead of `cross-reference-link` *Storage of Tooltips* Every time we call `loadTooltips` on a DOM element, a new tooltip is created for each suitable links in the element. This works fine when this method is called once (for example in an onMounted Vue hook). However in the context of prosemirror, at every strokes there is a chance that a cross reference has been updated so the naive(1) approach is to call `loadTooltips()` every time the view is updated. And due to the contentEditable nature of prosemirror, existing links are still there in the DOM, meaning that a new tooltip will be created each time a transaction appear. This means that if I have "See ref #123" and change it to "Please see ref #123" ([S][Please s]ee ref #123), then about ten tooltips stacked on each other will be displayed on mouse over. In order to fix this issue, now `loadTooltips` will remove previous tooltips before creating new ones. (1) "Naive approach" because maybe there is a way to detect if the changes involves cross references so that we can prevent the call to `loadTooltips` if it is not needed. However, dealing with prosemirror API to detect this is maybe worst than parsing the whole content with querySelectorAll and recreating tooltips. The actual drawback of the current implementation is that if a user hover a cross ref a REST call will be made to retrieve the tooltip content, if the section description is changed, then another REST call will be made on next mouse hover, even if the target didn't change. Anyway, the current approach is considered good enough as a first step. First make it works, then make it better they said. *Update of title attribute* When a cross reference is converted to a link by Tuleap, a title attribute is added to the link. For example for artifact references, the title of the artifact is the title attribute. This title does not bring much information that is why Tooltip has been created in the first place, to replace this title. (This has been done with a graceful approach: if the REST call to retrieve the tooltip fails for whatever reason, then we still display the legacy title attribute.) This concept of replacing the title is not compatible with prosemirror. Prosemirror is using a contentEditable area, and observes any changes to the DOM. A typical change is inserting/deleting new characters. However forcing an element to have the attribute `title` set to an empty string is triggering as well a DOM change. If we don't do anything then mouseover on a cross reference will set the title to `""`, which cause a DOM change, which cause a PluginView update, which cause a `loadTooltips`, which cause a mouseover on the cross reference since we didn't have the time to move the mouse, which set the title to `""`, which will end in an endless loop. Since in our context we don't have any title attributes, the proposal here is to not change the title attribute if there is none. Testing suggestions =================== * Tooltips should be displayed at initial load of the document, without having to enter in edit mode * Tooltips should be displayed for new references currently entered in the editor * Tooltips should still be displayed when user don't have write permission on artidoc * Title attribute should not be displayed in artifact view #NoRegression * No regression in tooltip display in TTM: xref in step descriptions, or xref in linked requirements/bugs for an execution Part of story #40114: Cross references in Artidoc Change-Id: I86d91897904f18ccf8db40471aaa449b3fa5c652
Modified Files
Name | ||||
---|---|---|---|---|
M | lib/frontend/prose-mirror-editor/package.json | +1 | −0 | Go to diff View file |
M | lib/frontend/prose-mirror-editor/pnpm-lock.yaml | +3 | −0 | Go to diff View file |
M | lib/frontend/prose-mirror-editor/src/helpers/create-cross-reference-decoration.ts | +1 | −1 | Go to diff View file |
M | lib/frontend/prose-mirror-editor/src/plugins/extract-referencies/cross-reference-decorator.test.ts | +1 | −1 | Go to diff View file |
M | lib/frontend/prose-mirror-editor/src/plugins/extract-referencies/integration/references-decorator.test.ts | +1 | −1 | Go to diff View file |
M | lib/frontend/prose-mirror-editor/src/plugins/input/input.ts | +5 | −1 | Go to diff View file |
M | lib/frontend/prose-mirror-editor/themes/editor.scss | +1 | −1 | Go to diff View file |
M | lib/frontend/tooltip/package.json | +3 | −0 | Go to diff View file |
M | lib/frontend/tooltip/pnpm-lock.yaml | +5 | −0 | Go to diff View file |
M | lib/frontend/tooltip/src/create-tooltip.ts | +23 | −12 | Go to diff View file |
A | lib/frontend/tooltip/src/element-with-crossref-href.test.ts | +47 | −0 | Go to diff View file |
A | lib/frontend/tooltip/src/element-with-crossref-href.ts | +33 | −0 | Go to diff View file |
M | lib/frontend/tooltip/src/load-tooltips.test.ts | +85 | −11 | Go to diff View file |
M | lib/frontend/tooltip/src/load-tooltips.ts | +28 | −9 | Go to diff View file |
M | lib/frontend/tooltip/src/type.ts | +9 | −0 | Go to diff View file |