mirror of https://github.com/fantasticit/think.git
tiptap: remove emoji-picker when editor is not editable
This commit is contained in:
parent
9f5b3f4054
commit
342fae0398
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue