Changing copy behavior through components / renderers

[BenchBadr]

As you may know, copying rendered LaTeX results into weird results

$5x \to $

5
𝑥
5x

for example.
To address this issue I decided to make a component CopyWrapper as follows :

const CopyWrapper = ({ textToCopy, children }) => {
  const handleCopy = (e) => {
    e.preventDefault();
    e.clipboardData.setData('text/plain', textToCopy);
    e.target.blur();
  };

  return (
    <span onCopy={handleCopy}>
      {children}
    </span>
  );
};

and putting automatically textToCopy to the actual LaTeX code which would allow me to copy code. One issue remains : I can't seem to edit the results of rehype-katex.

const _mapProps = (props) => ({
  ...props,
  remarkPlugins: [remarkMath, [remarkGfm, { singleTilde: false }],
],
  rehypePlugins: [rehypeKatex, rehypeRaw],
  components: {
    math: ({ value }) => <CopyWrapper textToCopy={value}><BlockMath>{value}</BlockMath></CopyWrapper>,
    inlineMath: ({ value }) => <CopyWrapper textToCopy={value}><InlineMath>{value}</InlineMath></CopyWrapper>,

this is what I want to achieve basically, what's the proper way to do so ? Thanks in advance!

[wooorm]

I don’t know, perhaps you can make a reproduction so it’s clear what you‘re talking about exactly.

I believe this has little to do with LaTeX, as that is a typesetting language. But with the markup that, in this case, is generated by KaTeX.

I worry about your proposed solution, reading/writing from/to the clipboard isn’t always possible for security reasons. It also seems buggy: what if someone also copied the word before? After? A whole paragraph? You are preventing that.

Lastly, math and inlineMath aren’t components. So your pseudo-code doesn’t work.

I would google KaTeX + clipboard and work from there. If this is an issue, it is likely that other people have seen it too.
The approach I would start with is, if KaTeX generates markup that’s visually pretty but crappy for copy/pasting, to instead have a component that generates pretty markup for copy-pasting, and a separate hidden but visually pretty representation.