Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BalloonToolbar throws an error when used with MultirootEditor #14803

Closed
GoProduction opened this issue Aug 16, 2023 · 2 comments · Fixed by #16767
Closed

BalloonToolbar throws an error when used with MultirootEditor #14803

GoProduction opened this issue Aug 16, 2023 · 2 comments · Fixed by #16767
Assignees
Labels
package:editor-multi-root squad:collaboration Issue to be handled by the Collaboration team. type:bug This issue reports a buggy (incorrect) behavior.

Comments

@GoProduction
Copy link

GoProduction commented Aug 16, 2023

📝 When attempting to import the balloon toolbar into the multiroot-editor, it will throw a TypeError of: "Cannot read properties of undefined (reading 'Symbol(emitterId)')"

Here is an image of the callstack:
image

The (shortened) code that I'm working with:

import { MultiRootEditor } from '@ckeditor/ckeditor5-editor-multi-root';
import { FontBackgroundColor, FontColor, FontFamily, FontSize } from '@ckeditor/ckeditor5-font';
import { BalloonToolbar } from "@ckeditor/ckeditor5-ui/src/index";

async buildEditor() {
	let toolbarConfig = await ToolbarConfigSvc.getToolbarConfig('editingDocument');
	let balloonToolbarConfig = await ToolbarConfigSvc.getToolbarConfig('balloonToolbar');
	
	// Build the editor
	return new Promise((resolve, reject) => {
		MultiRootEditor.create(
			this.roots,
			{
				plugins: [
					FontBackgroundColor,
					FontColor,
					FontFamily,
					FontSize,
					BalloonToolbar
				],
			   
				toolbar: toolbarConfig, // Config JSON blob pulled from EditorToolbarConfig.json
				balloonToolbar: balloonToolbarConfig,
				fontFamily: {
					supportAllValues: true,
				},
				fontSize: {
					options: [
						{ title: "8", model: "8pt" },
						{ title: "9", model: "9pt" },
						{ title: "10", model: "10pt" },
						{ title: "11", model: "11pt" },
						{ title: "12", model: "12pt" },
						{ title: "14", model: "14pt" },
						{ title: "16", model: "16pt" },
						{ title: "18", model: "18pt" },
						{ title: "20", model: "20pt" },
						"default",
					],
					supportAllValues: true,
				},
				fontColor: {
					colors: rgbColorPalette,
					colorPicker: true,
					columns: 3
				},
				fontBackgroundColor: {
					colors: rgbColorPalette,
					colorPicker: true,
					columns: 3
				}
			}
		)
		.then((editor) => {
                                document.querySelector("#toolbar").appendChild(editor.ui.view.toolbar.element);
                                this.editorInstance = markRaw(editor);
				resolve("Editor has been built");
		})
		.catch((error) => {
			app.config.globalProperties.messageModal.error('There was an issue with initializing the editor.');
			this._error(`There was an issue with initializing the editor`, error);
		});
	});
}

✔️ Expected result

The multi-root editor should be able to work in tandem with the balloon toolbar.

📃 Other details

  • Browser: Chrome Version 115.0.5790.171
  • Installed CKEditor plugins: …
"@ckeditor/ckeditor5-autosave": "37.1.0",
    "@ckeditor/ckeditor5-basic-styles": "37.1.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "37.1.0",
    "@ckeditor/ckeditor5-cloud-services": "37.1.0",
    "@ckeditor/ckeditor5-comments": "37.1.0",
    "@ckeditor/ckeditor5-dev-translations": "32.1.2",
    "@ckeditor/ckeditor5-dev-utils": "32.1.2",
    "@ckeditor/ckeditor5-editor-multi-root": "37.1.0",
    "@ckeditor/ckeditor5-engine": "37.1.0",
    "@ckeditor/ckeditor5-essentials": "37.1.0",
    "@ckeditor/ckeditor5-export-word": "37.1.0",
    "@ckeditor/ckeditor5-find-and-replace": "37.1.0",
    "@ckeditor/ckeditor5-highlight": "37.1.0",
    "@ckeditor/ckeditor5-horizontal-line": "37.1.0",
    "@ckeditor/ckeditor5-html-support": "37.1.0",
    "@ckeditor/ckeditor5-inspector": "4.1.0",
    "@ckeditor/ckeditor5-link": "37.1.0",
    "@ckeditor/ckeditor5-page-break": "37.1.0",
    "@ckeditor/ckeditor5-pagination": "37.1.0",
    "@ckeditor/ckeditor5-paragraph": "37.1.0",
    "@ckeditor/ckeditor5-real-time-collaboration": "37.1.0",
    "@ckeditor/ckeditor5-restricted-editing": "37.1.0",
    "@ckeditor/ckeditor5-special-characters": "37.1.0",
    "@ckeditor/ckeditor5-table": "37.1.0",
    "@ckeditor/ckeditor5-theme-lark": "37.1.0",
    "@ckeditor/ckeditor5-track-changes": "37.1.0",
    "@ckeditor/ckeditor5-utils": "37.1.0",
    "@ckeditor/ckeditor5-vue": "5.1.0",
    "@ckeditor/ckeditor5-watchdog": "37.1.0",
    "@ckeditor/ckeditor5-word-count": "37.1.0",

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

@GoProduction GoProduction added the type:bug This issue reports a buggy (incorrect) behavior. label Aug 16, 2023
@Witoso
Copy link
Member

Witoso commented Aug 17, 2023

I reproduced it in our manual test as well. cc @scofalik

@Witoso Witoso added package:editor-multi-root squad:collaboration Issue to be handled by the Collaboration team. labels Aug 17, 2023
@Tobo7
Copy link

Tobo7 commented Jul 10, 2024

Experiencing the same problem, any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package:editor-multi-root squad:collaboration Issue to be handled by the Collaboration team. type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants