Add a comment preview in the front end

[keesiemeijer]

We should add a preview for user contributed notes in the front end. This will aid the users in submitting notes without mismatched code shortcodes.

This is similar to #1180, but for the front end.

[keesiemeijer]

Add comment preview after comment form

[keesiemeijer]

1865.patch​ adds a live preview of the comment after the comment form with a AJAX. The preview is updated after you stop typing for 1.5 seconds. A button preview note is added to the editor. By applying the comment text filters in the AJAX callback all syntax highlighting and other styling is applied as it is with a submitted comment.

I've moved the syntaxhighlighter_htmlresult filter from /inc/handbooks.php to /functions.php because source code could be in post content, comments and handbooks.

[keesiemeijer]

example of preview

[coffee2code]

#1180 was marked as a duplicate.

[keesiemeijer]

I've noticed it doesn't update the preview when using the quicktag buttons.

[keesiemeijer]

Make preview a standalone feature. Update preview after clicking QuickTag buttons

[keesiemeijer]

1865.1.patch​ makes the preview modular so it can be reused for adding a preview to the comment editor as described in #1180. With this patch the preview is updated after clicking a QuickTag button.

[coffee2code]

In 3788:

developer.wordpress.org: Add a comment preview to the front-end form for user contributed notes.

• Preview is fetched via AJAX.
• Preview updates 1.5 seconds after user stops typing.
• Adds editor toolbar button "preview note".
• Moves filtering of 'syntaxhighlighter_htmlresult' outside of just handbooks since it can also be applied elsewhere.

Props keesiemeijer.
Fixes #1865.