Skip to content

Commit

Permalink
feat: 타입 옵션 모달창 연결
Browse files Browse the repository at this point in the history
  • Loading branch information
pipisebastian committed Nov 26, 2024
1 parent 9533a90 commit 8408da5
Showing 1 changed file with 22 additions and 1 deletion.
23 changes: 22 additions & 1 deletion client/src/features/editor/components/block/Block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { MenuBlock } from "../MenuBlock/MenuBlock";
import { TextOptionModal } from "../TextOptionModal/TextOptionModal";
import { blockAnimation } from "./Block.animation";
import { textContainerStyle, blockContainerStyle, contentWrapperStyle } from "./Block.style";
import { TypeOptionModal } from "../TypeOptionModal/TypeOptionModal";

interface BlockProps {
id: string;
Expand Down Expand Up @@ -86,6 +87,9 @@ export const Block: React.FC<BlockProps> = memo(
},
});

const [slashModalOpen, setSlashModalOpen] = useState(false);
const [slashModalPosition, setSlashModalPosition] = useState({ top: 0, left: 0 });

const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
const currentElement = e.currentTarget;
// 텍스트를 삭제하면 <br> 태그가 생김
Expand Down Expand Up @@ -115,7 +119,18 @@ export const Block: React.FC<BlockProps> = memo(

const caretPosition = getAbsoluteCaretPosition(e.currentTarget);
block.crdt.currentCaret = caretPosition;
onInput(e, block);

const element = e.currentTarget;
const newContent = element.textContent || "";

if (newContent === "/" && !slashModalOpen) {
const rect = e.currentTarget.getBoundingClientRect();
setSlashModalPosition({
top: rect.top,
left: rect.left + 0,
});
setSlashModalOpen(true);
}
};

const handleAnimationSelect = (animation: AnimationType) => {
Expand Down Expand Up @@ -258,6 +273,12 @@ export const Block: React.FC<BlockProps> = memo(
onTextColorSelect={handleTextColorSelect}
onTextBackgroundColorSelect={handleTextBackgroundColorSelect}
/>
<TypeOptionModal
isOpen={slashModalOpen}
onClose={() => setSlashModalOpen(false)}
onTypeSelect={(type) => handleTypeSelect(type)}
position={slashModalPosition}
/>
</motion.div>
);
},
Expand Down

0 comments on commit 8408da5

Please sign in to comment.