DOC-2349: Update React integration cloud/self/hybrid hosted setup docs

[danoaky-tiny]

Ticket: DOC-2349

Site: DOC-2349 site

Changes:

• Swapped to use Vite instead of create-react-app, which is no longer maintained.
• Removed raw-loader usage.
• Use npm run dev instead of npm run start
• Replaced named import of TinyMCE with side-effect import.
• Reference Vite docs instead of create-react-app for deployment help
• Removed script-loader references.
• Edited eslint config changes.
• Removed all mentions of Webpack.
• Added an optional step for the "build for production" step at the end.

Pre-checks:

• [X] Branch prefixed with feature/7/ or hotfix/7/
• [X] ~modules/ROOT/nav.adoc has been updated (if applicable)~
• [X] Files has been included where required (if applicable)
• [X] Files removed have been deleted, not just excluded from the build (if applicable)
• [x] Files added for New product features, and included a release note entry.

Review:

• [ ] Documentation Team Lead has reviewed

[danoaky-tiny]

@ltrouton

I checked the built site as well and seems good to me. I noticed in the step 4 code snippet here that there is still a reference to import 'tinymce/skins/ui/oxide/skin.min.css'; which I believe needs to be removed.

For me, removing that line causes the editor to be blank. But removing these lines seems to have no effect though:

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content';
import 'tinymce/skins/ui/oxide/content';

So I suppose those could be removed?

[ltrouton]

@ltrouton

I checked the built site as well and seems good to me. I noticed in the step 4 code snippet here that there is still a reference to import 'tinymce/skins/ui/oxide/skin.min.css'; which I believe needs to be removed.

For me, removing that line causes the editor to be blank. But removing these lines seems to have no effect though:

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content';
import 'tinymce/skins/ui/oxide/content';

So I suppose those could be removed?

I think what we might be able to do is:

import 'tinymce/skins/ui/oxide/skin.js';

or even just

import 'tinymce/skins/ui/oxide/skin';

That way we don't have to worry about CSS bundling

Regarding

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content';
import 'tinymce/skins/ui/oxide/content';

I would keep those. Should they have a .js postfix or is it not necessary for this example?

[danoaky-tiny]

@ltrouton

I think what we might be able to do is:

import 'tinymce/skins/ui/oxide/skin';

That way we don't have to worry about CSS bundling

Done :+1:

Regarding

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content';
import 'tinymce/skins/ui/oxide/content';

I would keep those. Should they have a .js postfix or is it not necessary for this example?

Left out the .js ext to be consistent with all the other js imports.