@jackuait/blok 0.8.2 → 0.8.3-beta.2

package/src/components/i18n/locales/th/messages.json

@@ -84,6 +84,36 @@
   "tools.table.clickToAddColumn": "คลิกเพื่อเพิ่มคอลัมน์ใหม่",
   "tools.table.dragToAddRemoveColumns": "ลากเพื่อเพิ่มหรือลบคอลัมน์",
   "blockSettings.convertWithChildrenWarning": "บล็อกนี้มี {count} บล็อกที่ซ้อนอยู่ การแปลงจะย้ายบล็อกเหล่านั้นขึ้นสู่ระดับบนสุด ต้องการดำเนินการต่อไหม?",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "ขีดเส้นใต้",
+  "toolNames.strikethrough": "ขีดทับ",
+  "toolNames.callout": "กล่องเน้น",
+  "tools.callout.placeholder": "กล่องเน้น",
+  "tools.callout.addEmoji": "เพิ่มอีโมจิ",
+  "tools.callout.editIcon": "แก้ไขไอคอน",
+  "tools.callout.removeEmoji": "ลบไอคอน",
+  "tools.callout.filterEmojis": "ค้นหา…",
+  "tools.callout.calloutEmojiCategory": "กล่องเน้น",
+  "tools.callout.noEmojisFound": "ไม่พบอิโมจิ",
+  "tools.callout.pickRandom": "สุ่ม",
+  "tools.callout.skinTone": "สีผิว",
+  "tools.callout.emojiCategoryPeople": "ผู้คน",
+  "tools.callout.emojiCategoryNature": "ธรรมชาติ",
+  "tools.callout.emojiCategoryFood": "อาหาร",
+  "tools.callout.emojiCategoryActivity": "กิจกรรม",
+  "tools.callout.emojiCategoryTravel": "การเดินทาง",
+  "tools.callout.emojiCategoryObjects": "วัตถุ",
+  "tools.callout.emojiCategorySymbols": "สัญลักษณ์",
+  "tools.callout.emojiCategoryFlags": "ธง",
+  "tools.callout.color": "สี",
+  "tools.callout.colorDefault": "ค่าเริ่มต้น",
+  "tools.callout.colorGray": "สีเทา",
+  "tools.callout.colorBrown": "สีน้ำตาล",
+  "tools.callout.colorOrange": "สีส้ม",
+  "tools.callout.colorYellow": "สีเหลือง",
+  "tools.callout.colorGreen": "สีเขียว",
+  "tools.callout.colorTeal": "เขียวน้ำเงิน",
+  "tools.callout.colorBlue": "สีน้ำเงิน",
+  "tools.callout.colorPurple": "สีม่วง",
+  "tools.callout.colorPink": "สีชมพู",
+  "tools.callout.colorRed": "สีแดง"
 }

package/src/components/i18n/locales/tr/messages.json

@@ -84,6 +84,36 @@
   "tools.table.clickToAddColumn": "Yeni sütun eklemek için tıkla",
   "tools.table.dragToAddRemoveColumns": "Sütun eklemek veya kaldırmak için sürükle",
   "blockSettings.convertWithChildrenWarning": "Bu bloğun {count} iç içe bloğu var. Dönüştürmek, bunları en üst düzeye taşıyacak. Devam edilsin mi?",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "Altı çizili",
