broken js

app/assets/javascripts/admin/commons/content_editor.js

@@ -39,45 +39,14 @@ window.osuny.contentEditor = {
 
         for (i = 0; i < sortableContainers.length; i += 1) {
             sortableInstance = new Sortable(sortableContainers[i], {
-                group: 'nested',
                 handle: '.content-editor__elements__handle',
-                animation: 150,
-                fallbackOnBody: true,
-                swapThreshold: 0.65,
-                onUnchoose: this.onSortableUnchoose.bind(this),
-                onStart: this.onSortableStart.bind(this),
-                onMove: this.onSortableMove.bind(this),
+                fallbackOnBody: false,
                 onEnd: this.onSortableEnd.bind(this)
             });
             this.sortableInstances.push(sortableInstance);
         }
     },
 
-    onSortableStart: function (event) {
-        'use strict';
-        var item = event.item,
-            kind = item.dataset.kind;
-        this.sortableRootContainer.classList.add('content-editor__elements__root--dragging');
-        if (kind === 'block') {
-            this.sortableRootContainer.classList.add('content-editor__elements__root--dragging-block');
-        } else if (kind === 'heading') {
-            this.sortableRootContainer.classList.add('content-editor__elements__root--dragging-heading');
-        }
-    },
-
-    onSortableMove: function (event) {
-        'use strict';
-        var draggedKind = event.dragged.dataset.kind,
-            relatedKind = event.related.dataset.kind,
-            firstHeading = this.sortableRootContainer.querySelector('.js-content-editor-element[data-kind="heading"]');
-
-        if (draggedKind === 'block') {
-            // Prevent dragging a block after a heading, instead of inside
-            return relatedKind !== 'heading' || !event.willInsertAfter && event.related === firstHeading;
-        }
-        return true;
-    },
-
     onSortableEnd: function (event) {
         'use strict';
         var item = event.item,
@@ -108,13 +77,6 @@ window.osuny.contentEditor = {
         });
     },
 
-    onSortableUnchoose: function () {
-        'use strict';
-        this.sortableRootContainer.classList.remove('content-editor__elements__root--dragging',
-            'content-editor__elements__root--dragging-block',
-            'content-editor__elements__root--dragging-heading');
-    },
-
     getUrlFromKind: function (kind) {
         'use strict';
         if (kind === 'block') {

app/assets/stylesheets/admin/commons/content-editor.sass

 .content-editor
     &__elements
-        &__root
-            &--dragging-heading
-                .content-editor__elements__element--block
-                    display: none
         &__element
             .draft
                 .kind

app/views/admin/communication/blocks/content/_editor.html.erb

 <div  class="js-content-editor mb-5"
       data-sort-blocks-url="<%= reorder_admin_communication_blocks_path(lang: nil, website_id: nil, extranet_id: nil) %>"
       data-sort-headings-url="<%= reorder_admin_communication_headings_path(lang: nil, website_id: nil, extranet_id: nil) %>">
-  <ul class="nav nav-tabs justify-content-md-end mt-0 mt-md-n4">
+  <ul class="nav nav-tabs justify-content-md-end">
     <li class="nav-item">
       <a  class="nav-link active" 
           id="mode-content-tab"
@@ -33,6 +33,11 @@
           role="tabpanel" 
           aria-labelledby="mode-content-tab" 
           tabindex="0">
+      <div class="row">
+        <div class="offset-xl-6 col-xl-6">
+          <p class="text-end text-muted small mt-2">Dans le mode "Écrire le contenu", vous pouvez déplacer les blocs et les titres où vous voulez, indépendamment les uns des autres. Ainsi, vous pouvez déplacer un titre plus haut dans le document sans qu'il n'emporte ses blocs.</p>
+        </div>
+      </div>
       <div  class=" content-editor__elements
                     content-editor__elements__root
                     js-content-editor-sortable-container"
@@ -63,7 +68,14 @@
           role="tabpanel" 
           aria-labelledby="profile-tab" 
           tabindex="1">
-    plan
+      <div class="row">
+        <div class="offset-xl-6 col-xl-6">
+          <p class="text-end text-muted small mt-2">Dans le mode "Organiser le plan", vous ne voyez pas les blocs mais seulement les titres. Lorsque vous déplacez un titre, tous les blocs suivent. C'est le mode idéal pour ranger les documents longs.</p>
+        </div>
+      </div>
+        <% about.headings.root.ordered.each do |heading| %>
+          <%= render 'admin/communication/blocks/headings/heading', heading: heading, hide_blocks: true %>
+        <% end %>
     </div>
   </div>
 

app/views/admin/communication/blocks/headings/_heading.html.erb

+<%
+hide_blocks ||= false
+%>
 <div  class=" content-editor__elements__element
               content-editor__elements__element--heading
               js-content-editor-element
@@ -20,13 +23,10 @@
       </span>
     <% end %>
   </div>
-  <div class="content-editor__elements
-              js-content-editor-sortable-container">
-    <% heading.blocks.ordered.each do |block| %>
-      <%= render 'admin/communication/blocks/block', block: block %>
-    <% end %>
-    <% heading.children.ordered.each do |child| %>
-      <%= render 'admin/communication/blocks/headings/heading', heading: child %>
-    <% end %>
-  </div>
 </div>
+<% heading.blocks.ordered.each do |block| %>
+  <%= render 'admin/communication/blocks/block', block: block %>
+<% end unless hide_blocks %>
+<% heading.children.ordered.each do |child| %>
+  <%= render 'admin/communication/blocks/headings/heading', heading: child %>
+<% end %>