ckeditor / ckeditor4

The best enterprise-grade WYSIWYG editor. Fully customizable with countless features and plugins.
https://ckeditor.com/ckeditor-4
Other
5.78k stars 2.46k forks source link

Magicline plugin does not work correctly with widgets #5481

Open msevcenko opened 1 year ago

msevcenko commented 1 year ago

Type of report

Bug

Provide detailed reproduction steps (if any)

  1. Create document containing at least one widget, and any block element at the document end, may be the widget, or another
  2. Try to use magic line to add paragraph below the last block element

Expected result

It is expected, when the mouse is moving below the last block element, that the magick line shows up and can be clicked.

Actual result

Moving mouse below the last block, the magic line diappears, making it unable to add new paragraph.

Analysis

The problem seems to be with the invisible element

<div data-cke-hidden-sel="1" data-cke-temp="1" style="position:fixed;top:0;left:-1000px;width:0;height:0;overflow:hidden;">Ovládací prvek div</div>

which is added to the very end of DOM of the wysiwyg, when a widget is focused.

In triggerEditable, where edge case is handled (bottom edge of the document), the following branch fails:

        if ( !isHtml( edgeNode ) || isFlowBreaker( edgeNode ) || !isTrigger( that, edgeNode ) ) {
            that.debug.logEnd( 'ABORT. Invalid edge node.' );
            return null;
        }

in particular the isFlowBreaker( edgeNode ) condition, because the said element is absolutely positioned.

In general, the plugin should be resistant against such rudimentary elements that are often appended to the end of document, and should ignore them.

Workaround

The user must click to the area at the end of document, to defocus the widget. When he moves the mouse again, the magic line appears, magic!

Other details

msevcenko commented 1 year ago

Proposed solution: add condition to filter out any rudimentary elements when looking for "edgeNode"

// Edge node according to bottomTrigger.
edgeNode = editable[ bottomTrigger ? 'getLast' : 'getFirst' ]( function( node ) {
    return !( isEmptyTextNode( node ) || isComment( node )  || node.getAttribute("data-cke-hidden-sel") == "1");
} );
Comandeer commented 1 year ago

I'm not able to reproduce the issue – could you provide a demo?

msevcenko commented 1 year ago

Try official demo:

https://ckeditor.com/ckeditor-4/demo/

Remove the last paragraph, to make the bullet list (block element) to be the last one of the document. Then you need the magic line to add paragraph below it.

If you hover mouse at the bottom of the document, you are fine, as long as the widget is not focused.

image

If you focus the widget, the magic line trigger fails, at least at some vertical positions below the document. You are basically unable to click it.

image

Comandeer commented 1 year ago

OK, I see the issue now – the magic line appears below the list but disappears the moment I hover it.

msevcenko commented 1 year ago

OK, I see the issue now – the magic line appears below the list but disappears the moment I hover it.

Yes, you can say that. The line might appear for some vertical positions, but the rule "show the line at the very bottom of the document" is failing. Which is the one that shoud be effective when the line is hovered.