You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* feat: add support for notion callout blocks
* feat: add GFM alert support and make emoji callouts optional
* refactor: make GFM alert map use Notion type emojis
* fix: remove callout children, improve typings
* refactor: Use notion client ApiColor type for allowed callout colors
* fix: cumulative update of dependencies
* chore: update ts-expect-error comment
* chore: update ci workflows
* chore: change recommended engine version
---------
Co-authored-by: Federico Grandi <fgrandi30@gmail.com>
- Supports Notion callouts when blockquote starts with an emoji (optional, enabled with `enableEmojiCallouts`)
23
+
- Automatically maps common emojis and alert types to appropriate background colors
24
+
- Preserves formatting and nested blocks within callouts
21
25
- Tables
22
26
- Equations
23
27
- Images
@@ -85,6 +89,10 @@ hello _world_
85
89
***
86
90
## heading2
87
91
* [x] todo
92
+
93
+
> 📘 **Note:** Important _information_
94
+
95
+
> Some other blockquote
88
96
`);
89
97
```
90
98
@@ -128,6 +136,11 @@ hello _world_
128
136
]
129
137
}
130
138
},
139
+
{
140
+
"object": "block",
141
+
"type": "divider",
142
+
"divider": {}
143
+
},
131
144
{
132
145
"object": "block",
133
146
"type": "heading_2",
@@ -172,6 +185,248 @@ hello _world_
172
185
],
173
186
"checked": true
174
187
}
188
+
},
189
+
{
190
+
"type": "callout",
191
+
"callout": {
192
+
"rich_text": [
193
+
{
194
+
"type": "text",
195
+
"text": {
196
+
"content": "Note:"
197
+
},
198
+
"annotations": {
199
+
"bold": true,
200
+
"strikethrough": false,
201
+
"underline": false,
202
+
"italic": false,
203
+
"code": false,
204
+
"color": "default"
205
+
}
206
+
},
207
+
{
208
+
"type": "text",
209
+
"text": {
210
+
"content": " Important "
211
+
}
212
+
},
213
+
{
214
+
"type": "text",
215
+
"text": {
216
+
"content": "information"
217
+
},
218
+
"annotations": {
219
+
"bold": false,
220
+
"strikethrough": false,
221
+
"underline": false,
222
+
"italic": true,
223
+
"code": false,
224
+
"color": "default"
225
+
}
226
+
}
227
+
],
228
+
"icon": {
229
+
"type": "emoji",
230
+
"emoji": "📘"
231
+
},
232
+
"color": "blue_background"
233
+
}
234
+
},
235
+
{
236
+
"type": "quote",
237
+
"quote": {
238
+
"rich_text": [
239
+
{
240
+
"type": "text",
241
+
"text": {
242
+
"content": "Some other blockquote"
243
+
},
244
+
"annotations": {
245
+
"bold": false,
246
+
"strikethrough": false,
247
+
"underline": false,
248
+
"italic": false,
249
+
"code": false,
250
+
"color": "default"
251
+
}
252
+
}
253
+
]
254
+
}
255
+
}
256
+
]
257
+
</pre>
258
+
</details>
259
+
260
+
### Working with blockquotes
261
+
262
+
Martian supports three types of blockquotes:
263
+
264
+
1. Standard blockquotes:
265
+
266
+
```md
267
+
> This is a regular blockquote
268
+
> It can span multiple lines
269
+
```
270
+
271
+
2. GFM alerts (based on [GFM Alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)):
272
+
273
+
```md
274
+
> [!NOTE]
275
+
> Important information that users should know
276
+
277
+
> [!WARNING]
278
+
> Critical information that needs attention
279
+
```
280
+
281
+
3. Emoji-style callouts (optional) (based on [ReadMe's markdown callouts](https://docs.readme.com/rdmd/docs/callouts)):
282
+
283
+
```md
284
+
> 📘 **Note:** This is a callout with a blue background
285
+
> It supports all markdown formatting and can span multiple lines
286
+
287
+
> ❗ **Warning:** This is a callout with a red background
288
+
> Perfect for important warnings
289
+
```
290
+
291
+
#### GFM Alerts
292
+
293
+
GFM alerts are automatically converted to Notion callouts with appropriate icons and colors:
294
+
295
+
- NOTE (📘, blue): Useful information that users should know
296
+
- TIP (💡, green): Helpful advice for doing things better
297
+
- IMPORTANT (☝️, purple): Key information users need to know
298
+
- WARNING (⚠️, yellow): Urgent info that needs immediate attention
299
+
- CAUTION (❗, red): Advises about risks or negative outcomes
300
+
301
+
#### Emoji-style Callouts
302
+
303
+
By default, emoji-style callouts are disabled. You can enable them using the `enableEmojiCallouts` option:
304
+
305
+
```ts
306
+
const options = {
307
+
enableEmojiCallouts: true,
308
+
};
309
+
```
310
+
311
+
When enabled, callouts are detected when a blockquote starts with an emoji. The emoji determines the callout's background color. The current supported color mappings are:
312
+
313
+
- 📘 (blue): Perfect for notes and information
314
+
- 👍 (green): Success messages and tips
315
+
- ❗ (red): Warnings and important notices
316
+
- 🚧 (yellow): Work in progress or caution notices
317
+
318
+
All other emojis will have a default background color. The supported emoji color mappings can be expanded easily if needed.
319
+
320
+
If a blockquote doesn't match either GFM alert syntax or emoji-style callout syntax (when enabled), it will be rendered as a Notion quote block.
321
+
322
+
##### Examples
323
+
324
+
Standard blockquote:
325
+
326
+
```ts
327
+
markdownToBlocks('> A regular blockquote');
328
+
```
329
+
330
+
<details>
331
+
<summary>Result</summary>
332
+
<pre>
333
+
[
334
+
{
335
+
"object": "block",
336
+
"type": "quote",
337
+
"quote": {
338
+
"rich_text": [
339
+
{
340
+
"type": "text",
341
+
"text": {
342
+
"content": "A regular blockquote"
343
+
}
344
+
}
345
+
]
346
+
}
347
+
}
348
+
]
349
+
</pre>
350
+
</details>
351
+
352
+
GFM alert:
353
+
354
+
```ts
355
+
markdownToBlocks('> [!NOTE]\n> Important information');
0 commit comments