tiptap: remove emoji-picker when editor is not editable

This commit is contained in:
fantasticit 2022-05-01 13:28:06 +08:00
parent 9f5b3f4054
commit 342fae0398
1 changed files with 9 additions and 4 deletions

View File

@ -4,7 +4,8 @@ import cls from 'classnames';
import { EmojiPicker } from 'components/emoji-picker'; import { EmojiPicker } from 'components/emoji-picker';
import styles from './index.module.scss'; 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 { emoji, textColor, borderColor, backgroundColor } = node.attrs;
const onSelectEmoji = useCallback((emoji) => { const onSelectEmoji = useCallback((emoji) => {
@ -20,9 +21,13 @@ export const CalloutWrapper = ({ node, updateAttributes }) => {
backgroundColor, backgroundColor,
}} }}
> >
{isEditable ? (
<EmojiPicker onSelectEmoji={onSelectEmoji}> <EmojiPicker onSelectEmoji={onSelectEmoji}>
<span className={styles.icon}>{emoji || 'Icon'}</span> <span className={styles.icon}>{emoji || 'Icon'}</span>
</EmojiPicker> </EmojiPicker>
) : (
emoji && <span className={styles.icon}>{emoji}</span>
)}
<NodeViewContent <NodeViewContent
style={{ style={{
color: textColor, color: textColor,