SimpleMDE shrinks in height when clicking side-by-side view or full screen

[iyuvalk]

Hi, I'm kind of a newbie in the front-end development in general and especially to the SimpleMDE (used to develop quite a lot in ASPX back in the day) so I hope you'll go easy on me here... (-;

I'm trying to use the SimpleMDE in my simple react code and it works just fine except for one thing, when the user switches to full screen or side-by-side modes the control height shrinks to about 85 pixels in height and that happens even when I set the minHeight of the control to the requested height (say 600px)

Here's my code (ignore the .bak files plz): src.zip

Here are two screenshots that show the control's size (using the great MezerTools from https://bayden.com/mezer/) when the control is in normal mode and in side-by-side mode when it shrinks:

Any ideas?

Tnx, Yuval.

[RIP21]

I've read this one :) But it will take me some time to get back to it and investigate it further. Sorry, I have a full-time job, hence it's quite hard to allocate time, but I'll try. Just let me know if you will figure it yourself so I don't waste time :) And maybe somebody else will benefit from your solution! :)

[RIP21]

And, also. If you can, please make a reproduce in codesandbox.io. It's an amazing site for bug reports reproductions and just for examples making :) It saves a lot of time for an author of the library to figure out what is wrong :)

[iyuvalk]

Wow, thanks a lot for your quick reply! I will try to reproduce it in codesandbox.io right now. I had no idea such thing exists.

[iyuvalk]

Well... in the codesandbox.io I get new errors that I don't get on my workstation, like this one:

SyntaxError
/src/App.js: Support for the experimental syntax 'classProperties' isn't currently enabled (37:9):

  35 | 
  36 | class FloatingActionButtonZoom extends React.Component {
> 37 |   state = {
     |         ^
  38 |     value: 0,
  39 |   };
  40 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

  35 | 
  36 | class FloatingActionButtonZoom extends React.Component {
> 37 |   state = {
     |         ^
  38 |     value: 0,
  39 |   };
  40 | 

[RIP21]

@iyuvalk make sure you use React preset there. Because it uses create-react-app under the hood means it should work with class properties. If it doesn't help, well, I think you can add some babel plugins to the config in codesandbox too.

[iyuvalk]

I'm not sure what I'm doing wrong here... however, like I mentioned - this is NOT the problem that I get when I run my code locally, this happens ONLY on codesandbox, so perhaps it's not so important to fix at all...

This is the codesandbox screen (I couldn't find any "React preset" there so far):

[iyuvalk]

Ok. I managed to resolve this issue in codesandbox but it still doesn't like my code... )-: Perhaps you can test the original issue (with the side-by-side/full-screen view) on your local PC?

This is how it looks like on codesandbox:

[RIP21]

Man. You're definitely using a not React preset on Sandbox. You should use this preset.

Or if you logged in, this preset.

Or if you're logged in and on dashboard this preset.

Also, don't forget to import easymde css cause it seems to be missing.

[iyuvalk]

OK... Finally I've got it working in codesandbox.io. Now it's working here: https://codesandbox.io/s/k9yn1mq11o

However, not surprisingly, the problem that happens on my PC happens here as well: Once you click the side-by-side or full-screen editing button the control shrinks to about the height of a single line of text.

Any ideas on how to fix this?

Tnx.

[btzr-io]

The actual issue is the fullscreen mode:

• Your current layout (wrappers) breaks the fullscreen styles.
• By default easy-markdown-editor enforces full-screen mode when side by side is active.

See: https://github.com/Ionaru/easy-markdown-editor/issues/21

[btzr-io]

There is no option provided to disable this behavior, but you can try to:

• Modify your layout so the editor can fully expand on the parent container.
• Create your own sideBySide action for the toolbar.
• If you don't need to support the fullscreen mode try to remove or edit the fullscreen styles from the imported css file: https://github.com/Ionaru/easy-markdown-editor/blob/master/src/css/easymde.css

[iyuvalk]

Thanks. When you say "Your current layout (wrappers) breaks the fullscreen styles."

Can you explain what I should do to fix it? As I mentioned earlier - I'm pretty new to React development so I need a bit more info to direct me to properly fix it... Tnx.

[btzr-io]

I mean the HTML structure or the parent component of the editor but it should work since the editor is actually using position: fixed

[btzr-io]

A parent div .react-swipeable-view-container is enforcing:

{
  will-change: transform;
  transform: translate(0%, 0px);
} 

This is what it breaks the position:fixed of the editor elements: https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform

[iyuvalk]

Hmmm.... Is it possible to have the side-by-side editing enabled without going into full screen mode?

[btzr-io]

@iyuvalk https://github.com/RIP21/react-simplemde-editor/issues/90#issuecomment-472981720

[pi0neerpat]

@btzr-io any idea on how to import an edited version of easymde.css file without causing the fatal bug in #94 ? I have reproduced it there if you want to take a look.

I was unable to figure out how to prevent fullscreen (as mentioned in https://github.com/RIP21/react-simplemde-editor/issues/90#issuecomment-472985509) but I still had a few style changes I want to make like changing the toolbar size. Appreciate your help!

UPDATE: The .css file I was using was not correct. You need to copy the one from the easymde node module dist folder on your machine- not the one linked above

[btzr-io]

@pi0neerpat You should probably just create your own file to overwrite specific components and import it after:

/* Custom styles */
.editor-toolbar { .... }

You can also assign a custom ID on the component props for better style reference.

[RIP21]

I guess it's not actionable from a library standpoint so I'll close this one.