+  "toolNames.strikethrough": "Üstü çizili",
+  "toolNames.callout": "Bilgi kutusu",
+  "tools.callout.placeholder": "Bilgi kutusu",
+  "tools.callout.addEmoji": "Emoji ekle",
+  "tools.callout.editIcon": "Simgeyi düzenle",
+  "tools.callout.removeEmoji": "Simgeyi kaldır",
+  "tools.callout.filterEmojis": "Ara…",
+  "tools.callout.calloutEmojiCategory": "Bilgi kutusu",
+  "tools.callout.noEmojisFound": "Emoji bulunamadı",
+  "tools.callout.pickRandom": "Rastgele",
+  "tools.callout.skinTone": "Ten rengi",
+  "tools.callout.emojiCategoryPeople": "Kişiler",
+  "tools.callout.emojiCategoryNature": "Doğa",
+  "tools.callout.emojiCategoryFood": "Yiyecek",
+  "tools.callout.emojiCategoryActivity": "Etkinlik",
+  "tools.callout.emojiCategoryTravel": "Seyahat",
+  "tools.callout.emojiCategoryObjects": "Nesneler",
+  "tools.callout.emojiCategorySymbols": "Semboller",
+  "tools.callout.emojiCategoryFlags": "Bayraklar",
+  "tools.callout.color": "Renk",
+  "tools.callout.colorDefault": "Varsayılan",
+  "tools.callout.colorGray": "Gri",
+  "tools.callout.colorBrown": "Kahverengi",
+  "tools.callout.colorOrange": "Turuncu",
+  "tools.callout.colorYellow": "Sarı",
+  "tools.callout.colorGreen": "Yeşil",
+  "tools.callout.colorTeal": "Çam yeşili",
+  "tools.callout.colorBlue": "Mavi",
+  "tools.callout.colorPurple": "Mor",
+  "tools.callout.colorPink": "Pembe",
+  "tools.callout.colorRed": "Kırmızı"
 }

package/src/components/i18n/locales/ug/messages.json

@@ -84,6 +84,36 @@
   "a11y.atTop": "بۆلەك ئەڭ ئۈستىدە، ئۈستىگە يۆتكىگىلى بولمايدۇ",
   "a11y.atBottom": "بۆلەك ئەڭ ئاستىدا، ئاستىغا يۆتكىگىلى بولمايدۇ",
   "blockSettings.convertWithChildrenWarning": "بۇ بۆلەكتە {count} قاتلاشقان بۆلەك بار. ئۇنى ئۆزگەرتسەڭىز، ئۇلار ئەڭ ئۈستكى قاتقا چىقىرىلىدۇ. داۋاملاشتۇرامسىز؟",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "ئاستى سىزىق",
+  "toolNames.strikethrough": "ئۆچۈرۈش سىزىقى",
+  "toolNames.callout": "ئەسكەرتىش",
+  "tools.callout.placeholder": "ئەسكەرتىش",
+  "tools.callout.addEmoji": "ئېموجى قوشۇش",
+  "tools.callout.editIcon": "سىنبەلگە تەھرىرلەش",
+  "tools.callout.removeEmoji": "سىنبەلگە ئۆچۈرۈش",
+  "tools.callout.filterEmojis": "سۈزگۈچ…",
+  "tools.callout.calloutEmojiCategory": "ئەسكەرتىش",
+  "tools.callout.noEmojisFound": "ئېموجى تېپىلمىدى",
+  "tools.callout.pickRandom": "خالىغان",
+  "tools.callout.skinTone": "تېرە رەڭ",
+  "tools.callout.emojiCategoryPeople": "كىشىلەر",
+  "tools.callout.emojiCategoryNature": "تەبىئەت",
+  "tools.callout.emojiCategoryFood": "يېمەكلىك",
+  "tools.callout.emojiCategoryActivity": "پائالىيەت",
+  "tools.callout.emojiCategoryTravel": "ساياھەت",
+  "tools.callout.emojiCategoryObjects": "نەرسىلەر",
+  "tools.callout.emojiCategorySymbols": "بەلگىلەر",
+  "tools.callout.emojiCategoryFlags": "بايراقلار",
+  "tools.callout.color": "رەڭ",
+  "tools.callout.colorDefault": "سۈكۈتتىكى",
+  "tools.callout.colorGray": "كۈلرەڭ",
+  "tools.callout.colorBrown": "قوڭۇر",
+  "tools.callout.colorOrange": "تۈختۈرەڭ",
+  "tools.callout.colorYellow": "سېرىق",
+  "tools.callout.colorGreen": "يېشىل",
+  "tools.callout.colorTeal": "كۆكۈش يېشىل",
+  "tools.callout.colorBlue": "كۆك",
+  "tools.callout.colorPurple": "بىنەپشە",
+  "tools.callout.colorPink": "ئوچ قىزىل",
+  "tools.callout.colorRed": "قىزىل"
 }

