✨(frontend) prevent readers from changing callout emoji

restrict callout emoji editing to maintain proper permissions

Signed-off-by: Cyril <c.gromoff@gmail.com>

CHANGELOG.md

@@ -38,6 +38,7 @@ and this project adheres to
 - 🐛(frontend) fix legacy role computation #1376
 - 🛂(frontend) block editing title when not allowed #1412
 - 🐛(frontend) scroll back to top when navigate to a document #1406
+- 🔒(frontend) prevent readers from changing callout emoji #1449
 
 ## [3.7.0] - 2025-09-12
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

@@ -25,8 +25,12 @@ export const CalloutBlock = createReactBlockSpec(
   {
     render: ({ block, editor, contentRef }) => {
       const [openEmojiPicker, setOpenEmojiPicker] = useState(false);
+      const isEditable = editor.isEditable;
 
       const toggleEmojiPicker = (e: React.MouseEvent) => {
+        if (!isEditable) {
+          return;
+        }
         e.preventDefault();
         e.stopPropagation();
         setOpenEmojiPicker(!openEmojiPicker);
@@ -65,9 +69,13 @@ export const CalloutBlock = createReactBlockSpec(
             onClick={toggleEmojiPicker}
             $css={css`
               font-size: 1.125rem;
-              &:hover {
+              cursor: ${isEditable ? 'pointer' : 'default'};
-                background-color: rgba(0, 0, 0, 0.1);
+              ${isEditable &&
-              }
+              `
+                &:hover {
+                  background-color: rgba(0, 0, 0, 0.1);
+                }
+              `}
             `}
             $align="center"
             $height="28px"