1

My goal is to create an interactive text box, where the user can type in content in markdown, and have it render into HTML on the fly.

So:

`some text`

Renders to:

<code>some text</code>

And displays in the same div where the user is typing, as monospace text some text.

So far I have a div:

<div id="input" contenteditable="true"></div>

And a script which uses RxJS and showdown:

var converter = new showdown.Converter();
var inputArea = document.getElementById('input');

var keyupStream =
    Rx.Observable.fromEvent(inputArea, 'keyup')
        .debounceTime(700);

var contentStream = keyupStream.map(function() {
    return inputArea.innerHTML;
});

contentStream.subscribe(function(content)  {
    inputArea.innerHTML = converter.makeHtml(content);
    placeCaretAtEnd(inputArea);
});

(placeCaretAtEnd() is from here.)

This only works in the most simplest of cases. If you type the input above (`some text`) it will render correctly. That part works.

The problem is that from then on, you have a mix of markdown and html and the renderer barfs because you're passing it soup.

So basically, I need a better approach. A way to display WYSIWYG content while supporting incremental input of markdown. Any ideas?

Having separate input and output text areas is easy to do, and is not what I'm going for.

Community
  • 1
  • 1
Jameson
  • 6,400
  • 6
  • 32
  • 53
  • The line/paragraph/block the cursor is on should be in Markdown, while the rest of the document is HTML. When the cursor leaves that block, then feed only that block through the parser and swap that with the Markdown for display. – Waylan Mar 14 '17 at 01:39
  • Of course, when the cursor moves to a different block, then you need to swap the HTML out for the Markdown so it can be edited again. So you'll need to store then entire document as Markdown in the background and keep tract of which blocks correlate between the HTML and Markdown. – Waylan Mar 14 '17 at 01:44
  • Hey, did you come up with a solution to this? I'm trying to accomplish the same thing but had the same problem. – codeMike Jan 08 '23 at 00:43

0 Answers0