Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Make components compatible with MathML #329

Open
Jazzpirate opened this issue Dec 1, 2024 · 4 comments · May be fixed by #330
Open

Feature Request: Make components compatible with MathML #329

Jazzpirate opened this issue Dec 1, 2024 · 4 comments · May be fixed by #330

Comments

@Jazzpirate
Copy link

For a project I'm working on, I wanted to have Popups on MathML nodes. Currently, Popover (and possibly/likely other components?) always use <div> nodes as wrappers for the trigger, which breaks if the trigger occurs in a MathML node. I therefore had to copy-paste your implementation of Popovers and patch it to selectively use <mrow> instead.
Annoyingly, I then realized that I had to also copy the Binder component, since it has a trait guard E::Output: Deref<Target = web_sys::HtmlElement> (and MathML nodes are not HtmlElement). It seems that restriction can be weakened to E::Output: Deref<Target = web_sys::Element> (which MathML nodes implement), since it only seems to be necessary for calls to get_bounding_client_rect, which only requires Element.

My solution was for Popover to take an optional DivOrMrow implemented as

pub enum DivOrMrow {
    #[default]
    Div,
    Mrow,
}

with corresponding enums for NodeRefs, Elements etc.

If you're interested, I could open a pull request

@luoxiaozero luoxiaozero linked a pull request Dec 1, 2024 that will close this issue
@luoxiaozero
Copy link
Collaborator

luoxiaozero commented Dec 1, 2024

I changed the child type of PopoverTrigger to be generic in #330. Now you can do:

view! {
    <math display="block">
        <mfrac>
            <Popover>
                <PopoverTrigger slot>
                    <mrow>
                        <mn>"1"</mn>
                        <mo>"+"</mo>
                        <mi>"K"</mi>
                    </mrow>
                </PopoverTrigger>
                "Content 1 + k"
            </Popover>
        </mfrac>
    </math>
}

@Jazzpirate
Copy link
Author

Awesome :) One thing that confuses me though is:
in

let target_ref = NodeRef::<html::Div>::new();
you still use a NodeRef<Div> and attach that to the child of the trigger - that looks like it should break if that child is not a div-node...?

@luoxiaozero
Copy link
Collaborator

It’s so strange, now it can work even if it’s not a div node.

I will improve this.

@Jazzpirate
Copy link
Author

Huh, interesting - maybe leptos doesn't actually check that the tag matches when setting the NodeRef signal...? (I assume usually it should match by construction, when used as a node_ref=-attribute, so...)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants