| 15 | } |
| 16 | |
| 17 | export const NewCustomCode = ({ |
| 18 | code, |
| 19 | highlighedLines = [], |
| 20 | showLineNumber = false, |
| 21 | hiddenLines = [], |
| 22 | typesToDisplay |
| 23 | }: { |
| 24 | code: string; |
| 25 | highlighedLines?: Array<number>; |
| 26 | showLineNumber?: boolean; |
| 27 | hiddenLines?: Array<number>; |
| 28 | typesToDisplay?: TypeViewInferface[]; |
| 29 | }) => { |
| 30 | |
| 31 | |
| 32 | const [inner, setInner] = useState("") |
| 33 | const [position, setPosition] = useState({ |
| 34 | top: -200, |
| 35 | left: -400 |
| 36 | }) |
| 37 | |
| 38 | useEffect(() => { |
| 39 | // we grab the content insite the lsp from data-lsp element |
| 40 | // |
| 41 | // |
| 42 | const enter = (e, item, content) => { |
| 43 | // the the top & left position of the item |
| 44 | const top = item.getBoundingClientRect().top + window.scrollY; |
| 45 | const left = item.getBoundingClientRect().left; |
| 46 | console.log(top, left) |
| 47 | setPosition({ |
| 48 | top: top + 36, |
| 49 | left: left, |
| 50 | }); |
| 51 | setInner(content); |
| 52 | console.log("changing content to :>>>", content) |
| 53 | } |
| 54 | |
| 55 | const leave = () => { |
| 56 | setPosition({ |
| 57 | top: -500, |
| 58 | left: -500 |
| 59 | }) |
| 60 | } |
| 61 | |
| 62 | const lsp = document.getElementsByTagName('span'); |
| 63 | if (lsp) |
| 64 | for (const item of lsp as any) { |
| 65 | const content = item.getAttribute('data-lsp') as string; |
| 66 | if (content) { |
| 67 | item.addEventListener('mouseenter', (e) => { |
| 68 | enter(e, item, content) |
| 69 | }); |
| 70 | item.addEventListener('mouseleave', leave); |
| 71 | } |
| 72 | } |
| 73 | return () => { |
| 74 | if (lsp) |