Feature: Add support for sections in the Sections Mapping UI

css/fragment-mapping/fragment.mapping.css

@@ -52,62 +52,150 @@
     gap: 1rem;
 
     & .sm-fragment {
-      padding: 1rem;
-      border-left: 25px solid var(--spectrum-global-color-gray-100);
+      padding: .1rem;
       border-top: 2px solid var(--spectrum-global-color-gray-100);
 
-      & .sm-fragment-content {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
+      &:hover {
+        background-color: var(--spectrum-global-color-gray-75);
       }
 
-      &.selected {
-       border-left-color: blueviolet;
-      }
+      & #sm-fragment-edit-path-btn {
+        margin-left: 5px;
+        position: relative;
+        top: .4rem;
+        right: .4rem;
+        float: inline-end;
 
-      & summary {
-        font-family: monospace;
-        fill: white;
-        cursor: pointer;
-        padding: 0.5rem;
-        margin-bottom: 0.5rem;
-        font-size: x-large;
-        pointer-events: auto;
-
-        & h2 {
-          margin: 0;
+        & sp-textfield {
+          width: 140px;
         }
+      }
 
-        &::marker {
-          color: var(--spectrum-global-color-gray-100);
-          pointer-events: auto;
-        }
+      & details {
+        margin: .4rem;
 
-        & text {
+        & summary {
+          font-family: monospace;
+          fill: white;
+          cursor: pointer;
+          padding: 0.5rem;
+          margin-bottom: 0.5rem;
+          font-size: x-large;
           pointer-events: auto;
-        }
+
+          & h2 {
+            margin: 0;
+          }
+
+          &::marker {
+            color: var(--spectrum-global-color-gray-100);
+            pointer-events: auto;
+          }
+
+          & text {
+            pointer-events: auto;
+          }
+        }  
       }
 
-      & #delete-frg {
-        position: relative;
-        top: 5px;
-        float: inline-end;
-      }
-
-      & .sm-frg-settings-wrapper {
+      & .sm-frg-sections-title {
         display: flex;
         gap: 1rem;
-        margin: 1rem 5rem;
       }
 
-      & .sm-frg-sections-title {
+      & .sm-fragment-content {
         display: flex;
+        flex-direction: column;
         gap: 1rem;
+        padding-left: 1.4rem;
+        padding-right: 1.4rem;
+
+        & .sm-frg-sections-title {
+          padding-bottom: .2rem;
+          border-bottom: solid 2px var(--spectrum-global-color-gray-100);
+        }
+
+        & .sm-fragment-sections {
+          padding-left: 1rem;
+          padding-right: 1rem;
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+
+          & #delete-section {
+            margin-left: 5px;
+            position: relative;
+            top: 1rem;
+            right: 1rem;
+            float: inline-end;
+          }
+
+          & #sm-frg-section-edit-style-btn {
+            margin-left: 5px;
+            position: relative;
+            top: 1rem;
+            right: 1rem;
+            float: inline-end;
+
+            & sp-textfield {
+              width: 140px;
+            }
+          }
+
+          & summary {
+            font-size: medium;
+            text-transform: uppercase;
+          }
+
+          & .sm-frg-section {
+            margin: .4rem;
+            border-left: 25px solid var(--spectrum-global-color-gray-100);
+
+            &.selected {
+              border-left-color: blueviolet;
+            }
+
+            & .sm-frg-section-settings-wrapper {
+              opacity: .25;
+              display: flex;
+              gap: 1rem;
+            }
+
+            & .sm-frg-section-settings-wrapper:hover {
+              opacity: 1;
+            }
+
+            & .sm-frg-section-content {
+              display: flex;
+              flex-direction: column;
+              gap: 1rem;
+              padding-left: 1.4rem;
+              padding-right: 1.4rem;
+
+              & .sm-frg-sections-title {
+                border-bottom: solid 1px var(--spectrum-global-color-gray-100);
+              }
+            }
+
+            & .sm-frg-section-blocks {
+              padding: .5rem;
+              border: 4px solid transparent;
+            }
+
+            & .sm-frg-section-blocks.dragover {
+              border: 4px dashed var(--spectrum-global-color-gray-600);
+              background-color: var(--spectrum-global-color-gray-200);
+            }
+          }
+        }
       }
 
-      & .sm-frg-settings-container {
-        flex-grow: 1;
+      & #delete-frg {
+        margin-left: 5px;
+        position: relative;
+        top: .4rem;
+        right: .4rem;
+        float: inline-end;
       }
     }
   }

