Jak dodac menu pojawiajace sie na hover

Hej, tutaj https://playground.lexical.dev/ mozecie zauwazyc ze w momencie w ktorym kursor jest na danym paragrafie, pojawia sie przycisk po lewej stronie ktory nie wychodzi poza obszar edytora. Jak klikam "zbadaj element" to w ogole nie moge znalezc tego przycisku. Jak to jest zrobione bo chcialbym zrobic dokladnie cos takiego samego

No przecież tuż obok masz element <div class="icon draggable-block-menu" i on się po prostu pojawia i zmienia transform: translate jak najeżdżasz na paragrafy. Jak dasz "break on -> attribute modifications" to widać kod js który to robi:

    l.exports.useEffect((()=>{
        o.current && function(e, t, n) {
            if (!e)
                return t.style.opacity = "0",
                void (t.style.transform = "translate(-10000px, -10000px)");
            const i = e.getBoundingClientRect()
              , o = window.getComputedStyle(e)
              , r = t.getBoundingClientRect()
              , s = n.getBoundingClientRect()
              , a = i.top + (parseInt(o.lineHeight, 10) - r.height) / 2 - s.top;
            t.style.opacity = "1",
            t.style.transform = `translate(4px, ${a}px)`
        }(a, o.current, t)
    }

więc po prostu trochę javascripta, myślę że to można zrobić dużo łatwiej używając a:hover::before ale jak kto woli.

Ale chcesz zrobić taki przycisk żeby dało się przemieszczać paragrafy?

obscurity napisał(a):

No przecież tuż obok masz element <div class="icon draggable-block-menu" i on się po prostu pojawia i zmienia transform: translate jak najeżdżasz na paragrafy. Jak dasz "break on -> attribute modifications" to widać kod js który to robi:

    l.exports.useEffect((()=>{
        o.current && function(e, t, n) {
            if (!e)
                return t.style.opacity = "0",
                void (t.style.transform = "translate(-10000px, -10000px)");
            const i = e.getBoundingClientRect()
              , o = window.getComputedStyle(e)
              , r = t.getBoundingClientRect()
              , s = n.getBoundingClientRect()
              , a = i.top + (parseInt(o.lineHeight, 10) - r.height) / 2 - s.top;
            t.style.opacity = "1",
            t.style.transform = `translate(4px, ${a}px)`
        }(a, o.current, t)
    }

więc po prostu trochę javascripta, myślę że to można zrobić dużo łatwiej używając a:hover::before ale jak kto woli.

Ale chcesz zrobić taki przycisk żeby dało się przemieszczać paragrafy?

Nie tyle paragrafy co bloki w edytorze WYSIWYG. Dodatkowo chcialbym zeby oprocz opcji przemieszczania byla opcja do usuniecia calego bloku, czyli najezdzam na przycisk delete i blok sie podswietla i klikajac moge go usunac. Ale to problem nie na ten temat wydaje mi sie, grunt ze widze jak to tutaj rozwiazali. W moim rozwiazaniu kazdy blok jest jeszcze dodatkowo zawarty w divie ktory zawiera przestrzen na przyciski do przemieszczenia i usuwania i przestrzen na sam blok. Dzieki