Highlighter and toolbar in the wrong place

[sfreed]

I know this was a problem in the past, but I am having it now. Not sure how much the tech stack matters...

1. Angular 16
2. Dev Express
3. Created component wrapping the editor.
4. Displaying the editor on a 'pop up' from devexpress.
5. The offset between the toolbar and highlighter gets larger as I scroll down the screen.

What was the resolution to the problem before?

Love the tool... thanks in advance...

[artf]

Try to check this option:

grapesjs/src/editor/config/config.ts

Lines 280 to 289 in 4a0ae61

	/**
	* When the editor is placed in a scrollable container (eg. modals) this might
	* cause elements inside the canvas (eg. floating toolbars) to be misaligned.
	* To avoid that, you can specify an array of DOM elements on which their scroll will
	* trigger the canvas update.
	* Be default, if the array is empty, the first parent element will be appended.
	* listenToEl: [document.querySelector('#scrollable-el')],
	* @default []
	* */
	listenToEl?: HTMLElement[];

[sfreed]

Thanks for answering... I have tried that.

`this.editor.on('load ', (editor:any) => {
this.editor.Canvas.getDocument().addEventListener("scroll", (event) => {
console.log('doc event fired' , event);
const selected = editor.getSelected();
});

this.editor.getConfig().listenToEl.push(editor.Canvas.getDocument()); <--- this scrolls
this.editor.getConfig().listenToEl.push(editor.Canvas.getBody())
this.editor.getConfig().listenToEl.push(editor.Canvas.getBody().getElementsByClassName('container-fluid')[0])
})`

Interestingly, the event handler above does fire, so I believe I am adding the correct item to the array.

However, still no luck.. am I doing something wrong?

[artf]

try to add your elements in the initial config and not post editor creation

[sfreed]

This is gonna sound dumb... but how can I do that? I have to add the body by accessing the editor. If I try to use another method (like jquery, it doesn't recognize the editor document, but the page document.

I don't think I can do this...

const editor = grapesjs.init({
listenToEl: [
editor.Canvas.getDocument()
]
})

Forgive me if this answer is obvious....

[sfreed]

@artf I am really close, I think to getting this solved. The problem I am having is getting the HtmlElement to add to the listenToEl array. The Element I want to add is the element returned from "editor.Canvas.getDocument()", but I can not figure out how to add that element. Can you recommend a way to get this added? I would think this element may already be added as it is the main Element created by the Canvas.

Thanks!

[artf]

By default, the frame itself should already listen to internal scroll events so I'm wondering if this is somehow related to your layout. Are you able to create a reproducible demo with that issue?

[sfreed]

Yes..

I have created a temp account for you to use

1. https://campaign-director.com/
2. login: [email protected] pw: password
3. click on my web page
4. double click on the "Alliance Group Template"

I will leave this up until you ell me you know longer need it.

thanks!

[sfreed]

@artf let me kno when you will have a chance to look at it... I had to disable the login. It appears that my page was deleted.

[artf]

@sfreed it would be better if you're able to recreate the same layout in an isolated live demo (eg. jsfiddle) and not on your platform, that would help to check if there is any issue

[sfreed]

Good idea... may take ma a bit of time. I will update you when it is ready. Again...thanks!