search

bymi15 / react-edit-text

Simple 'click to edit' editable text component for React
https://www.npmjs.com/package/react-edit-text
MIT License
53 stars 10 forks source link

＜＞Fragments instead of divs ＜/＞ #9

Closed christoph-codes closed 2 years ago

christoph-codes commented 3 years ago

Issue

So one issue I've run into was getting console erros saying that div's can't be a child of a paragraph tag or anchor link etc. Would it be possible to render a fragment instead of a div so that one could edit only the text and not the HTML structure of an element?

Potential Solution

Another thought is similar to how React Bootstraps component library allows you to pass an "as" prop and you can render the prop as whatever element you choose.

<EditTextArea as="p" name="sectionTitle" onSave={updateValue} />

Which then outputs a paragraph tag that then becomes editable for just the content.

Let me know if clarification is needed.

Kudos

Awesome package by the way!

bymi15 commented 3 years ago

Hi Christoph,

Thanks a lot for your constructive feedback. I will definitely consider this issue for the next update!

Regards, Brian.

christoph-codes commented 3 years ago

Sounds good! Let me know if I can help, I'd be happy to contribute if wanted/needed!

bymi15 commented 3 years ago

Sounds good! Let me know if I can help, I'd be happy to contribute if wanted/needed!

Please feel free to be the first contributor to this open-source package! 🥇

github-actions[bot] commented 2 years ago

Stale issue message

christoph-codes commented 2 years ago

Did not even see this response or I would have jumped on it!

bymi15 commented 2 years ago

@christoph-codes Hey, no worries. Just hold on a bit before starting anything as i'm currently working on refactoring the whole project. I'm migrating from classes to functional components using React hooks.

christoph-codes commented 2 years ago

Perfect! Let me know if I can help in anyway!

bymi15 commented 2 years ago

Hey @christoph-codes Please feel free to start contributing as https://github.com/bymi15/react-edit-text/pull/23 has been merged just now!

For this issue you raised though, now that I think again I'm not sure of a good use case for why the EditText or EditTextarea component would be a child of <p> or <a> tags. Although, what would make more sense is to be able to provide a render function for the display mode. For example, <EditText renderDisplay={(value) => <a href={'http://'+value}>{value}</a>}/> showEditButton which would allow for an editable and clickable URL component.

What do you think?

christoph-codes commented 2 years ago

Gotcha. So the use case that we had before is let's say styling is handled on the element being rendered and we want that text editable, the issue comes when that element, let's call it a p tag for now, now injects a div into a p tag which renders incorrect HTML markup and could eventually effect the styling.

If I style the p tag we would assume the styling gets inherited inside the injected div... but to be more specific we would need to style the p > div...

By rendering nothing the injection just adds the fragment to add the edit text functionality but doesn't eliminate the native styling...

Does this make sense?

bymi15 commented 2 years ago

Yeah that makes sense. You can have a go at implementing this and raising a PR. But I guess my example above also covers your usecase since you can pass in whatever element you wish in the renderDisplay function.

christoph-codes commented 2 years ago

Your absolutely right! I was looking at something else in your example and overlooked the solution!

github-actions[bot] commented 2 years ago

Stale issue message