File size: 4,136 Bytes
b0183f0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | # Technical Notes: @Mentions Implementation
## Problem
The initial implementation (v1.2.0) sent mentions as plain text using the `message` field:
```json
{
"message": "Hey @john_designer please review this"
}
```
**Result:** Mentions appeared as plain text in Figma, not as clickable user objects. Users were not notified.
## Solution
Version 1.2.1 implements the correct format using Figma's `message_meta` structure:
```json
{
"message_meta": [
{"t": "Hey "},
{"t": "@john_designer", "mention": "user_id_here"},
{"t": " please review this"}
]
}
```
**Result:** Mentions appear as clickable user objects in Figma. Users receive notifications.
## Implementation Details
### 1. Message Parsing
The `parseMessageWithMentions()` function:
- Uses regex `/@@\w+/g` to find all @mentions
- Splits the message into segments (text + mentions)
- Creates a `message_meta` array with proper structure
### 2. User ID Resolution
The `getCommentUsers()` function now returns:
```javascript
{
users: [...], // Array of user objects for display
usersMap: Map() // Map of handle → user_id for mentions
}
```
### 3. Automatic Detection
Both `postFigmaComment()` and `replyToFigmaComment()`:
- Detect if message contains `@\w+` pattern
- If YES: Fetch users, parse mentions, use `message_meta`
- If NO: Use simple `message` field (backward compatible)
## Message Format Comparison
### Without Mentions (Simple)
```json
{
"message": "This looks great!",
"client_meta": { ... }
}
```
### With Mentions (message_meta)
```json
{
"message_meta": [
{"t": "Hey "},
{"t": "@john", "mention": "123456789"},
{"t": " and "},
{"t": "@maria", "mention": "987654321"},
{"t": " please review"}
],
"client_meta": { ... }
}
```
## Discovery Process
This format was discovered through:
1. Researching Figma API documentation (mentions not documented)
2. Finding community forum discussions confirming mentions work
3. Learning about `message_meta` format from formatting discussions
4. Reverse-engineering the web client request structure
5. Implementing based on pattern: `{t: "text", mention: "user_id"}`
## Important Notes
### Not Officially Documented
- The `message_meta` format is **not in official Figma API docs**
- This implementation is based on reverse-engineering the web client
- Figma uses this format internally, so it's stable in practice
- No official guarantee of long-term support
### Fallback Behavior
- If username not found: keeps `@username` as plain text
- If no mentions detected: uses simple `message` field
- Maintains backward compatibility
### Limitations
- Can only mention users who have previously commented
- Username must match exactly (case-sensitive in implementation)
- Regex pattern `\w+` means usernames with special chars may not work
## Future Improvements
Potential enhancements:
1. Cache user list to avoid repeated API calls
2. Support for mentioning users who haven't commented yet
3. Better username matching (fuzzy search)
4. Support for Figma's other formatting options (bold, italic, etc.)
## References
- [Figma Forum: User mentions in REST API](https://forum.figma.com/t/user-mentions-in-rest-api-post-comments/51474)
- [Figma Forum: Format comments messages](https://forum.figma.com/ask-the-community-7/format-comments-messages-using-the-figma-rest-api-40994)
- [Figma Comments API Endpoint](https://developers.figma.com/docs/rest-api/comments-endpoints/)
## Example Usage
```javascript
// Input from user
const message = "Hey @john_designer please review the @maria_ux color updates";
// Internal processing
// 1. Detect mentions: ["john_designer", "maria_ux"]
// 2. Fetch users and get IDs
// 3. Transform to message_meta
// Output to Figma API
{
"message_meta": [
{"t": "Hey "},
{"t": "@john_designer", "mention": "user_id_1"},
{"t": " please review the "},
{"t": "@maria_ux", "mention": "user_id_2"},
{"t": " color updates"}
]
}
```
## Version History
- **v1.2.0**: Initial @mentions support (plain text only - buggy)
- **v1.2.1**: Fixed @mentions using proper `message_meta` format (working)
|