@selfcommunity/react-ui/lib/esm/components/Editor/plugins/EmojiPlugin.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { CONTROLLED_TEXT_INSERTION_COMMAND } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { Fade, Icon, IconButton, Popover, useMediaQuery, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import EmojiPicker from '../../../shared/EmojiPicker';
import { PREFIX } from '../constants';
function Emoji({ editor, className = '' }) {
    // STATE
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    const [emojiAnchorEl, setEmojiAnchorEl] = useState(false);
    // HANDLERS
    const handleOpen = (event) => {
        setEmojiAnchorEl(event.currentTarget);
    };
    const handleEmojiClick = (emojiData, event) => {
        editor.focus();
        editor.dispatchCommand(CONTROLLED_TEXT_INSERTION_COMMAND, emojiData.emoji);
    };
    if (isMobile) {
        return null;
    }
    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: className, onClick: handleOpen }, { children: _jsx(Icon, { children: "sentiment_satisfied_alt" }) })), _jsx(Popover, Object.assign({ open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: () => setEmojiAnchorEl(null), TransitionComponent: Fade, anchorOrigin: {
                    vertical: 'top',
                    horizontal: 'right'
                }, transformOrigin: {
                    vertical: 'bottom',
                    horizontal: 'left'
                }, sx: (theme) => {
                    return { zIndex: theme.zIndex.tooltip };
                } }, { children: _jsx(EmojiPicker, { onEmojiClick: handleEmojiClick }) }))] }));
}
const classes = {
    root: `${PREFIX}-emoji-plugin-root`
};
const Root = styled(Emoji, {
    name: PREFIX,
    slot: 'EmojiPluginRoot'
})(() => ({}));
export default function EmojiPlugin() {
    const [editor] = useLexicalComposerContext();
    return _jsx(Root, { editor: editor, className: classes.root });
}