[WIKI-773] refactor: editor mention components and hooks

[aaryan610]

Description

This PR focuses on code refactor for mentions in editor for scalability.

Type of Change

• [x] Code refactoring

Summary by CodeRabbit

• Refactor

  • Unified mention prop contracts across editor packages and removed aggregate re-exports — import embeds directly.
  • Editor hook now accepts an enableAdvancedMentions option and exposes mention types and structured mention sections.

• New Features

  • Advanced mentions enabled in editor parsing and editor pages.

• Bug Fixes

  • User account label changed from "deactivated" to "suspended".

• UI

  • Mention hover replaced with a popover for improved layout and navigation.

[coderabbitai[bot]]

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Changed mention-related exported types and component prop signatures to a callback-style prop; moved mention-type config into a hook and exposed it; removed several barrel re-exports; replaced Popper-based mention UI with a Popover; tightened TIssue.state__group typing.

Changes

Cohort / File(s)	Summary
Type definitions packages/editor/src/core/types/mention.ts	Added TCallbackMentionComponentProps, removed TMentionComponentProps, and updated TMentionHandler.renderComponent to accept the new type.
Editor component signatures (space & core) apps/space/ce/components/editor/embeds/mentions/root.tsx, apps/space/core/components/editor/embeds/mentions/root.tsx, apps/web/core/components/editor/embeds/mentions/root.tsx	Switched exported components to use TCallbackMentionComponentProps / local alias TEditorMentionComponentProps instead of TMentionComponentProps; adjusted imports and exported alias in web CE.
Web CE mention component apps/web/ce/components/editor/embeds/mentions/root.tsx	Replaced TMentionComponentProps import with TCallbackMentionComponentProps; added export type TEditorMentionComponentProps = TCallbackMentionComponentProps; updated component signature.
Export barrel removals apps/web/ce/components/editor/embeds/index.ts, apps/web/ce/components/editor/index.ts, apps/web/ee/components/editor/index.ts, apps/web/ee/constants/editor.ts	Removed export * from "./mentions" and export * from "./embeds" style re-exports and equivalent CE→EE re-exports, reducing aggregate public exports.
Editor mention type constant removed apps/web/ce/constants/editor.ts	Removed exported EDITOR_MENTION_TYPES constant and its import of TSearchEntities.
Hook: additional mentions apps/web/ce/hooks/use-additional-editor-mention.tsx	Hook now accepts TUseAdditionalEditorMentionArgs (enableAdvancedMentions); added TAdditionalEditorMentionHandlerReturnType; updateAdditionalSections returns { sections: TMentionSection[] }; added memoized editorMentionTypes (["user_mention"]) and returned it.
Hook: editor mention usage apps/web/core/hooks/editor/use-editor-mention.tsx	Replaced hard-coded EDITOR_MENTION_TYPES with editorMentionTypes from useAdditionalEditorMention; added enableAdvancedMentions arg (default false); merged additional sections with local suggestions; updated error text and deps.
User mention UI apps/web/core/components/editor/embeds/mentions/user.tsx	Replaced Popper-based hover tooltip with a Popover component; switched Next.js Link to react-router Link; removed popper refs/state; renamed placeholder to "@suspended user"; adjusted layout/styling.
Types: issue state group packages/types/src/issues/issue.ts	Changed TIssue.state__group from `string
Misc usage / enabling advanced mentions apps/web/core/components/pages/editor/editor-body.tsx, apps/web/core/components/editor/document/editor.tsx, apps/web/core/hooks/use-parse-editor-content.ts	Enabled advanced mentions by passing enableAdvancedMentions: true to useEditorMention; removed default React import in one file; initialized additional mention hook with advanced flag in parsing flow.

Sequence Diagram(s)

sequenceDiagram
    participant Editor as Editor Component
    participant Hook as useEditorMention
    participant AddHook as useAdditionalEditorMention

    Editor->>Hook: Request mention sections (enableAdvancedMentions?)
    Hook->>AddHook: Call with enableAdvancedMentions
    AddHook-->>Hook: Return { sections: [...] } and editorMentionTypes
    Hook->>Hook: Build local suggestions using editorMentionTypes
    Hook-->>Editor: Return merged sections

sequenceDiagram
    participant User as User
    participant OldUI as Popper-based UI
    participant NewUI as Popover-based UI

    rect rgb(255,245,240)
    Note over User,OldUI: Previous flow (Popper)
    User->>OldUI: Hover mention
    OldUI->>OldUI: Manage refs & positioning
    OldUI-->>User: Render positioned tooltip
    end

    rect rgb(240,255,245)
    Note over User,NewUI: New flow (Popover)
    User->>NewUI: Hover/click mention (react-router Link)
    NewUI->>NewUI: Popover manages state & placement
    NewUI-->>User: Render Popover.Panel card
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Verify propagation of TCallbackMentionComponentProps/alias across packages and that render callbacks match new signature.
• Check all call sites and consumers of useAdditionalEditorMention and useEditorMention for the new arg and returned editorMentionTypes.
• Confirm removed re-exports do not break imports elsewhere.
• Review user.tsx Popover for accessibility, keyboard behavior, and routing correctness.
• Validate TIssue.state__group change against serialization, storage, and consumers.

Poem

🐇 I hopped through types and trimmed the rails,
Mentions now callback, and popovers tell tales.
Hooks memoize seeds, sections bloom anew,
State groups found their form — a tidier view.
— a rabbit, nibbling the changelog carrot 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description identifies this as a code refactoring PR for editor mentions, but lacks detailed explanation of scope, architectural changes, testing performed, or potential impact.	Expand the description to explain what was refactored, why the changes improve scalability, what was tested, and any breaking changes or migration steps needed.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: refactoring editor mention components and hooks, which is central to all modifications across multiple files in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch refactor/editor-mention

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 991b5e770879942a0d17df379214fdb95e10222d and 8ecaba3f5889f6847bbc01b4f242506278a92ff2.

📒 Files selected for processing (2)

• apps/web/ee/components/editor/index.ts (0 hunks)
• apps/web/ee/constants/editor.ts (0 hunks)

💤 Files with no reviewable changes (2)

• apps/web/ee/constants/editor.ts
• apps/web/ee/components/editor/index.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[makeplane[bot]]

Linked to Plane Work Item(s)

• [WIKI-773] Refactor existing components and hooks

This comment was auto-generated by Plane