Pass any component inside editable Paragraph in Ant Design

[deadcoder0904]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I have a use-case where I want to make a link content-editable as well as clickable. Currently, it looks like:

This does solve the content-editable issue but is not clickable. And no other way to make it clickable.

I'm unable to do it since Ant Design only supports string as a child. I've tried different ways but can't make this work.

What does the proposed API look like?

The proposed API looks like:

<Paragraph
        href={editableText}
        editable={{
          onChange: updatedLink => {
            if (editableText !== updatedLink) {
              changeEditableText(updatedLink)
              onLinkChange(id, updatedLink, changeLink)
            }
          },
        }}
      >
        <a href={editableText}>{editableText}</a>
</Paragraph>

[ant-design-bot]

Hello @deadcoder0904. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

你好 @deadcoder0904, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。7 天内未跟进的 issue 将会被自动关闭。

[deadcoder0904]

I've attached the Codesandbox → https://codesandbox.io/s/antd-paragraph-not-work-mqgoy

It contains 2 things - a working case & a non-working case. I need the non-working case to be working :)

[ant-design-bot]

This issue is closed because it has been marked as Need Reproduce, but has not had recent activity.
If you can provide a reproduce, feel free to ping anyone of our maintainers to reopen this issue.
Thank you for your contributions.

[deadcoder0904]

@shaodahong I did add a repro, can u re-open it?

[afc163]

Try this way: https://codesandbox.io/s/antd-paragraph-not-work-y1ewd

[deadcoder0904]

@afc163 I already did, if u click on the edit button & then click outside it opens the URL which I don't want as I need to edit text without changing URLs

[RonLek]

@afc163 how did you work around this? I have a similar use-case where I need to be able to edit the link inside the Paragraph while also being able to click on it.