Draft js codeblock text overflow

Question

I am having a hard time trying to prevent the overflowing text inside a codeblock. The problem seem to be only with codeblocks, which ignores its parent container width. As per the example below, when editing using a codeblock the text is not breaking into new lines when reaching the end of the container.

https://codesandbox.io/s/1oqr4xyy6j

Please post your code here. – Colin Ricardo Jul 11 '18 at 22:02 — Colin Ricardo, Jul 11 '18 at 22:02

score 1 · Accepted Answer · answered Jul 12 '18 at 00:31

1

Demo - https://codesandbox.io/s/r4qx32m8wm

I made this change in rich-editor.css

CSS

.RichEditor-editor .public-DraftStyleDefault-pre pre {
  white-space: normal;
}

answered Jul 12 '18 at 00:31

dysfunc

2,008
1
13
15

Colin Ricardo · Answer 2 · 2018-07-11T22:43:14.373

0

You can add the following to your CSS:

pre {
  overflow: hidden;
}

Working example here.

edited Jul 11 '18 at 22:43

answered Jul 11 '18 at 22:15

Colin Ricardo

16,488
11
47
80

Tried that as a workaround, but doesn't seem to be the expected behavior as shown here https://draftjs.org/ – adavia Jul 11 '18 at 22:22

Draft js codeblock text overflow

2 Answers2