Files
AFFiNE-Mirror/packages/frontend/i18n
Peng Xiao 532ea6af07 feat(core): support mentions in comments (#13000)
fix AF-2706, PD-2687

<img width="412" alt="image"
src="https://github.com/user-attachments/assets/b796f543-1c42-452a-8f65-9dddfa751ab4"
/>
<img width="384" alt="image"
src="https://github.com/user-attachments/assets/7ac3bcc5-6cf1-49bb-9786-1eb33fad7225"
/>
<img width="347" alt="image"
src="https://github.com/user-attachments/assets/02babd37-4740-4770-8be8-e253be18bb5a"
/>

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Added support for mentions in comments and replies, including
detection and notification when users are mentioned.
* Introduced new notification types for comments and comment mentions,
with dedicated notification components and localized messages.
  * Enabled navigation directly to specific comments from notifications.
* Sidebar comment tab and comment features now depend on both feature
flags and server support.

* **Improvements**
  * Comment creation and reply workflows now support optional mentions.
* Menu configurations for linked widgets can now selectively include
specific menu groups.
* Enhanced navigation helper with a function to jump directly to a page
comment.
  * Improved comment entity lifecycle management for proper cleanup.

* **Bug Fixes**
* Improved lifecycle management for comment entities to ensure proper
cleanup.

* **Style**
* Updated mention styling to use a dynamic font size based on theme
variables.
  * Adjusted comment preview container underline highlight color.

* **Localization**
* Added English translations for comment and mention notification
messages.

* **Configuration**
* Updated feature flag logic for comment features, making configuration
more flexible and environment-aware.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->





#### PR Dependency Tree


* **PR #13000** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
2025-07-03 06:44:14 +00:00
..
2025-06-24 14:43:39 +08:00
2024-06-20 02:19:41 +00:00

i18n

Usages

  • Update missing translations into the base resources, a.k.a the src/resources/en.json
  • Replace literal text with translation keys
import { useI18n, LOCALES } from '@affine/i18n';
// src/resources/en.json
// {
//     'Text': 'some text',
//     'Switch to language': 'Switch to {{language}}', // <- you can interpolation by curly brackets
// };

const App = () => {
  const i18n = useI18n();
  const changeLanguage = (language: string) => {
    i18n.changeLanguage(language);
  };

  return (
    <div>
      <div>{i18n['Workspace Settings']()}</div>
      <>
        {LOCALES.map(option => {
          return (
            <button
              key={option.name}
              onClick={() => {
                changeLanguage(option.tag);
              }}
            >
              {option.originalName}
            </button>
          );
        })}
      </>
    </div>
  );
};

How the i18n workflow works?

  • When the src/resources/en.json(base language) updated and merged to the develop branch, will trigger the languages-sync action.
  • The languages-sync action will check the base language and add missing translations to the Tolgee platform.
  • This way, partners from the community can update the translations.

How to sync translations manually

  • Set token as environment variable
export TOLGEE_API_KEY=tgpak_XXXXXXX
  • Run the sync-languages:check to check all languages
  • Run the sync-languages script to add new keys to the Tolgee platform
  • Run the download-resources script to download the latest full-translation translation resources from the Tolgee platform

References