package/src/components/i18n/locales/uk/messages.json

@@ -84,6 +84,36 @@
   "tools.table.clickToAddColumn": "Натисніть, щоб додати нову колонку",
   "tools.table.dragToAddRemoveColumns": "Перетягніть, щоб додати або видалити колонки",
   "blockSettings.convertWithChildrenWarning": "Цей блок містить {count} вкладених блоків. Під час конвертації вони будуть переміщені на верхній рівень. Продовжити?",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "Підкреслений",
+  "toolNames.strikethrough": "Закреслений",
+  "toolNames.callout": "Виноска",
+  "tools.callout.placeholder": "Виноска",
+  "tools.callout.addEmoji": "Додати емодзі",
+  "tools.callout.editIcon": "Редагувати іконку",
+  "tools.callout.removeEmoji": "Видалити іконку",
+  "tools.callout.filterEmojis": "Фільтр…",
+  "tools.callout.calloutEmojiCategory": "Виноска",
+  "tools.callout.noEmojisFound": "Емодзі не знайдено",
+  "tools.callout.pickRandom": "Випадково",
+  "tools.callout.skinTone": "Тон шкіри",
+  "tools.callout.emojiCategoryPeople": "Люди",
+  "tools.callout.emojiCategoryNature": "Природа",
+  "tools.callout.emojiCategoryFood": "Їжа",
+  "tools.callout.emojiCategoryActivity": "Активності",
+  "tools.callout.emojiCategoryTravel": "Подорожі",
+  "tools.callout.emojiCategoryObjects": "Об'єкти",
+  "tools.callout.emojiCategorySymbols": "Символи",
+  "tools.callout.emojiCategoryFlags": "Прапори",
+  "tools.callout.color": "Колір",
+  "tools.callout.colorDefault": "за замовчуванням",
+  "tools.callout.colorGray": "Сірий",
+  "tools.callout.colorBrown": "Коричневий",
+  "tools.callout.colorOrange": "Помаранчевий",
+  "tools.callout.colorYellow": "Жовтий",
+  "tools.callout.colorGreen": "Зелений",
+  "tools.callout.colorTeal": "Бірюзовий",
+  "tools.callout.colorBlue": "Синій",
+  "tools.callout.colorPurple": "Фіолетовий",
+  "tools.callout.colorPink": "Рожевий",
+  "tools.callout.colorRed": "Червоний"
 }

package/src/components/i18n/locales/ur/messages.json

@@ -84,6 +84,36 @@
   "tools.table.clickToAddColumn": "نیا کالم شامل کرنے کے لیے کلک کریں",
   "tools.table.dragToAddRemoveColumns": "کالم شامل یا حذف کرنے کے لیے گھسیٹیں",
   "blockSettings.convertWithChildrenWarning": "اس بلاک میں {count} نیسٹڈ بلاکس ہیں۔ اسے تبدیل کرنے سے وہ اعلیٰ سطح پر آ جائیں گے۔ کیا آپ جاری رکھنا چاہتے ہیں؟",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "خط کشیدہ",
+  "toolNames.strikethrough": "کٹا ہوا",
+  "toolNames.callout": "نوٹ",
+  "tools.callout.placeholder": "نوٹ",
+  "tools.callout.addEmoji": "ایموجی شامل کریں",
+  "tools.callout.editIcon": "آئیکن ترمیم کریں",
+  "tools.callout.removeEmoji": "آئیکن ہٹائیں",
+  "tools.callout.filterEmojis": "تلاش…",
+  "tools.callout.calloutEmojiCategory": "نوٹ",
+  "tools.callout.noEmojisFound": "کوئی ایموجی نہیں ملی",
+  "tools.callout.pickRandom": "بے ترتیب",
+  "tools.callout.skinTone": "جلد کا رنگ",
+  "tools.callout.emojiCategoryPeople": "لوگ",
+  "tools.callout.emojiCategoryNature": "فطرت",
+  "tools.callout.emojiCategoryFood": "کھانا",
+  "tools.callout.emojiCategoryActivity": "سرگرمی",
+  "tools.callout.emojiCategoryTravel": "سفر",
+  "tools.callout.emojiCategoryObjects": "اشیاء",
+  "tools.callout.emojiCategorySymbols": "علامات",
+  "tools.callout.emojiCategoryFlags": "جھنڈے",
+  "tools.callout.color": "رنگ",
+  "tools.callout.colorDefault": "طے شدہ",
+  "tools.callout.colorGray": "سرمئی",
+  "tools.callout.colorBrown": "بھورا",
+  "tools.callout.colorOrange": "نارنجی",
+  "tools.callout.colorYellow": "پیلا",
+  "tools.callout.colorGreen": "سبز",
+  "tools.callout.colorTeal": "نیلا ہرا",
+  "tools.callout.colorBlue": "نیلا",
+  "tools.callout.colorPurple": "بنفشی",
+  "tools.callout.colorPink": "گلابی",
+  "tools.callout.colorRed": "سرخ"
 }

