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.

Sign up for GitHub

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

Jump to bottom

Link editing does not work within modal dialogs #1121

Open
IvoJager opened this issue Jun 14, 2016 · 4 comments
Open

Link editing does not work within modal dialogs #1121

IvoJager opened this issue Jun 14, 2016 · 4 comments
Labels
question

Comments

@IvoJager
Copy link

IvoJager commented Jun 14, 2016 •
edited by nmielnik
Loading

Description

Editing and creating links does not work (passes through events to underlying RTE instead) when the RTE is embedded in a modal dialog.

This is likely because some auxiliary/helper divs/elements are erroneously appended to the body (which are therefore non-responsive in a modal dialog), rather the element containing the RTE.

Steps to reproduce

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
    <script>
      $(function() {
        $("#dialog").dialog({
          modal: true
        });
        var editor = new MediumEditor('#dialog .editable');
      });

    </script>
  </head>

  <body>
    <div id="dialog" title="Modal Dialog">
      <div class="editable">
      </div>
    </div>
  </body>

</html>
  1. Add some text.
  2. Select it.
  3. Create link.
  4. Try editing URL.

Expected behavior: Link should be editable

Actual behavior: Link editing dialog closes and any keystrokes are passed to underlying RTE instead.

Link to an example: https://jsfiddle.net/arnkmdnL/2/

Versions

  • medium-editor: latest
  • browser: Firefox
  • OS: Linux Mint 17
@nmielnik
Copy link
Member

nmielnik commented Jun 14, 2016 •
edited
Loading

@IvoJager this is an interesting case and I think your theory is correct where jQuery is preventing focus from going into the toolbar since the toolbar is not a child of the dialog.

MediumEditor does support a toolbar.relativeContainer option though, where you can control the container that the toolbar is appended to. The option is called out in the README but it's not explained super well and not covered at all in OPTIONS.md (I've opened #1122 to fix that)

I've updated your fiddle here to use the toolbar.relativeContainer option and it appears to fix the issue with not being able to edit links.

You can pass the option like this:

var editor = new MediumEditor('#dialog .editable', {
    toolbar: {
        relativeContainer: document.querySelector("#dialog")
    }
});

Will that help you work around the issue?

@nmielnik nmielnik mentioned this issue Jun 14, 2016
Merged
@IvoJager
Copy link
Author

Really appreciate the quick response and suggestion!

Unfortunately, the placement/presentation in the updated fiddle (and in my code base) does not match that of the (IMHO very nice) default behaviour; the toolbar is positioned after the editable, rather than positioned absolutely ("floating") near the selected text. With the workaround as-is, the toolbar may even "appear" off-screen if the text is long and scrolling was needed, though that is obviously easy to fix by affixing it to something else that doesn't scroll. If there's an easy way to mimic the default behavior and achieve the "floating" positioning I'd love to know though!

FWIW, the same issue was accepted as a "bug" by Imperavi/Redactor RTE a couple of years ago, and given that other UI frameworks use similar techniques to make dialogs "modal", IMHO it's probably worth fixing.

Thanks again!

@IvoJager
Copy link
Author

IvoJager commented Jun 14, 2016 •
edited by nmielnik
Loading

FWIW, for anyone who has the same issue using jQuery UI, a workaround can be created through the _allowInteraction extension, e.g. like so;

$.widget( "ui.dialog", $.ui.dialog, {
    _allowInteraction: function( event ) {
        return !!$( event.target ).closest( ".medium-editor-toolbar" ).length || this._super( event );
    }
});

@nmielnik
Copy link
Member

I definitely agree it's worth fixing, if you come up with some fix within medium-editor please open a PR!

@nmielnik nmielnik mentioned this issue Feb 8, 2017
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@IvoJager @nmielnik