Decouple preview (full) from editor

[sn3p]

I'm trying to decouple the full preview from the CodeMirror editor, and add GitHub style write/preview tabs using this method.

For this I need the preview to "autogrow" and render without having to scroll in its container (unless maxHeight options is set). The preview container is nested/appended within the CodeMirror container, and styled as an absolute positioned overlay on top of the editor. Which means the preview has the exact same dimensions as the parent (editor), and doesn't grow with its content.

Is there an option, trick or hack that will achieve this?

[sn3p]

I got it working by hiding CodeMirror-* and make the preview position relative, but am hoping for a less hacky solution:

.editor-toolbar.disabled-for-preview + .CodeMirror > :not(.editor-preview-full) {
  display: none;
}

.editor-preview-full {
  height: auto;
  overflow: visible;
  position: relative;
}

It would be easier if the preview wasn't nested inside the CodeMirror container, but I guess that's too much to ask 😆

But maybe we can introduce top-level classes to make everything easier to style? E.g. preview-full-active and preview-side-active instead of multiple classes all over the place.

So instead of:

.editor-toolbar.disabled-for-preview button:not(.no-disable) { ... }
.editor-preview-full.editor-preview-active { ... }
.editor-preview-side.editor-preview-active-side { ... }

Have something like this:

EasyMDEContainer.preview-full-active .editor-toolbar > *:not(.no-disable) { ... }
EasyMDEContainer.preview-full-active .editor-preview-full { ... }
EasyMDEContainer.preview-side-active .editor-preview-side { ... }

Think this is cleaner and easier to target elements.

[artknight]

@sn3p I like your hack. I am trying to do just the same :) I am wondering if you ended up with a different solution or kept this one?

Thanks!