Custom BalloonBlockEditor build doesn't display the balloon or block with Angular 9.0.7

[Vignatus]

The official build ckeditor5-build-balloon-block version 19.0.0 is working fine. With a custom build however, the UI is not displaying when text in the editor is selected or focused.

Here are my configs:

1. tsconfig.json

   "compileOnSave": false,
   "compilerOptions": {
   "baseUrl": "./",
   "outDir": "./dist/out-tsc",
   "sourceMap": true,
   "declaration": false,
   "downlevelIteration": true,
   "experimentalDecorators": true,
   "module": "esnext",
   "moduleResolution": "node",
   "importHelpers": true,
   "allowJs": true,
   "target": "es2015",
   "lib": [
     "es2018",
     "dom"
   ]
   },
   "angularCompilerOptions": {
   "fullTemplateTypeCheck": true,
   "strictInjectionParameters": true
   }
   }

2. In edit.component.ts

   import * as BallonBlockEditor from 'src/app/custom-lib/ckeditor5-build-balloon-block-custom/build/ckeditor';
   import { CKEditorComponent } from '@ckeditor/ckeditor5-angular';
   ...
   @Component({
   selector: 'app-edit',
   templateUrl: './edit.component.html',
   styleUrls: ['./edit.component.scss']
   })
   export class EditComponent implements OnInit {
   public Editor = BallonBlockEditor;
   @ViewChild('editor') editorComponent: CKEditorComponent;

3. In template edit.component.html

   <ckeditor #editor [editor]="Editor" [config]="editorConfig" class="editor" (ready)="onReady($event)">

4. package.json

   ...
   "@ckeditor/ckeditor5-angular": "~1.2.3",
   ...

I built the custom editor from the official online builder which uses CKEDITOR_VERSION 19.0.0 as of today.

Upon inspecting the DOM, the <div class="ck-body-wrapper">...</div> element appears outside <app-root> in both the cases (official and custom build). However the button element <button class="ck ck-button ck-hidden ck-off ck-block-toolbar-button" type="button" tabindex="-1" aria-labelledby="ck-editor__aria-label_eb27f10b3aaa16339974ee2c161552448" aria-pressed="false" style="top: 0px; left: 0px;"> nested in the above div which is the button for the block toolbar does not update its classes or anything when editor is focused using custom build. It does update when using official build.

I changed its display setting and it was positioned at the top left of the page, not even beside the editor.

What I have tried:

1. Including custom build file in the scripts array of angular.json. It just gives ckeditor-duplicated-modules error since the script is loaded twice
2. Deleting node modules, package-lock and installing everything again
3. Installed the official version and substituted its ckeditor.js with the custom one in node_modules

As of know, I have to proceed with official build but I really wanted to use the additional features of custom build.

[ma2ciek]

Hi, thanks for the report!

It looks like it's more a problem with the builder, not the integration, but it's hard  to guess.

Could you post your build id so I can try to reproduce it? It should be included in the README of the generated build by the online builder.

Including custom build file in the scripts array of angular.json. It just gives ckeditor-duplicated-modules error since the script is loaded twice

Then you should not import it in the application. just use editor = window.BalloonBlockEditor

Maybe it will work as the ckeditor 5 library won't get transpiled by TS.

[Vignatus]

The build id is dxsnl7u4rrfn-a85twyy12zfi

I will try using the build from global but if it is a problem with build, I don't think that will solve the problem. If it solves, I will update it here.

[Vignatus]

Have you been able to look at this?

[boan-anbo]

having the same problem. look forward to the fix. thanks.

[przemyslaw-zan]

With simple editor base swap, only the block editing button was initially missing, but after adding the BlockToolbar plugin everything seems to work. Here is minimal diff that worked for me:

diff --git a/ckeditor/src/ckeditor.ts b/ckeditor/src/ckeditor.ts
index d7b989d..2d91ec6 100644
--- a/ckeditor/src/ckeditor.ts
+++ b/ckeditor/src/ckeditor.ts
@@ -4,11 +4,12 @@
  */

 // The editor creator to use.
-import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { BalloonEditor } from '@ckeditor/ckeditor5-editor-balloon';

 import { Essentials } from '@ckeditor/ckeditor5-essentials';
 import { UploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
 import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
+import { BlockToolbar } from '@ckeditor/ckeditor5-ui';
 import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
 import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
 import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
@@ -24,11 +25,12 @@ import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
 import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
 import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';

-export default class AngularEditor extends ClassicEditor {
+export default class AngularEditor extends BalloonEditor {
    // Plugins to include in the build.
    public static override builtinPlugins = [
        Autoformat,
        BlockQuote,
+       BlockToolbar,
        Bold,
        CKFinder,
        CloudServices,
@@ -54,25 +56,27 @@ export default class AngularEditor extends ClassicEditor {

    // Editor configuration.
    public static override defaultConfig = {
+       blockToolbar: [
+           'heading',
+           '|',
+           'bulletedList',
+           'numberedList',
+           '|',
+           'indent',
+           'outdent',
+           '|',
+           'imageUpload',
+           'blockQuote',
+           'insertTable',
+           'mediaEmbed',
+           'undo',
+           'redo'
+       ],
        toolbar: {
            items: [
-               'heading',
-               '|',
                'bold',
                'italic',
-               'link',
-               'bulletedList',
-               'numberedList',
-               '|',
-               'indent',
-               'outdent',
-               '|',
-               'imageUpload',
-               'blockQuote',
-               'insertTable',
-               'mediaEmbed',
-               'undo',
-               'redo'
+               'link'
            ]
        },
        image: {
diff --git a/package.json b/package.json
index 5afa839..426898b 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "@ckeditor/ckeditor5-dev-translations": "^38.0.0",
     "@ckeditor/ckeditor5-dev-utils": "^38.0.0",
     "@ckeditor/ckeditor5-easy-image": "^38.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^38.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^38.1.0",
     "@ckeditor/ckeditor5-essentials": "^38.1.0",
     "@ckeditor/ckeditor5-heading": "^38.1.0",
     "@ckeditor/ckeditor5-image": "^38.1.0",
@@ -63,6 +63,7 @@
     "@ckeditor/ckeditor5-paste-from-office": "^38.1.0",
     "@ckeditor/ckeditor5-table": "^38.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^38.1.0",
+    "@ckeditor/ckeditor5-ui": "^38.1.0",
     "@ckeditor/ckeditor5-watchdog": "^38.1.0",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^14.11.8",

[przemyslaw-zan]

I was able to follow our official Angular guide together with an instance of BalloonBlockEditor created via Online Builder, and got everything to work properly quite easily.

---

Also worth mentioning, is that block toolbar button is not visible when it contains only disabled buttons, such as when it only contains indent and outdent while editing a regular paragraph block. It is the intended behavior.

[pomek]

I closed this issue as invalid, as we couldn't reproduce it. If, in your opinion, the problem is still reproducible, please open a new issue and include steps, expectations, and actual results. Remember to mention the CKEditor 5 and Angular integration versions.