import { Button, Popconfirm } from 'antd'; import { useMemo } from 'react'; import { useCkeditor } from '../../Hooks/Ckeditor.hook'; import { useEditor } from '../../Hooks/Editor.hook'; import { useHtmlWrapper } from '../../Hooks/Htmlwrapper.hook'; import { Remove, Copy as CopyOperation } from '../../Utils/operations'; import _ from 'lodash'; import CopyFilled from '@ant-design/icons/lib/icons/CopyFilled'; import DeleteFilled from '@ant-design/icons/lib/icons/DeleteFilled'; import { useUniqueIdGenerator } from '../../Hooks/Drag.hook'; export const Editor = () => { const { ref, isActive, x, y, delActive, delX, delY, setDelActive, copy } = useCkeditor(); const { mjmlJson, setMjmlJson } = useEditor(); const { active, setActive } = useHtmlWrapper(); const { copyActive, setCopyActive, copyX, copyY } = copy; const { getId } = useUniqueIdGenerator(); const deleteConfirm = useMemo( () => () => { if (active) { Remove({ target: active, mjmlJson, setMjmlJson, setDelActive, setActive, setCopyActive }); } }, [active] ); const copyAction = () => { if (active) { CopyOperation({ mjmlJson, setActive, setMjmlJson, setCopyActive, setDelActive, target: active, uidGenerator: getId, }); } }; return ( <> <Delete style={{ zIndex: 200, display: delActive ? 'block' : 'none', position: 'fixed', left: `${delX}px`, top: `${delY}px`, }} deleteConfirm={deleteConfirm} /> <Copy onClick={copyAction} style={{ zIndex: 200, display: copyActive ? 'block' : 'none', position: 'fixed', left: `${copyX}px`, top: `${copyY}px`, }} /> </> ); }; interface DeleteProps { style: any; deleteConfirm: () => void; } const Delete = ({ style, deleteConfirm }: DeleteProps) => { return ( <Popconfirm placement="right" title="Are you sure ?" okText="Delete" cancelText="Cancel" onConfirm={deleteConfirm}> <Button style={style} type="primary" icon={<DeleteFilled />} /> </Popconfirm> ); }; interface CopyProps { style: any; onClick: () => void; } const Copy = ({ style, onClick }: CopyProps) => { return <Button style={style} onClick={onClick} type="primary" icon={<CopyFilled />} />; };