package/src/components/i18n/locales/vi/messages.json

@@ -84,6 +84,36 @@
   "a11y.atTop": "Khối đang ở trên cùng, không thể di chuyển lên",
   "a11y.atBottom": "Khối đang ở dưới cùng, không thể di chuyển xuống",
   "blockSettings.convertWithChildrenWarning": "Khối này có {count} khối lồng nhau. Khi chuyển đổi, các khối đó sẽ được đưa lên cấp cao nhất. Tiếp tục?",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "Gạch chân",
+  "toolNames.strikethrough": "Gạch ngang",
+  "toolNames.callout": "Chú thích",
+  "tools.callout.placeholder": "Chú thích",
+  "tools.callout.addEmoji": "Thêm biểu tượng",
+  "tools.callout.editIcon": "Chỉnh sửa biểu tượng",
+  "tools.callout.removeEmoji": "Xóa biểu tượng",
+  "tools.callout.filterEmojis": "Tìm kiếm…",
+  "tools.callout.calloutEmojiCategory": "Chú thích",
+  "tools.callout.noEmojisFound": "Không tìm thấy emoji",
+  "tools.callout.pickRandom": "Ngẫu nhiên",
+  "tools.callout.skinTone": "Tông màu da",
+  "tools.callout.emojiCategoryPeople": "Mọi người",
+  "tools.callout.emojiCategoryNature": "Thiên nhiên",
+  "tools.callout.emojiCategoryFood": "Đồ ăn",
+  "tools.callout.emojiCategoryActivity": "Hoạt động",
+  "tools.callout.emojiCategoryTravel": "Du lịch",
+  "tools.callout.emojiCategoryObjects": "Đồ vật",
+  "tools.callout.emojiCategorySymbols": "Biểu tượng",
+  "tools.callout.emojiCategoryFlags": "Cờ",
+  "tools.callout.color": "Màu",
+  "tools.callout.colorDefault": "Mặc định",
+  "tools.callout.colorGray": "Xám",
+  "tools.callout.colorBrown": "Nâu",
+  "tools.callout.colorOrange": "Cam",
+  "tools.callout.colorYellow": "Vàng",
+  "tools.callout.colorGreen": "Xanh lá",
+  "tools.callout.colorTeal": "Xanh mòng két",
+  "tools.callout.colorBlue": "Xanh dương",
+  "tools.callout.colorPurple": "Tím",
+  "tools.callout.colorPink": "Hồng",
+  "tools.callout.colorRed": "Đỏ"
 }

package/src/components/i18n/locales/yi/messages.json

@@ -84,6 +84,36 @@
   "a11y.atTop": "בלאָק איז אויבן, קען נישט אַרויפֿגיין",
   "a11y.atBottom": "בלאָק איז אונטן, קען נישט אַראָפּגיין",
   "blockSettings.convertWithChildrenWarning": "דער בלאָק האָט {count} אַרײַנגענעסטלטע בלאָקן. זיין איבערמאַכן וועט זיי אַרױפֿרוקן צום ערשטן מדרגה. פֿאָרזעצן?",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "אונטערשטרייכן",
