WordPress.org

Making WordPress.org

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#1865 closed enhancement (fixed)

Add a comment preview in the front end

Reported by: keesiemeijer Owned by: coffee2code
Milestone: Priority: normal
Component: Developer Hub Keywords: has-patch has-screenshots
Cc:

Description

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.

Attachments (3)

1865.patch (17.8 KB) - added by keesiemeijer 3 years ago.
Add comment preview after comment form
1865.png (110.9 KB) - added by keesiemeijer 3 years ago.
example of preview
1865.1.patch (22.2 KB) - added by keesiemeijer 3 years ago.
Make preview a standalone feature. Update preview after clicking QuickTag buttons

Download all attachments as: .zip

Change History (12)

@keesiemeijer
3 years ago

Add comment preview after comment form

#1 @keesiemeijer
3 years ago

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
3 years ago

example of preview

#2 @coffee2code
3 years ago

#1180 was marked as a duplicate.

#3 @coffee2code
3 years ago

  • Owner set to coffee2code
  • Status changed from new to reviewing

#4 @keesiemeijer
3 years ago

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

@keesiemeijer
3 years ago

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

#5 @keesiemeijer
3 years ago

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.

This ticket was mentioned in Slack in #meta-devhub by coffee2code. View the logs.


3 years ago

#7 @DrewAPicture
3 years ago

  • Keywords has-screenshots added

#8 @coffee2code
3 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

This ticket was mentioned in Slack in #meta-devhub by drew. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.