Skip to content

DEV: floatkit autocomplete for d-editor #33513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 57 commits into from
Jul 30, 2025

Conversation

tyb-talks
Copy link
Contributor

@tyb-talks tyb-talks commented Jul 8, 2025

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 API is used for handling scroll within the hashtag autocomplete menu instead of manual calculation
    • 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)

@tyb-talks tyb-talks force-pushed the dev-floatkit-autocomplete-d-editor branch 6 times, most recently from 0604b4d to 13a55b6 Compare July 16, 2025 10:07
@github-actions github-actions bot added the i18n PRs which update English locale files or i18n related code label Jul 16, 2025
@tyb-talks tyb-talks force-pushed the dev-floatkit-autocomplete-d-editor branch 4 times, most recently from 15ffca8 to bfadc9c Compare July 20, 2025 03:41
@tyb-talks tyb-talks marked this pull request as ready for review July 21, 2025 04:26
@tyb-talks tyb-talks force-pushed the dev-floatkit-autocomplete-d-editor branch 5 times, most recently from f3b4984 to 05e2571 Compare July 24, 2025 04:02
@tyb-talks tyb-talks force-pushed the dev-floatkit-autocomplete-d-editor branch 3 times, most recently from 46e8049 to 03b9759 Compare July 28, 2025 09:35
@github-actions github-actions bot added the chat PRs which include a change to Chat plugin label Jul 28, 2025
tyb-talks added 23 commits July 29, 2025 17:41
…ement end position is recalculated at completion time and does not delete based on a cached value that may result in deletion of whole text
…ender logic to DAutocompleteResults component
…ling to selected result, call onRender on insert, and maintain selected styles between searches that return the same results
… whether to allow the autocomplete menu to trigger
@tyb-talks tyb-talks force-pushed the dev-floatkit-autocomplete-d-editor branch from 2b58dfc to c6e05bc Compare July 29, 2025 09:42
@tyb-talks tyb-talks requested a review from davidtaylorhq July 29, 2025 10:23
Copy link
Member

@davidtaylorhq davidtaylorhq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me! 🚀

For anyone following along, we have plans to make further improvements here after this PR is merged. For example: the results themselves will eventually be rendered using an Ember template instead of building raw HTML strings.

@tyb-talks tyb-talks merged commit 50f80d9 into main Jul 30, 2025
16 checks passed
@tyb-talks tyb-talks deleted the dev-floatkit-autocomplete-d-editor branch July 30, 2025 00:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chat PRs which include a change to Chat plugin i18n PRs which update English locale files or i18n related code
Development

Successfully merging this pull request may close these issues.

3 participants