From 618f56577da47f5c8895d25e5c11f32c6331cfb9 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 15 Feb 2026 22:51:23 +0000
Subject: [PATCH] turn into callout option

---
 .../components/bubble-menu/node-selector.tsx     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx b/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
index 5dc1afbe..7fecff9e 100644
--- a/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
+++ b/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
@@ -1,6 +1,7 @@
 import React, { Dispatch, FC, SetStateAction } from "react";
 import {
   IconBlockquote,
+  IconCaretRightFilled,
   IconCheck,
   IconCheckbox,
   IconChevronDown,
@@ -8,6 +9,7 @@ import {
   IconH1,
   IconH2,
   IconH3,
+  IconInfoCircle,
   IconList,
   IconListNumbers,
   IconTypography,
@@ -55,6 +57,8 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
         isTaskItem: ctx.editor.isActive("taskItem"),
         isBlockquote: ctx.editor.isActive("blockquote"),
         isCodeBlock: ctx.editor.isActive("codeBlock"),
+        isCallout: ctx.editor.isActive("callout"),
+        isDetails: ctx.editor.isActive("details"),
       };
     },
   });
@@ -124,6 +128,18 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       command: () => editor.chain().focus().toggleCodeBlock().run(),
       isActive: () => editorState?.isCodeBlock,
     },
+    {
+      name: "Callout",
+      icon: IconInfoCircle,
+      command: () => editor.chain().focus().toggleCallout().run(),
+      isActive: () => editorState?.isCallout,
+    },
+    {
+      name: "Toggle block",
+      icon: IconCaretRightFilled,
+      command: () => editor.chain().focus().setDetails().run(),
+      isActive: () => editorState?.isDetails,
+    },
   ];
 
   const activeItem = items.filter((item) => item.isActive()).pop() ?? {