fix(NcRichContenteditable): adjust styles and use CSS Modules to avoid global styles leak

[ShGKme]

☑️ Resolves

• Fix Broken styling in slash command nextcloud/mail#9310
• Fix smart picker seems to be broken nextcloud/server#43478

NcRichContenteditable has global CSS styles to style Tribute autocomplete. It works fine, until there are more than one version of those styles on the page. Styles should be scoped.

@szaimen @hamza221 @JuliaKirschenheuter Could you please check it in your apps? The bug was not reproducible for me...

Screenshots

Note, there is no data-v-<hash> attrs in both cases.

Before	After

🚧 Tasks

• Use CSS Modules for scoping styles of Tribute autocomplete (scoped doesn't work for non-component styles and doesn't truly scope from styles outside, having only one-way scoping)
• Adjust styles, remove some unneeded classes and fix typos in CSS
  • Some issues were not noticeable before, because of other global styles
• Add CSS Modules support for Styleguidist

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[ShGKme]

/backport to next

[JuliaKirschenheuter]

works fine now! Thanks a lot!

[susnux]

Works and much cleaner!
(Funny how complex the webpack config is vs. no changes in the vite config^^)

[ShGKme]

(Funny how complex the webpack config is vs. no changes in the vite config^^)

Vite has pre-config for Rollup for "typical" bundling, but then you need to write your own plugin if you have something more special 😝