From 51847238626ed3f29b5b2205c8cd7f7789551191 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 2 Oct 2025 14:59:25 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20prevent=20readers=20from?=
 =?UTF-8?q?=20changing=20callout=20emoji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

restrict callout emoji editing to maintain proper permissions

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                       |  1 +
 .../components/custom-blocks/CalloutBlock.tsx      | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db660ee10..eb06ec14b 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
index d5de55713..b76cee1fd 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
+++ b/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 {
-                background-color: rgba(0, 0, 0, 0.1);
-              }
+              cursor: ${isEditable ? 'pointer' : 'default'};
+              ${isEditable &&
+              `
+                &:hover {
+                  background-color: rgba(0, 0, 0, 0.1);
+                }
+              `}
             `}
             $align="center"
             $height="28px"