Expose a way to transform the copied code

[oriolcastro]

Hi @pomber first of all thanks for this amazing library!

Proposed feature

We are using Code Hike to display snippets of code in our dashboard/documentation. Most of them are static but we have several use cases for snippets where we would like to use dynamic variables (ie to use the API_KEY for the logged-in user or a specific URL).

This is an example of the type of code snippet:

curl -X POST "{{VARIABLE_URL}}/some-endpoint" -H "Content-Type: application/json" -d

Since the code blocks need to be defined as just strings we can not replace VARIABLE_URL dynamically as there is no such concept of placeholders in markdown. I thought to use the technique explained in this discussion #270. But, my efforts to use a useEffect didn't pay off as it is challenging to keep the DOM in sync when you do it outside of React.

That is why I came back to use the copy to clipboard feature. In our use case, it is ok to display the placeholders in the code block and only replace them in the code the users would copy and paste elsewhere.

Possible implementation

The proposed feature is to expose a way to transform the code content before it is copied to the clipboard.

This is an example of how this could look like:

transformCopyContent is just a function that receives the content originally copied to the clipboard and returns a new string.

The use of replace is just an example of how we could use this to pass variables from the React world via props as <MyMDXImportedFile url={SOME_DINAMIC_VARIABLE} /> The API is flexible enough to offer different ways to use it.

I have a working implementation here

If you think this addition makes sense I would be happy to contribute it.

[pomber]

I'm going to try to add a replace prop to CH components.

<CH.Code replace={{PLACEHOLDER: props.url}}>

```bash
curl -X POST "PLACEHOLDER/some-endpoint" -H "Content-Type: application/json" -d
```

</CH.Code>

would that work for you?

[oriolcastro]

Wow! Thanks for the super fast answer.

Yes, I think that would work for our use case. It was the alternate implementation I explored before settling for the function approach. But the object map is probably better as it doesn't open too much the API.

Would the replace affect only the code copied to the clipboard or also the rendered content?

[pomber]

Would the replace affect only the code copied to the clipboard or also the rendered content?

Both

[Dletta]

In this new replace attribute you are implementing, would it be possible to support multiple Placeholders?

<CH.Code replace={{PLACEHOLDER1: props.url, PLACEHOLDER2: props.path}}>

I am asking since I know I would need to be able to add multiple replacements for my documentation.

[pomber]

In this new replace attribute you are implementing, would it be possible to support multiple Placeholders?

Yes.

I'm working on an annotations refactor. I'll try to add the replace prop after that.