Bundling docs are incorrect and incomplete

Open
#3,436 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
38/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, vite, webpack
Domain
documentation

Research direction

Start with the TinyMCE 6 Vite ES6 npm and Webpack ES6 npm documentation pages, especially the CSS import examples. Reproduce the Vite imports and iframe behavior, then update the examples and explanations so the bundling guidance works and the Webpack page is complete.

Written by the indexing model from the issue text.

Description

bug
  1. Bundling using https://www.tiny.cloud/docs/tinymce/6/vite-es6-npm/, the lines 
    import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.js';
import contentCss from 'tinymce/skins/content/default/content.js';
    don't work: Uncaught SyntaxError: The requested module 'http://localhost:5174/node_modules/.vite/deps/tinymce_skins_content_default_content__js.js?v=1dcb8b20' doesn't provide an export named: 'default'
  2. When removing the from stuff from the imports like this: 
    import 'tinymce/skins/ui/oxide/content.js';
import 'tinymce/skins/content/default/content.js';
    the css gets applied to the whole webpage rather than only the editor, so the fonts change (body {font-family:sans-serif} from TinyMCE css). TinyMCE should edit the shadow root of its iframe and not my document root. Oh wait, it doesn't even generate an iframe when bundling it using Vite, it just makes a div? What's the cause of that?
  3. https://www.tiny.cloud/docs/tinymce/6/webpack-es6-npm/ is incomplete
Dominant language
JavaScript
Stars
96
Forks
219
Avg merge
1d 4h
Merged PRs (30d)
26

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from tinymce/tinymce-docs

All issues in tinymce/tinymce-docs

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.