Missing toolbar and dropdown menu style by third party plugin use

[joachimdoerr]

🐞 Bug report

The editor don't work with any of the plugins there I try to use. If I add a plugin and execute the building the editor will be work but the style for the toolbar is lost. and the dropdown menu's don't work correctly see the screen shots:

💻 Version of CKEditor

I use the current version v11.

  "devDependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "^10.0.2",
    "@ckeditor/ckeditor5-autoformat": "^10.0.2",
    "@ckeditor/ckeditor5-basic-styles": "^10.0.2",
    "@ckeditor/ckeditor5-block-quote": "^10.0.2",
    "@ckeditor/ckeditor5-dev-utils": "^10.0.0",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^6.0.0",
    "@ckeditor/ckeditor5-easy-image": "^10.0.2",
    "@ckeditor/ckeditor5-editor-classic": "^11.0.0",
    "@ckeditor/ckeditor5-essentials": "^10.1.1",
    "@ckeditor/ckeditor5-heading": "^10.0.2",
    "@ckeditor/ckeditor5-image": "^10.2.0",
    "@ckeditor/ckeditor5-link": "^10.0.3",
    "@ckeditor/ckeditor5-list": "^11.0.1",
    "@ckeditor/ckeditor5-paragraph": "^10.0.2",
    "@ckeditor/ckeditor5-theme-lark": "^11.0.0",
    "@ckeditor/ckeditor5-upload": "^10.0.2",
    "@ckeditor/ckeditor5-alignment": "^10.0.2",
    "@ckeditor/ckeditor5-font": "^10.0.2",
    "@ckeditor/ckeditor5-highlight": "^10.0.2",
    "@ckeditor/ckeditor5-table": "^10.1.0",
    "ckeditor5-rexlink": "^1.1.1",
    "ckeditor5-reximage": "^1.1.0",
    "ckeditor5-super-sub": "^1.0.2",
    "@wwalc/ckeditor5-emoji": "^10.0.2",
    "postcss-loader": "^2.1.5",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "webpack": "^4.15.0",
    "webpack-cli": "^3.0.8"
  },

📋 Steps to reproduce

1. build with one from the plugins "ckeditor5-rexlink, ckeditor5-reximage, ckeditor5-super-sub, @wwalc/ckeditor5-emoji"
2. show editor view

✅ Expected result

Full functional Editor with Toolbar style and working dropdown menus

❎ Actual result

Missing Toolbar and dropdown menus styles.

📃 Other details that might be useful

All plugins will be work with v10.0

wwalc/ckeditor5-emoji#5

Build Message:

➜  ckeditor5-build-classic_11 git:(master) ✗ npm run build

> @ckeditor/ckeditor5-build-classic@11.0.1 build /Users/joachimdoerr/Workingspace/Redaxo/redaxo_5/assets/addons/cke5/ckeditor5-build-classic_11
> webpack --mode production

Node#before is deprecated. Use Node#raws.before
Node#moveTo was deprecated. Use Container#append.
Hash: a8f2d9d520ea087bdcd9
Version: webpack 4.16.2
Time: 35164ms
Built at: 07/26/2018 7:24:20 PM
                Asset       Size  Chunks                    Chunk Names
   translations/ko.js   1.25 KiB          [emitted]         
          ckeditor.js    907 KiB       0  [emitted]  [big]  main
  translations/ast.js   1.49 KiB          [emitted]         
   translations/bg.js   1.41 KiB          [emitted]         
   translations/ca.js   1.48 KiB          [emitted]         
   translations/cs.js   1.56 KiB          [emitted]         
   translations/da.js   1.46 KiB          [emitted]         
   translations/de.js   1.62 KiB          [emitted]         
   translations/el.js    1.5 KiB          [emitted]         
translations/en-au.js   1.41 KiB          [emitted]         
   translations/eo.js   1.47 KiB          [emitted]         
   translations/es.js   1.64 KiB          [emitted]         
   translations/et.js   1.62 KiB          [emitted]         
   translations/eu.js   1.53 KiB          [emitted]         
   translations/fa.js   1.42 KiB          [emitted]         
   translations/fi.js   1.47 KiB          [emitted]         
   translations/fr.js    1.5 KiB          [emitted]         
   translations/gl.js   1.62 KiB          [emitted]         
   translations/hr.js   1.55 KiB          [emitted]         
   translations/hu.js   1.61 KiB          [emitted]         
   translations/it.js   1.81 KiB          [emitted]         
   translations/ja.js   1.28 KiB          [emitted]         
   translations/km.js    1.5 KiB          [emitted]         
   translations/kn.js   1.48 KiB          [emitted]         
   translations/ar.js   1.41 KiB          [emitted]         
   translations/ku.js   1.58 KiB          [emitted]         
   translations/nb.js   1.58 KiB          [emitted]         
   translations/ne.js   1.44 KiB          [emitted]         
   translations/nl.js   1.63 KiB          [emitted]         
   translations/no.js   1.42 KiB          [emitted]         
   translations/oc.js   1.42 KiB          [emitted]         
   translations/pl.js   1.47 KiB          [emitted]         
translations/pt-br.js   1.59 KiB          [emitted]         
   translations/pt.js   1.52 KiB          [emitted]         
   translations/ro.js   1.55 KiB          [emitted]         
   translations/ru.js   1.72 KiB          [emitted]         
   translations/sk.js   1.49 KiB          [emitted]         
   translations/sq.js   1.52 KiB          [emitted]         
   translations/sv.js   1.46 KiB          [emitted]         
   translations/tr.js   1.56 KiB          [emitted]         
   translations/tt.js   1.41 KiB          [emitted]         
   translations/ug.js   1.46 KiB          [emitted]         
   translations/uk.js   1.74 KiB          [emitted]         
translations/zh-cn.js  872 bytes          [emitted]         
   translations/zh.js   1.22 KiB          [emitted]         
   translations/gu.js   1.43 KiB          [emitted]         
   translations/si.js   1.45 KiB          [emitted]         
translations/de-ch.js   1.47 KiB          [emitted]         
      ckeditor.js.map   5.61 MiB       0  [emitted]         main
Entrypoint main [big] = ckeditor.js ckeditor.js.map
 [12] (webpack)/buildin/harmony-module.js 573 bytes {0} [built]
 [13] (webpack)/buildin/global.js 489 bytes {0} [built]
[293] ./src/ckeditor.js + 797 modules 3.97 MiB {0} [built]
      | ./src/ckeditor.js 3.01 KiB [built]
      |     + 797 hidden modules
    + 291 hidden modules

[jodator]

@joachimdoerr: I didn't analyzed this much but could you check how this will work if you update plugins (ckeditor5-rexlink, ckeditor5-reximag, ckeditor5-super-sub) package.json dependenices?

I'd suspect conflicting ckeditor5-theme-lark versions there. The latest version is 11.0.0 and this is used by our plugins - in those mentioned ckeditor-theme-lark is at ^10.0.0.

/cc @Reinmar this might be related to the problem with independently versioned plugins: (#1164, #1045, ...).

[joachimdoerr]

I try it with the emoji plugin. For this plugin the owner did the proposed changes. But the result is sadly the same I cannot se any improvement.

[Reinmar]

I'm afraid that pining their authors and perhaps using a forked version (with a fixed deps) is the only solution for now. We're discussing in #1061 (comment) how to avoid these issues in the future. We were aware of them for a longer time but it took us time to figure out how to deal with that.

[joachimdoerr]

Thanks für your support now it works with all plugins fine.