+  "toolNames.strikethrough": "דורכשטרייכן",
+  "toolNames.callout": "באַמערקונג",
+  "tools.callout.placeholder": "באַמערקונג",
+  "tools.callout.addEmoji": "צולייגן עמאָדזשי",
+  "tools.callout.editIcon": "רעדאַקטירן בילדל",
+  "tools.callout.removeEmoji": "אויסמעקן בילדל",
+  "tools.callout.filterEmojis": "פֿילטער…",
+  "tools.callout.calloutEmojiCategory": "באַמערקונג",
+  "tools.callout.noEmojisFound": "קיין עמאָדזשי געפֿונען",
+  "tools.callout.pickRandom": "צופעליק",
+  "tools.callout.skinTone": "הויט טאָן",
+  "tools.callout.emojiCategoryPeople": "מענטשן",
+  "tools.callout.emojiCategoryNature": "נאַטור",
+  "tools.callout.emojiCategoryFood": "עסן",
+  "tools.callout.emojiCategoryActivity": "אַקטיוויטעט",
+  "tools.callout.emojiCategoryTravel": "רײַזן",
+  "tools.callout.emojiCategoryObjects": "זאַכן",
+  "tools.callout.emojiCategorySymbols": "סימבאָלן",
+  "tools.callout.emojiCategoryFlags": "פֿאָנען",
+  "tools.callout.color": "קאָליר",
+  "tools.callout.colorDefault": "שטאַנדאַרד",
+  "tools.callout.colorGray": "גרוי",
+  "tools.callout.colorBrown": "ברוין",
+  "tools.callout.colorOrange": "אָראַנזש",
+  "tools.callout.colorYellow": "געל",
+  "tools.callout.colorGreen": "גרין",
+  "tools.callout.colorTeal": "בלוי-גרין",
+  "tools.callout.colorBlue": "בלוי",
+  "tools.callout.colorPurple": "לילאַ",
+  "tools.callout.colorPink": "ראָזעוו",
+  "tools.callout.colorRed": "רויט"
 }

package/src/components/i18n/locales/zh/messages.json

@@ -84,6 +84,36 @@
   "tools.table.clickToAddColumn": "点击添加新列",
   "tools.table.dragToAddRemoveColumns": "拖动以添加或删除列",
   "blockSettings.convertWithChildrenWarning": "此内容块包含 {count} 个嵌套块。转换后，这些嵌套块将被提升至顶层。是否继续？",
-  "toolNames.underline": "Underline",
-  "toolNames.strikethrough": "Strikethrough"
+  "toolNames.underline": "下划线",
+  "toolNames.strikethrough": "删除线",
+  "toolNames.callout": "标注",
+  "tools.callout.placeholder": "标注",
+  "tools.callout.addEmoji": "添加表情",
+  "tools.callout.editIcon": "编辑图标",
+  "tools.callout.removeEmoji": "删除图标",
+  "tools.callout.filterEmojis": "搜索…",
+  "tools.callout.calloutEmojiCategory": "标注",
+  "tools.callout.noEmojisFound": "未找到表情符号",
+  "tools.callout.pickRandom": "随机",
+  "tools.callout.skinTone": "肤色",
+  "tools.callout.emojiCategoryPeople": "人物",
+  "tools.callout.emojiCategoryNature": "自然",
+  "tools.callout.emojiCategoryFood": "食物",
+  "tools.callout.emojiCategoryActivity": "活动",
+  "tools.callout.emojiCategoryTravel": "旅行",
+  "tools.callout.emojiCategoryObjects": "物品",
+  "tools.callout.emojiCategorySymbols": "符号",
+  "tools.callout.emojiCategoryFlags": "旗帜",
+  "tools.callout.color": "颜色",
+  "tools.callout.colorDefault": "默认",
+  "tools.callout.colorGray": "灰色",
+  "tools.callout.colorBrown": "棕色",
+  "tools.callout.colorOrange": "橙色",
+  "tools.callout.colorYellow": "黄色",
+  "tools.callout.colorGreen": "绿色",
+  "tools.callout.colorTeal": "青色",
+  "tools.callout.colorBlue": "蓝色",
+  "tools.callout.colorPurple": "紫色",
+  "tools.callout.colorPink": "粉色",
+  "tools.callout.colorRed": "红色"
 }

