Filter hook for preview

[ryanburnette]

I'd like to hook onto the preview WP-Markdown renders below the editor. Is there a filter tag for that available? If not can you point me to the code where the preview is rendered. I don't mind doing a pull request.

[stephenharris]

In the case of bbPress reply/topics and comments, the function WordPress_Markdown::post_textarea_prettify() is used. For posts/pages, it's just added by javascript. (I forget why, but I guess there wasn't an appropriate hook available to attach WordPress_Markdown::post_textarea_prettify() to).

What you are looking to actually hook into? The initial rendering of the preview, or how the preview updates as the user types. For the latter, that is, of course, entirely javascript and so beyond the normal DOM events, there are no hooks.

[ryanburnette]

I'm planning to add the the_content filter to the preview because I need to process shortcodes in the preview.

I wasn't suggesting that there was an appropriate WordPress filter. I figured you could add one there.

On Jun 5, 2014, at 6:45 AM, Stephen Harris notifications@github.com wrote:

In the case of bbPress reply/topics and comments, the function WordPress_Markdown::post_textarea_prettify() is used. For posts/pages, it's just added by javascript. (I forget why, but I guess there wasn't an appropriate hook available to attach WordPress_Markdown::post_textarea_prettify() to).

What you are looking to actually hook into? The initial rendering of the preview, or how the preview updates as the user types. For the latter, that is, of course, entirely javascript and so beyond the normal DOM events, there are no hooks.

— Reply to this email directly or view it on GitHub.

[stephenharris]

That would be tricky. Shortcodes must be parsed server-side, which means you'd a client-side hook/event to listen to, and then perform an ajax request to the server to parse the shortcodes, and then put the restulting HTML in the preview.

Apart from the fact that not all shortcodes will work in the preview (some may require certain javascript files to be loaded to render correctly), you'll also have the latency of user-input to preview.

WordPress (in the TinyMCE) editor have gone down the route of allowing developers to register their shortcode with TinyMCE, which instead of displaying the shortcode, displays a placeholder. In theory, something similar would be possible (and perhaps easier) here:

1. Build an API by which developers can register a shortcode and a 'placeholder' (HTML) of their choice,
2. Store (and make accessible) those pairs client-site (e.g. wp_localize_script())
3. When the preview is updated, repace any registered shortcode with the placeholder

I believe the last point can be achieved in a similar way to how prettyPrint is supported in the preview:

  editor.hooks.chain("onPreviewRefresh", function () {
       $('.wmd-preview pre').addClass('prettyprint');
       prettyPrint();
  });

If you're able to achieve (1) and (2), then (3) should be relatively, and I'd happily make any necessary changes.

[ryanburnette]

Ah. I can do some Ajax to handle it. Closing.

On Jun 5, 2014, at 6:20 AM, Stephen Harris notifications@github.com wrote:

That would be tricky. Shortcodes must be parsed server-side, which means you'd a client-side hook/event to listen to, and then perform an ajax request to the server to parse the shortcodes, and then put the restulting HTML in the preview.

Apart from the fact that not all shortcodes will work in the preview (some may require certain javascript files to be loaded to render correctly), you'll also have the latency of user-input to preview.

WordPress (in the TinyMCE) editor have gone down the route of allowing developers to register their shortcode with TinyMCE, which instead of displaying the shortcode, displays a placeholder. In theory, something similar would be possible (and perhaps easier) here:

Build an API by which developers can register a shortcode and a 'placeholder' (HTML) of their choice, Store (and make accessible) those pairs client-site (e.g. wp_localize_script()) When the preview is updated, repace any registered shortcode with the placeholder I believe the last point can be achieved in a similar way to how prettyPrint is supported in the preview:

editor.hooks.chain("onPreviewRefresh", function () { $('.wmd-preview pre').addClass('prettyprint'); prettyPrint(); }); If you're able to achieve (1) and (2), then (3) should be relatively, and I'd happily make any necessary changes.

— Reply to this email directly or view it on GitHub.