search

codyparker / react-transform-words

React component that transforms words in a block of text with CSS changes, click actions, and more.
2 stars 0 forks source link

Can we add contentEditable property. #2

Open HarishSha opened 5 years ago

codyparker commented 5 years ago

Hey HarishSha,

You can pass in additional HTML attributes for each matched word in the word objects array. So, if you wanted to have contenteditable="true" added to the tag created for the matched text, you can do that with something like:

[
  {
    word: "edit me",
    extraProps: {
      contentEditable: true,
    },
  },
]

That would add the contentEditable attribue to the text "edit me" when matched by the transformer.

Take a look at the examples for more info.

HarishSha commented 5 years ago

But i want to make whole as editable content. and then marking the word as i type...

codyparker commented 5 years ago

Oh, I think I see. I'd have to look into the best way to implement something like that.

To be clear, you're wanting a large text area to type in and then have the Transformer component match their text as the user is typing with a set of matchWords? So, for example, if they typed in a matched word, it could automatically highlight/underline/whatever it?

HarishSha commented 5 years ago

Yes, exactly and user can replace that word as well. So basically I am making a spell checker. If user types wrong word then it will get highlighted and then on clicking highlighted word, there would be dropdown showing suggestions. And then user can select one of them to replace wrong with correct one. I've already built it. Will deploy soon on GitHub. And big thanks to your library. It helped me.

codyparker commented 5 years ago

OK, that sounds great - it's already built then? Did you find a good workaround using react-transform-words, or use something else?

I'll check it out when it hits github. Thanks!