When embedding PageDown editor in my webpage, how I can I stop it from doing conversion in real time?

Question

I noticed from the docs that PageDown offers a refreshPreview method. I'd like to turn off real-time editing and use this method to only do the conversion when the user presses a preview button.

I tried having the onPreviewRefresh hook return false, but it still updates on every change event.

Here is my code:

$(document).ready(function() {
  var converter = Markdown.getSanitizingConverter();
  Markdown.Extra.init(converter, {table_class: "table table-striped"});
  var editor = new Markdown.Editor(converter);

  editor.hooks.chain("onPreviewRefresh", function () {
    console.debug("the preview has been updated");
  });

  editor.run();

  (function() {
    $('#wmd-preview').hide();

    $('button.preview').click(function() {
      editor.refreshPreview();
      $('#wmd-editor').hide();
      $('#wmd-preview').show();
    });

    $('button.edit').click(function() {
      $('#wmd-preview').hide();
      $('#wmd-editor').show();
    });
  })();
});

---

Update:

Commenting out the following line (line 909 here) will actually accomplish what I want:

//timeout = setTimeout(makePreviewHtml, delay);

However, I'd be worried about unintended side effects, so I'd prefer a more surgical approach -- preferably one that doesn't require modifying the editor source code.

Answer 1

The update I added to my question actually led me to an answer.

Apparently, the startType var here in the PreviewManager function was provided expressly for this purpose. Changing it from delayed to manual has the desired effect (hopefully without unforeseen side-effects).

I'd feel more reassured if the setting had been offered as a Markdown.Editor configuration option.

Answer 2

There is one function called refreshPreview() which, according to the docs,

forces the preview to be updated. This method is only available after run() was called.

So you can probably call that function in the click handler to the button that you will create to control refreshes, for example:

var converter1 = Markdown.getSanitizingConverter();
var editor1 = new Markdown.Editor(converter1);
editor1.run();
editor1.refreshPreview(); //<- something like this

Now as for preventing a refresh on each keydown and keypress events (that's how PageDown does it I guess), I think you have at least two options:

• Write your custom javascript/jquery code that overrides keydown/keypress events for the input text area

• Edit file Markdown.Editor.js (around lines 593-627 in my version) so as to comment out the lines where event handlers are set up for keypress and keydown events. In particular, I think it's the following line that triggers refreshes from key events:

  util.addEvent(panels.input, "keydown", handleModeChange);
  

Hope this helps.