Ionaru / Ionaru/easy-markdown-editor

Decouple preview (full) from editor

Open
#296 2 comments 0 reactions 0 assignees View on GitHub
Question
Dominant language
JavaScript
Stars
3.1k
Forks
363
PR merge metrics
No merged PRs in 30d

Description

I'm trying to decouple the full preview from the CodeMirror editor, and add GitHub style write/preview tabs using [this method](https://github.com/Ionaru/easy-markdown-editor/issues/210#issuecomment-768285674).

![Screenshot 2021-02-03 at 17 39 15](https://user-images.githubusercontent.com/935529/106778915-c1cb4480-6646-11eb-8ccf-103d3b94ad3c.png)

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?

Contributor guide

Open the contributing guide

Research direction

Start by inspecting the preview container and its CodeMirror integration described in the issue, then review how the editor UI handles the requested write/preview tabs. Done means the full preview is decoupled, can autogrow without scrolling unless maxHeight is set, and the tabs provide the requested GitHub-style workflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.