Closed as not planned
Description
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and discussions and couldn’t find anything (or linked relevant results below)
Affected package
@mdx-js/[email protected]
Steps to reproduce
Context
A client-side React application
Repro
import React from 'react';
import * as runtime from 'react/jsx-runtime'
import { evaluate } from '@mdx-js/mdx';
/* ---------------------------------------
Create a component with the given injectable expression
--------------------------------------- */
const useInjectable = (
expression,
) => {
const [component, setComponent] = React.useState(() => () => <div>--</div>);
React.useEffect(() => {
evaluate(expression, runtime)
.then(({ default: evaluated }) => {
setComponent(() => evaluated);
});
}, [])
return component;
}
/* ---------------------------------------
Test the hook
--------------------------------------- */
export const TestInjectable = () => {
const Component = useInjectable('### Reach us by email: [{props.email}](mailto:{props.email})');
return (
<div className="whatever">
<Component
email="[email protected]"
/>
</div>
);
};
Actual behavior
The email prop is correctly injected into the text part of the link, but not into the href.
<h3>Reach us by email: <a href="mailto:%7Bprops.email%7D">[email protected]</a></h3>
My first guess what that Url encoding occurred before the injection, but I've had a similar behavior using an actual 'a' tag.
My second guess is that it's a security matter, but that's a real limitation in my case.
Expected behavior
I wonder if it's an issue or an intended behavior.
And I am interested if there is a way to force the injection.
Runtime
Any web browser
Package manager
Operating system
Windows 11
Build and bundle tools
webpack