package/src/components/icons/index.ts

@@ -432,3 +432,101 @@ export const IconHash = `
   <path d="M4 12H16" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
 </svg>
 `;
+
+export const IconCallout = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="10" x2="15" y2="10"/><line x1="12" y1="7" x2="12" y2="13"/></svg>`;
+
+export const IconPaintRoller = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <rect x="2.5" y="3" width="12" height="6" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M14.5 6H16a1 1 0 0 1 1 1v3.5a1 1 0 0 1-1 1h-6a1 1 0 0 0-1 1V14" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="8" y="14" width="3" height="3.5" rx="0.75" stroke="currentColor" stroke-width="1.25"/>
+</svg>`;
+
+// Emoji Picker Category Icons
+
+// Star icon (Callout category)
+export const IconEmojiStar = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 3l2.2 4.4 4.8.7-3.5 3.4.8 4.8L10 14l-4.3 2.3.8-4.8L3 8.1l4.8-.7L10 3z" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Smiley face icon (People category)
+export const IconEmojiSmile = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="10" r="6.5" stroke="currentColor" stroke-width="1.25"/>
+  <circle cx="7.5" cy="8.5" r="0.75" fill="currentColor"/>
+  <circle cx="12.5" cy="8.5" r="0.75" fill="currentColor"/>
+  <path d="M7.5 12a3 3 0 0 0 5 0" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Sprout icon (Nature category)
+export const IconEmojiSprout = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 17v-7" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M10 13c-3 0-6-2-6-5 3 0 6 2 6 5z" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+  <path d="M10 10c3 0 6-2.5 6-5.5-3 0-6 2.5-6 5.5z" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Fork and knife icon (Food category)
+export const IconEmojiUtensils = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3v4c0 1.1.9 2 2 2v8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 3v4c0 1.1-.9 2-2 2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M7 3v3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M13 3v14" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M13 3c1.7 0 3 1.5 3 3.5S13 10 13 10" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Soccer ball icon (Activity category)
+export const IconEmojiBall = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="10" r="6.5" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M10 7.5l2.4 1.7-.9 2.8h-3l-.9-2.8z" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+  <path d="M10 7.5V4" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M12.4 9.2l3.1-1.1" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M11.5 12l2 2.6" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M8.5 12l-2 2.6" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M7.6 9.2l-3.1-1.1" stroke="currentColor" stroke-width="1.25"/>
+</svg>
+`;
+
+// Globe icon (Travel category)
+export const IconEmojiGlobe = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="10" cy="10" r="6.5" stroke="currentColor" stroke-width="1.25"/>
+  <ellipse cx="10" cy="10" rx="2.75" ry="6.5" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M3.5 10h13" stroke="currentColor" stroke-width="1.25"/>
+</svg>
+`;
+
+// Lightbulb icon (Objects category)
+export const IconEmojiLightbulb = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 13.5c-.25-1.5-1.5-3.5-2.5-5.5a4.5 4.5 0 0 1 9 0c-1 2-2.25 4-2.5 5.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8 13.5v1.75c0 .41.34.75.75.75h2.5c.41 0 .75-.34.75-.75V13.5" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+  <path d="M8 14.75h4" stroke="currentColor" stroke-width="1.25"/>
+  <path d="M9.25 11l.75-3 .75 3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="10" cy="7" r="1" stroke="currentColor" stroke-width="1"/>
+</svg>
+`;
+
+// Hash/pound icon (Symbols category)
+export const IconEmojiHash = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.5 5l-1 10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M12.5 5l-1 10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M5 8h10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M5 12h10" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
+`;
+
+// Flag icon (Flags category)
+export const IconEmojiFlag = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 17V3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
+  <path d="M5 3c2 0 3 1.5 5 1.5S14 3 16 3v8c-2 0-3 1.5-5 1.5S7 11 5 11" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;

package/src/components/modules/api/i18n.ts

