Display non-markdown content in the WYSIWYG mode of the Static Site Editor
Problem to solve
Static site generators rely on markdown pages to organize content, but the content is almost never exclusively written in markdown. Many generators rely on additional markup to provide additional options not provided by Markdown and it is completely valid to write raw HTML alongside markdown content.
The problem is that when the Static Site Editor loads the markdown page contents, it expects to be able to render markdown into HTML for rich text formatting. If that content is not valid markdown, the editor can get tripped up and will attempt to format the code as standard paragraph content.
Intended users
User experience goal
A user of the WYSIWYG mode in the Static Site Editor should be able to visually distinguish between markdown content and any additional code or markup.
Proposal
When we load content into the WYSIWYG editor, we should identify any non-markdown content and visually treat it in a way that distinguishes it from the editable rich-text content.
Further details
- This issue doesn't include the ability to edit non-markdown content. We can ship this first and then work on #216837 (closed)
- This issue implies that front matter is already being excluded from the editor as defined in #216834 (closed)
Documentation
Availability & Testing
What does success look like, and how can we measure that?
Acceptance criteria
- All page content except front matter is represented in the WYSIWYG mode of the Static Site Editor
- A user can visually distinguish between editable markdown content and any additional, non-markdown content
TODO (implementation issues)
-
kramdown (#220340 (closed)) %13.1 -
HTML (#221078 (closed)) %13.2 - Account for HTML comments too
-
embedded ruby ( .erb
) (#221079 (closed)) %13.2 -
Identifiers (#221082 (closed)) %13.2 -
Font Awesome (#221083 (closed)) %13.2 - This ends up needing to be accounted for in the HTML custom renderer so dashing vs. checking this off.I was wrong, we have inline uses of this.