Region.setContent() adding an empty element

geonanorch commented 6 years ago

I am trying to set up ContentTool to edit multiple zones via a shared popup editor:

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

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="css/content-tools.min.css" type="text/css">
  <style>
    p {
      min-height: 1em;
      margin: 8px;
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <h3>editor:</h3>
  <div id="edit-text" data-name="main" style="background-color: lightblue;">
    <p>Content to be replaced</p>
  </div>

  <h3>one editable content:</h3>
  <div class="zone" style="background-color: tan;">
    <p>click here to start editing</p>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/content-tools.js"></script>
  <script>
    var zedit;
    $(document).ready(function() {

      var editor = ContentTools.EditorApp.get();
      editor.init('#edit-text', 'data-name', null, true);
      editor.addEventListener('saved', function(ev) {
        var regions = ev.detail().regions;
        if (Object.keys(regions).length == 0) {
          return;
        }
        $(zedit).html(regions['main']);
      });

      $(document).on("click", ".zone", function(e) {
        zedit = this;
        var html = $(zedit).html();
        editor.start();
        editor.regions().main.setContent(html);
      });

    });
  </script>

</body>

</html>

I am having some trouble with Region.setContent(). It seems that after detaching the previous elements of the region, it adds back an empty element before adding the new content provided through the parameter. This results in an extra empty line at the beginning of the content.

I could trace the call down to NodeCollection.prototype.detach() then further to _handleDetach() which is calling _preventEmptyRegions(), which ought not to be called unless I missed something.

I used release 1.5.4 but same behavior with master. Tested with Firefox 54.0.1.

anthonyjb commented 6 years ago

@geonanorch I'll take a look at this in more depth soon as I can but as a short term solution I'd suggest disabling _preventEmptyRegions() when you setContent as a possible work around, e.g:

editor._emptyRegionsAllowed = true
editor.regions().main.setContent(html)
editor._emptyRegionsAllowed = false

geonanorch commented 6 years ago

OK, thank you @anthonyjb . Leaving the issue open for the long-term solution ;-)

GetmeUK / ContentTools

Region.setContent() adding an empty element #441