@@ -27,6 +27,7 @@ export class I18nAPI extends Module {
         t: (dictKey: string): string => this.Blok.I18n.t(dictKey),
         has: (dictKey: string): boolean => this.Blok.I18n.has(dictKey),
         getEnglishTranslation: (key: string): string => this.Blok.I18n.getEnglishTranslation(key),
+        getLocale: (): string => this.Blok.I18n.getLocale(),
       };
     }
 

package/src/components/modules/blockEvents/composers/keyboardNavigation.ts

@@ -197,13 +197,30 @@ export class KeyboardNavigation extends BlockEventComposer {
       return null;
     }
 
-    this.Blok.BlockManager.setBlockParent(currentBlock, null);
-    const parentIndex = this.Blok.BlockManager.getBlockIndex(parentBlock);
-    const currentIndex = this.Blok.BlockManager.getBlockIndex(currentBlock);
+    const isToggleParent = parentBlock.holder.querySelector('[data-blok-toggle-open]') !== null;
+
+    if (isToggleParent) {
+      /**
+       * Toggle children should never be promoted out — pressing Enter on an
+       * empty last child creates a new sibling inside the toggle instead.
+       * The caller (createBlockOnEnter) handles this via the normal Case 2
+       * path: insertDefaultBlockAtIndex + setBlockParent to inherit the parent.
+       */
+      return null;
+    }
 
-    this.Blok.BlockManager.move(parentIndex + 1, currentIndex, false);
+    /**
+     * Non-toggle containers (e.g. callout): when the only child is empty,
+     * exit by inserting a new block after the container. The container and
+     * its child are preserved so the user can return to it.
+     */
+    if (parentBlock.contentIds.length !== 1) {
+      return null;
+    }
+
+    const parentIndex = this.Blok.BlockManager.getBlockIndex(parentBlock);
 
