BUG: RTE misplaced when opened right after dropping `activeOnRender` component

Version: 0.17.4

Are you able to reproduce the bug from the demo?

• Yes
• No

Steps to reproduce:

• Go to the demo
• Drop a “Text” block inside the canvas
• Click on the “Text” component that was just dropped
• The opened RTE is misplaced (cf attached screenshot)

What is the expected behavior?

The opened RTE should be positioned correctly

What is the current behavior?

The RTE is misplaced, it hides the “Text” component’s content & can prevent editing properly (especially when using bigger custom RTE like CKEditor).

This only happens when the RTE is first opened & only if the dropped block is a “Text” component with activeOnRender option set to true.

This is caused by a miscalculation of the toolbar’s position when its offsetHeight equals 0. Itself due to its parent (CanvasView.toolsEl) being set to display: none at this time (because rte.enable is called on drop when activeOnRender is true, which happens while the component is unselected as opposed to normal, hence its toolsEl still being set to display: none)

Proposed solution:

Selecting the component before triggering activeOnRender’s active event seems to fix the issue.

Concretely, adding em.setSelected(result); before result.trigger('active'); here should do it, unless I’m missing something.

I could take care of the PR if this looks good to you 😃

Are you able to attach screenshots, screencasts or a live demo?

• Yes (attach)
• No

[gustavohleal]

Hi. Me and @ronaldohoch have found a workaround for this problem.

We trigger the scroll event when the RTE is enabled. Here’s the code:

    // Trigger scroll event from canvas so that grapesjs
    // fix CKEditor position correctly
    editor.on("rte:enable", () => {
        editor.trigger('canvasScroll');
    });

[artf]

Yes, I guess you’re right. It doesn’t actually make sense activating RTE without selecting the component (it probably makes sense with all other “activatable” blocks).