mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 08:42:09 +08:00
50f80d9809
This PR introduces a modern floatkit-based autocomplete system for the core composer (both rich text / markdown modes), intended to replace the legacy jQuery-based implementation. This will be enabled via a site setting for now. All tests that cover the legacy implementation are duplicated with the site setting enabled to ensure they keep functional parity. ### What's changed: * The autocomplete menu remains open between searches while typing within a search term, instead of closing and reopening (this looks like the menu flickering, especially if the searches are quickly resolving). * Flip behaviour now works (the autocomplete menu should never overlap with the header, and will appear below the cursor if there's not enough space to appear fully in the viewport) * On any mouse-down event outside the menu, the menu will immediately close (previously, it stayed open during the grippie drag up/down of the composer drawer, and closes on mouse-up) * Preserves exact CSS structure and selectors for existing themes/plugins * Better use of native browser APIs * [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) API is used for handling scroll within the hashtag autocomplete menu instead of manual calculation * [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame) API is used to better time the opening of the autocomplete menu with repaint during pasting of autocompletable terms * `position: absolute` CSS was removed - this didn't seem to affect the old autocomplete during testing, and keeping it broke positioning for the Floatkit-based autocomplete ### What's the same: * All templates specific to the different types of autocomplete (user & group / hashtag / emoji) remain exactly the same * we update the selected class that's used to highlight the item in the autocomplete menu while navigating it via keyboard the same way we do in the old autocomplete - it's fairly imperative, but allows us to avoid a deeper refactor (including an entirely new set of templates)
30 lines
683 B
SCSS
Vendored
30 lines
683 B
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.fk-d-menu[data-identifier="d-autocomplete"] {
|
|
z-index: z("modal", "dialog") + 1;
|
|
animation: fade-in ease 0.25s 1 forwards !important;
|
|
|
|
--d-border-radius: var(--space-2);
|
|
|
|
// Override compose.scss autocomplete styles to remove double styling
|
|
// Let d-menu handle the container border/shadow/radius
|
|
.autocomplete {
|
|
border: none;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
|
|
ul {
|
|
li {
|
|
&:first-of-type a {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
&:last-of-type a {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
