From 342fae0398ea7c29fcd8d5b95b637d4c079b0560 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sun, 1 May 2022 13:28:06 +0800
Subject: [PATCH] tiptap: remove emoji-picker when editor is not editable

---
 .../client/src/tiptap/wrappers/callout/index.tsx    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/tiptap/wrappers/callout/index.tsx b/packages/client/src/tiptap/wrappers/callout/index.tsx
index a30a63ab..369190c1 100644
--- a/packages/client/src/tiptap/wrappers/callout/index.tsx
+++ b/packages/client/src/tiptap/wrappers/callout/index.tsx
@@ -4,7 +4,8 @@ import cls from 'classnames';
 import { EmojiPicker } from 'components/emoji-picker';
 import styles from './index.module.scss';
 
-export const CalloutWrapper = ({ node, updateAttributes }) => {
+export const CalloutWrapper = ({ editor, node, updateAttributes }) => {
+  const { isEditable } = editor;
   const { emoji, textColor, borderColor, backgroundColor } = node.attrs;
 
   const onSelectEmoji = useCallback((emoji) => {
@@ -20,9 +21,13 @@ export const CalloutWrapper = ({ node, updateAttributes }) => {
           backgroundColor,
         }}
       >
-        <EmojiPicker onSelectEmoji={onSelectEmoji}>
-          <span className={styles.icon}>{emoji || 'Icon'}</span>
-        </EmojiPicker>
+        {isEditable ? (
+          <EmojiPicker onSelectEmoji={onSelectEmoji}>
+            <span className={styles.icon}>{emoji || 'Icon'}</span>
+          </EmojiPicker>
+        ) : (
+          emoji && <span className={styles.icon}>{emoji}</span>
+        )}
         <NodeViewContent
           style={{
             color: textColor,