feat(forum): add 'Preview' support

[wescopeland]

This PR adds preview functionality to the site forum for creating new posts, editing existing posts, and posting new replies.

Technical Implementation

• A new endpoint has been added to construct forum post previews. It accepts text content, sends it to the shortcode parser, then returns the HTML content for what the post would look like (rendered within the forum post Blade component) in its response.
• Upon clicking the Preview button, a new JavaScript function, loadPostPreview(), is called which makes the new API request. This function also enables visibility of a loading indicator and guards against accidental duplicate preview submissions.
• When the API call resolves, the JavaScript function replaces the inner HTML of an empty "preview" div with the returned HTML content from the endpoint's response.

Currently, this is implemented only for the forum. It is not implemented for user private messages. I was afraid of blowing up the scope of this PR any further; private messages can come next.

---

Forum.Post.Preview.mp4

[Jamiras]

There's something about this post (http://localhost/editpost.php?comment=145736) that's causing a problem in the preview.

Actual:

Preview:

The spoiler contents aren't inside the spoiler.

[wescopeland]

@Jamiras Want to make sure we're seeing the same thing, when I preview editing this post I am seeing content inside the spoiler. If you do npm run build and then don't spin up your local Vite dev server, are you still able to reproduce this issue?

Brave.Browser.mp4

[luchaos]

@Jamiras Want to make sure we're seeing the same thing, when I preview editing this post I am seeing content inside the spoiler. If you do npm run build and then don't spin up your local Vite dev server, are you still able to reproduce this issue?

Seems to be working fine with a production build of the frontend assets:
https://preview.retroachievements.org/editpost.php?comment=145736

Edit: nevermind - seems there's still an issue with how the preview renders it 🤔
https://preview.retroachievements.org/viewtopic.php?t=19615&c=145736#145736
https://preview.retroachievements.org/editpost.php?comment=145736

The post seems to be cut off? All the shortcode/post body is sent from what i can tell but the response is not complete.
Not quite sure yet why the rendered post stops short in the middle of it, resulting in spoiler tags not closing etc

[Jamiras]

@Jamiras Want to make sure we're seeing the same thing, when I preview editing this post I am seeing content inside the spoiler. If you do npm run build and then don't spin up your local Vite dev server, are you still able to reproduce this issue?

Yes, I'm still seeing it after running .hooks/post-merge, which updates all the dependencies then runs npm run build.

luchaos has also pointed out that it is occurring on the preview site:

seems there's still an issue with how the preview renders it 🤔
https://preview.retroachievements.org/viewtopic.php?t=19615&c=145736#145736
https://preview.retroachievements.org/editpost.php?comment=145736

The post seems to be cut off? All the shortcode/post body is sent from what i can tell but the response is not complete.
Not quite sure yet why the rendered post stops short in the middle of it, resulting in spoiler tags not closing etc

I'm seeing the same thing in both places. The post does appear to be truncated:

[Jamiras]

It seems to be getting split up into multiple variables when sent to the server:

Corresponding input:

[url=https://retroachievements.org/historyexamine.php?d=1678492800&u=Searo]Link[/url]
[ach=174916]

Seems to be the ampersand. Can reproduce with this simple case:

[wescopeland]

I've made the suggested changes; I'm able to repro the issue now with the input "M&M's are great!". I'll work now to resolve.

[wescopeland]

        body: `body=${encodeURIComponent(postContent)}`,

This may be the solution, with this change I'm able to see a preview of "M&M's are great!". The ampersand was a good idea, I bet it was being treated as a delimiter before.