RTE Overlapping text In Basic Text Component when Width & Height are 100% of Canvas

[mattnoth]

Reproducing this behavior:
... In the official demo, delete everything / start with Body Only in the layers panel
... Add a basic Text Component, so the layers are Body > Text
3 ... Set the basic text component's dimensions to 100% Width and 100% Height
4 ... When you start typing, the RTE has no place to go outside of that element on the canvas, so the editor overlaps the text itself.

What is the expected behavior?
... If the width and height of a basic text component are 100%; the RTE should compensate for overlapping with the written text; perhaps automatically moving to opposite the pos top and offsetLeft within the same component (where as when the height and width are NOT set to100%, the RTE has space to go on the canvas outside the text component, which is when the automatic function for moving the RTE fires)

What is the current behavior?
... The rich text editor, when the basic text component is the only component on the body, and takes the full height and width of the canvas, sits ontop of the user's text.

[artf]

const editor = grapesjs.init(...)
editor.on(...)

[mattnoth]

[mattnoth]

im talking about moving the default position of the RTE
not adding a custom one

[artf]

@mattnoth rteToolbarPosUpdate is an event, pos is the argument passed to the callback.

// Here you init the editor
const editor = grapesjs.init({...});

// Here you subscribe to the event
editor.on('rteToolbarPosUpdate', (pos) => {
 console.log('rteToolbarPosUpdate triggered', pos);
 // ...
 // Implement HERE your logic for moving the RTE toolbar
})

[mattnoth]

@artf Do you have any ideas on how you would personally handle this use case? Within the rteToolbarPosUpdate event? Any suggestions would be much appreciated.
Fire a return within that Event based on the conditions where Height/Width of a selected text component is set to 100%?

I'm pretty sure I've found the function below that handle the Automatic Positioning update, is that correct?;
https://github.com/artf/grapesjs/blob/46be8ca4419228336df28bb16a06c1c2a29ec3cc/src/canvas/index.js#L421

Can I override this using the rteToolbarPosUpdate event?

I apologize for the duplications, my thought was showing the same behavior using the grapesjs demo might help, and I had forgotten that I initially entered it as a bug. I thought maybe my wording in that issue was a little off base.

[ronaldohoch]

Here we solve it with this:

editor.on("rte:enable",()=>{
  editor.trigger('canvasScroll');
});

[mattnoth]

@ronaldohoch Thanks for the reply. I've tried that and no luck. Running version "grapesjs": "^0.16.22"
the editor.on triggers when you click a text box; how is that supposed to behave?

[ronaldohoch]

Neither if you set a minimal time with setTimeOut()?

[mattnoth]

i'm trying to find a solution without squaring the posTop - not certain why that works in most all cases where the text height is 100% of the canvas

[mattnoth]

	editor.on('rteToolbarPosUpdate', (pos) => {
            if (pos.top <= 0 && pos.top > -8) {
                let toolbarDiv = editor.RichTextEditor.getToolbarEl()
                let toolbarHeight = toolbarDiv.scrollHeight
                let rect = editor.Canvas.getRect()
                pos.top = (rect.height - toolbarHeight) + (pos.top - pos.canvasOffsetTop)
            }
        });
        

[mattnoth]

the comparison statement might have to change based on window size but this should flip the positioning of the RTE to the bottom of the canvas

[mattnoth]

the comparison statement might have to change based on window size but this should flip the positioning of the RTE to the bottom of the canvas

	editor.on('rteToolbarPosUpdate', (pos) => {
            if (pos.top <= 0 && pos.top > -8) {
                let toolbarDiv = editor.RichTextEditor.getToolbarEl()
                let toolbarHeight = toolbarDiv.scrollHeight
                let rect = editor.Canvas.getRect()
                pos.top = (rect.height - toolbarHeight) + (pos.top - pos.canvasOffsetTop)
            }
        });