import-fragments.html

@@ -149,6 +149,21 @@ <h3>Page preview</h3>
                                     </sp-button-group>
                                 </sp-theme>
                             </sp-tab-panel>
+                            <sp-tab-panel value="import-markdown">
+                                <div data-panel="source">
+                                    <div class="code">
+                                        <textarea id="import-markdown-source" rows="4" cols="10"></textarea>
+                                    </div>
+                                </div>
+                            </sp-tab-panel>
+                            <sp-tab-panel value="import-html">
+                                <div data-panel="source">
+                                    <div class="code">
+                                        <textarea id="import-transformed-html" rows="4" cols="10"></textarea>
+                                    </div>
+                                </div>
+                            </sp-tab-panel>
+
                         </sp-tabs>
                     </div>
                 </div>

js/import/import.ui.js

@@ -29,7 +29,7 @@ import {
 import * as fragmentUI from '../sections-mapping/sm.ui.js';
 import { buildTransformationRulesFromMapping } from './import.rules.js';
 import TransformFactory from '../shared/transformfactory.js';
-import { detectSections } from '../sections-mapping/utils.js';
+import detectSections from '../sections-mapping/utils.js';
 import { preparePagePreview } from '../express/free-mapping/preview-selectors.js';
 import { getFragmentSectionsMappingData } from '../sections-mapping/import/sections-mapping.import.js';
 

js/sections-mapping/import/parsers/header.js

@@ -2,28 +2,28 @@ export default function headerParser(el, { document, params, allMappings }) {
   const containerEl = document.createElement('div');
 
   const brandEl = document.createElement('div');
-  const bodyWidth = allMappings.sections[0].width;
+  const bodyWidth = allMappings.sections[0]?.blocks[0]?.width;
   const originURL = new URL(params.originalURL).origin;
 
   const brandLogoMapping = [
     {
       checkFn: (e) => e.querySelector('a > img'),
       parseFn: (e, targetEl, x) => {
-        const parentEl = e.parentElement;
-        if (x < bodyWidth / 2) {
+        if (bodyWidth && x < bodyWidth / 2) {
           targetEl.append(e);
-          parentEl.append(document.createElement('br'));
-          targetEl.append(parentEl);
           return true;
         }
         return false;
       },
     },
     {
-      checkFn: (e) => e.querySelector('picture + br + a, image + br + a'),
+      checkFn: (e) => e.querySelector('picture + br + a, img + br + a'),
       parseFn: (e, targetEl, x) => {
-        if (x < bodyWidth / 2) {
-          targetEl.append(e);
+        if (bodyWidth && x < bodyWidth / 2) {
+          const imgEl = e.closest('picture, img');
+          if (imgEl) {
+            targetEl.append(imgEl);
+          }
           return true;
         }
         return false;
@@ -32,7 +32,7 @@ export default function headerParser(el, { document, params, allMappings }) {
     {
       checkFn: (e) => e.querySelector('img'),
       parseFn: (e, targetEl, x) => {
-        if (x < bodyWidth / 2) {
+        if (bodyWidth && x < bodyWidth / 2) {
           targetEl.append(e);
           return true;
         }
@@ -42,7 +42,7 @@ export default function headerParser(el, { document, params, allMappings }) {
     {
       checkFn: (e) => e.querySelector(`a[href="/"], a[href="${originURL}"], a[href="${originURL}/"]`),
       parseFn: (e, targetEl, x) => {
-        if (x < bodyWidth / 2) {
+        if (bodyWidth && x < bodyWidth / 2) {
           targetEl.append(e);
           return true;
         }