diff --git a/apps/client/package.json b/apps/client/package.json index 4753941b..b627910b 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -33,6 +33,7 @@ "jwt-decode": "^4.0.0", "katex": "^0.16.10", "lowlight": "^3.1.0", + "mermaid": "^11.0.1", "react": "^18.3.1", "react-arborist": "^3.4.0", "react-dom": "^18.3.1", diff --git a/apps/client/src/features/editor/components/code-block/code-block-view.tsx b/apps/client/src/features/editor/components/code-block/code-block-view.tsx index 89edb3d6..1cff51ce 100644 --- a/apps/client/src/features/editor/components/code-block/code-block-view.tsx +++ b/apps/client/src/features/editor/components/code-block/code-block-view.tsx @@ -1,17 +1,34 @@ import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react"; import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core"; -import { useState } from "react"; -import classes from "./code-block.module.css"; +import { useEffect, useState } from "react"; import { IconCheck, IconCopy } from "@tabler/icons-react"; -import { useHover } from "@mantine/hooks"; +import MermaidView from "@/features/editor/components/code-block/mermaid-view.tsx"; +import classes from "./code-block.module.css"; export default function CodeBlockView(props: NodeViewProps) { - const { node, updateAttributes, extension, editor, selected } = props; + const { node, updateAttributes, extension, editor, getPos } = props; const { language } = node.attrs; const [languageValue, setLanguageValue] = useState( language || null, ); - const { hovered, ref } = useHover(); + const [isSelected, setIsSelected] = useState(false); + + useEffect(() => { + const updateSelection = () => { + const { state } = editor; + const { from, to } = state.selection; + // Check if the selection intersects with the node's range + const isNodeSelected = + (from >= getPos() && from < getPos() + node.nodeSize) || + (to > getPos() && to <= getPos() + node.nodeSize); + setIsSelected(isNodeSelected); + }; + + editor.on("selectionUpdate", updateSelection); + return () => { + editor.off("selectionUpdate", updateSelection); + }; + }, [editor, getPos(), node.nodeSize]); function changeLanguage(language: string) { setLanguageValue(language); @@ -21,10 +38,10 @@ export default function CodeBlockView(props: NodeViewProps) { } return ( - - + +