-    return currentBlock;
+    return this.Blok.BlockManager.insertDefaultBlockAtIndex(parentIndex + 1);
   }
 
   private createBlockOnEnter(currentBlock: Block): Block {

package/src/components/modules/blockManager/operations.ts

@@ -580,6 +580,7 @@ export class BlockOperations {
      * Regular (non-toggleable) headers have no children container.
      */
     const newToolCanHostChildren = newTool === 'toggle' ||
+      newTool === 'callout' ||
       (newTool === 'header' && (data as { isToggleable?: boolean }).isToggleable === true);
 
     if (oldContentIds.length > 0 && !newToolCanHostChildren) {

package/src/components/modules/toolbar/index.ts

@@ -414,16 +414,37 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     /**
-     * Adjust toolbar button visibility when focus is inside a table cell.
-     * The plus button always stays visible so users can add blocks below the table.
-     * The settings toggler is hidden because drag/settings don't apply to individual cells.
+     * Adjust toolbar button visibility based on context:
+     * - Table cell focus: settings toggler hidden (drag/settings don't apply to cells)
+     * - Callout first child: both plus button and settings toggler hidden
+     *   to prevent overlap with the callout's emoji icon
      */
     const focusIsInsideCell = this.isFocusInsideTableCell();
+    const isCalloutFirstChild = this.isFirstChildOfCallout(targetBlock);
 
-    plusButton.style.display = '';
+    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = focusIsInsideCell ? 'none' : '';
+      settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
+    }
+
+    /**
+     * Adapt toolbar button background for blocks inside a callout with custom colors.
+     * Use color-mix() to create a subtly lighter variant of the callout background
+     * so buttons are distinguishable from the callout surface.
+     * Icon color stays default (text-text-secondary) regardless of callout colors.
+     *
+     * Skip when the target is the callout itself or its first child — their toolbar
+     * buttons render outside the callout's visual background area.
+     */
+    const calloutBg = isCalloutFirstChild || targetBlock.name === 'callout'
+      ? null
+      : this.getCalloutBackgroundColor(targetBlock);
+
+    if (calloutBg !== null) {
+      wrapper.style.setProperty('--blok-bg-light', `light-dark(color-mix(in srgb, ${calloutBg} 70%, white), color-mix(in srgb, ${calloutBg} 85%, white))`);
+    } else {
+      wrapper.style.removeProperty('--blok-bg-light');
     }
 
     const targetBlockHolder = targetBlock.holder;
@@ -561,9 +582,11 @@ export class Toolbar extends Module<ToolbarNodes> {
      * in case they were hidden for table cell blocks.
      */
     plusButton.style.display = '';
+    plusButton.style.color = '';
 
     if (settingsToggler) {
       settingsToggler.style.display = '';
+      settingsToggler.style.color = '';
     }
 
     const targetBlockHolder = targetBlock.holder;
@@ -657,10 +680,12 @@ export class Toolbar extends Module<ToolbarNodes> {
      */
     if (this.nodes.plusButton) {
       this.nodes.plusButton.style.display = '';
+      this.nodes.plusButton.style.color = '';
     }
 
     if (this.nodes.settingsToggler) {
       this.nodes.settingsToggler.style.display = '';
+      this.nodes.settingsToggler.style.color = '';
     }
 
     /**
@@ -710,6 +735,66 @@ export class Toolbar extends Module<ToolbarNodes> {
    * Used to decide whether the plus button and settings toggler should be hidden.
    * Focus-based check distinguishes click (buttons hidden) from hover (buttons visible).
    */
+  /**
+   * Checks whether the given block is the first child of a callout block.
+   * Used to hide the plus button and prevent it from overlapping the callout emoji icon.
+   */
+  private isFirstChildOfCallout(block: Block): boolean {
+    if (!block.parentId) {
+      return false;
+    }
+
+    const parentBlock = this.Blok.BlockManager.getBlockById(block.parentId);
+
+    if (!parentBlock || parentBlock.name !== 'callout') {
+      return false;
+    }
+
+    return parentBlock.contentIds[0] === block.id;
+  }
+
+  /**
+   * Returns the background color of the callout containing the given block,
+   * or null if the block is not inside a colored callout (or the callout has
+   * no background color set).
+   */
+  private getCalloutBackgroundColor(block: Block): string | null {
+    const calloutBlock = this.resolveCalloutBlock(block);
+
+    if (!calloutBlock) {
+      return null;
+    }
+
+    try {
+      const bg = calloutBlock.pluginsContent.style.backgroundColor;
+
+      return bg || null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Returns the callout block if the given block is a callout or is a child of one.
+   */
+  private resolveCalloutBlock(block: Block): Block | null {
+    if (block.name === 'callout') {
+      return block;
+    }
+
+    if (!block.parentId) {
+      return null;
+    }
+
+    const parent = this.Blok.BlockManager.getBlockById(block.parentId);
+
+    if (!parent || parent.name !== 'callout') {
+      return null;
+    }
+
+    return parent;
+  }
+
   private isFocusInsideTableCell(): boolean {
     const active = document.activeElement;
 
@@ -736,11 +821,12 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     const focusIsInsideCell = this.isFocusInsideTableCell();
+    const isCalloutFirstChild = this.hoveredBlock !== null && this.isFirstChildOfCallout(this.hoveredBlock);
 
-    plusButton.style.display = '';
+    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
 
     if (settingsToggler) {
-      settingsToggler.style.display = focusIsInsideCell ? 'none' : '';
+      settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
     }
   }
 
@@ -899,6 +985,15 @@ export class Toolbar extends Module<ToolbarNodes> {
       // eslint-disable-next-line @typescript-eslint/no-deprecated
       this.Blok.UI.nodes.wrapper.classList.add(this.CSS.openedToolboxHolderModifier);
       this.Blok.UI.nodes.wrapper.setAttribute(DATA_ATTR.toolboxOpened, 'true');
+
+      /**
+       * Adapt search input colors when toolbox opens inside a colored callout.
+       */
+      const calloutBg = this.hoveredBlock !== null
+        ? this.getCalloutBackgroundColor(this.hoveredBlock)
+        : null;
+
+      this.toolboxInstance?.setCalloutBackground(calloutBg);
     });
 
     this.toolboxInstance.on(ToolboxEvent.Closed, () => {