Draft-js: Give option for fixed height Editor

[d4nyll]

This is a feature request/question.

What is the current behavior?
Right now, if the content exceeds the current editor height, the editor will increase its height to match the content.

What is the expected behavior?
It would be great if there's an option to set a fixed height for the editor, if the content requires more space, a scrollbar will appear on the right. This is similar to the default WordPress editor:

[joshmarinacci]

Couldn't this be done with CSS?

Sent from planet Earth

On Jul 11, 2016, at 1:27 AM, Daniel Li [email protected] wrote:

This is a feature request/question.

What is the current behavior?
Right now, if the content exceeds the current editor height, the editor will increase its height to match the content.

What is the expected behavior?
It would be great if there's an option to set a fixed height for the editor, if the content requires more space, a scrollbar will appear on the right. This is similar to the default WordPress editor:

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[sophiebits]

Try adding a max-height and overflow: auto on .public-DraftEditor-content.

[grifx]

If you are using css-modules:

.editor :global(.public-DraftEditor-content) {
  max-height: 200px;
  overflow: auto;
}

[tarjei]

I'm not happy with the suggested solutions to this problem because they depend on knowing the editor height. I need to change it depending on the height of another element, thus I am forced to use js to set the height.

[tarjei]

I ended up with the following hack:

function createStyleSheet() {
  let style = document.getElementById('extra-sheet')
  if (style) {
    return style.sheet
  }
  // Create the <style> tag
  style = document.createElement('style')
  style.id = 'extra-sheet'
  // WebKit hack :(
  style.appendChild(document.createTextNode(''))
  document.head.appendChild(style)
  return style.sheet
}
function addCSSRule(sheet, selector, rules, index) {
  if ('insertRule' in sheet) {
    sheet.insertRule(selector + '{' + rules + '}', index)
  } else if ('addRule' in sheet) {
    sheet.addRule(selector, rules, index)
  }
}

    const sheet = createStyleSheet()
    addCSSRule(
      sheet,
      '.LessonPageVideoSection .Note .DraftEditor-root',
      'height: ' + (height) + 'px;'
    )

[przemek-nowicki]

You could also try to use editorClassName attribute and provide css class with e.g. max-height

import` style from 'editorStyle.css'
....
<Editor editorClassName={this.style.editorClassName}/>

And inside editorStyle.css

.editorClassName  {
  min-height: 250px;
  max-height: 500px;
}