search

bonafideduck / react-highlight-within-textarea

React component for highlighting bits of text within a textarea
93 stars 13 forks source link

How to set className / styles? #186

Closed wscourge closed 5 months ago

wscourge commented 5 months ago

More specifically, I want the editor to take the whole height of it's parent component.

Watch the cursor changing below:

https://github.com/bonafideduck/react-highlight-within-textarea/assets/16985871/c759ac0c-f8e8-4396-8597-da1deda13ee9

I added the border: 1px solid red; via the browser's console for the presentation purposes.

As you can see, right now the <HighlightWithinTextarea /> takes up only a single line of text. I want it to grow to the height of it's parent.

What I've tried with no results was:

  1. Passing an inline styles property.
  2. Passing an inline className property.

Kindly advise me on how to proceed - thanks!

bonafideduck commented 5 months ago

I don’t think I thought to have a way to pass inline styles or classes to the contained draft component. My guess is you are clicking in the enclosing box and draft isnt getting focus because it is one line tall. You could probably use css selectors on .DraftEditor-root.

wscourge commented 5 months ago

You could probably use css selectors on .DraftEditor-root.

OK, thanks - that'll do it I guess.

Edit: This worked:

.DraftEditor-root,
.DraftEditor-editorContainer,
.public-DraftEditor-content {
  height: 100%;
}