Fix: sync with main branch + adapt section mapping code to latest cha…

…nges (#387)

* fix(deps): update dependency @adobe/helix-importer to v3.4.3 (#368)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.19 [skip ci]

## [1.51.19](v1.51.18...v1.51.19) (2024-06-07)

### Bug Fixes

* **deps:** update dependency @adobe/helix-importer to v3.4.3 ([#368](#368)) ([c62cd1f](c62cd1f))

* fix(deps): update dependency @adobe/helix-importer to v3.4.4 (#369)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.20 [skip ci]

## [1.51.20](v1.51.19...v1.51.20) (2024-06-07)

### Bug Fixes

* **deps:** update dependency @adobe/helix-importer to v3.4.4 ([#369](#369)) ([2ab0bbd](2ab0bbd))

* chore(deps): update external fixes (#370)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update adobe fixes (#371)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.21 [skip ci]

## [1.51.21](v1.51.20...v1.51.21) (2024-06-09)

### Bug Fixes

* **deps:** update adobe fixes ([#371](#371)) ([74595c8](74595c8))

* fix(deps): update dependency @adobe/helix-importer to v3.4.6 (#372)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.22 [skip ci]

## [1.51.22](v1.51.21...v1.51.22) (2024-06-09)

### Bug Fixes

* **deps:** update dependency @adobe/helix-importer to v3.4.6 ([#372](#372)) ([b3f5849](b3f5849))

* fix(deps): update dependency @adobe/helix-importer to v3.4.7 (#373)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.23 [skip ci]

## [1.51.23](v1.51.22...v1.51.23) (2024-06-09)

### Bug Fixes

* **deps:** update dependency @adobe/helix-importer to v3.4.7 ([#373](#373)) ([0edd45b](0edd45b))

* chore(deps): update dependency c8 to v10 (#374)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update external fixes (#379)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.24 [skip ci]

## [1.51.24](v1.51.23...v1.51.24) (2024-06-15)

### Bug Fixes

* **deps:** update external fixes ([#379](#379)) ([dedbce8](dedbce8))

* fix(deps): update external fixes (#384)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.25 [skip ci]

## [1.51.25](v1.51.24...v1.51.25) (2024-06-22)

### Bug Fixes

* **deps:** update external fixes ([#384](#384)) ([c5302c3](c5302c3))

* fix(deps): update dependency @adobe/helix-importer to v3.4.8 (#385)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.26 [skip ci]

## [1.51.26](v1.51.25...v1.51.26) (2024-06-22)

### Bug Fixes

* **deps:** update dependency @adobe/helix-importer to v3.4.8 ([#385](#385)) ([dbcef27](dbcef27))

* fix(deps): update dependency @adobe/helix-importer to v3.4.9 (#386)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(release): 1.51.27 [skip ci]

## [1.51.27](v1.51.26...v1.51.27) (2024-06-23)

### Bug Fixes

* **deps:** update dependency @adobe/helix-importer to v3.4.9 ([#386](#386)) ([9087858](9087858))

* fix: bring latest changes from main

* chore: typo

* fix: adapt to latest changes

* fix: automated download when in demo tool context

* style(fragment-import): minor style adjustments

* fix(fragment-import): better handle saveAs fields in demo tool context

* feat(fragment-import): add support to enable js via query string parameter

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net>

CHANGELOG.md

@@ -1,3 +1,66 @@
+## [1.51.27](https://github.com/adobe/helix-importer-ui/compare/v1.51.26...v1.51.27) (2024-06-23)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/helix-importer to v3.4.9 ([#386](https://github.com/adobe/helix-importer-ui/issues/386)) ([9087858](https://github.com/adobe/helix-importer-ui/commit/9087858a5e2f4430ea70cbb2bebb1eb4df8628e1))
+
+## [1.51.26](https://github.com/adobe/helix-importer-ui/compare/v1.51.25...v1.51.26) (2024-06-22)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/helix-importer to v3.4.8 ([#385](https://github.com/adobe/helix-importer-ui/issues/385)) ([dbcef27](https://github.com/adobe/helix-importer-ui/commit/dbcef2764bb246b3df57f9713f0f151e141bea71))
+
+## [1.51.25](https://github.com/adobe/helix-importer-ui/compare/v1.51.24...v1.51.25) (2024-06-22)
+
+
+### Bug Fixes
+
+* **deps:** update external fixes ([#384](https://github.com/adobe/helix-importer-ui/issues/384)) ([c5302c3](https://github.com/adobe/helix-importer-ui/commit/c5302c3fe597655cc38fae64274efd4379869189))
+
+## [1.51.24](https://github.com/adobe/helix-importer-ui/compare/v1.51.23...v1.51.24) (2024-06-15)
+
+
+### Bug Fixes
+
+* **deps:** update external fixes ([#379](https://github.com/adobe/helix-importer-ui/issues/379)) ([dedbce8](https://github.com/adobe/helix-importer-ui/commit/dedbce82940bfa0ee720a3c17e55144df1660e02))
+
+## [1.51.23](https://github.com/adobe/helix-importer-ui/compare/v1.51.22...v1.51.23) (2024-06-09)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/helix-importer to v3.4.7 ([#373](https://github.com/adobe/helix-importer-ui/issues/373)) ([0edd45b](https://github.com/adobe/helix-importer-ui/commit/0edd45b45ced03a7ea9b93d4563d06aafdbaaf8f))
+
+## [1.51.22](https://github.com/adobe/helix-importer-ui/compare/v1.51.21...v1.51.22) (2024-06-09)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/helix-importer to v3.4.6 ([#372](https://github.com/adobe/helix-importer-ui/issues/372)) ([b3f5849](https://github.com/adobe/helix-importer-ui/commit/b3f5849b838efec91e5837c5dc03da3aad64db9d))
+
+## [1.51.21](https://github.com/adobe/helix-importer-ui/compare/v1.51.20...v1.51.21) (2024-06-09)
+
+
+### Bug Fixes
+
+* **deps:** update adobe fixes ([#371](https://github.com/adobe/helix-importer-ui/issues/371)) ([74595c8](https://github.com/adobe/helix-importer-ui/commit/74595c8bf053e1c772779ee84f959fbd9d678fa7))
+
+## [1.51.20](https://github.com/adobe/helix-importer-ui/compare/v1.51.19...v1.51.20) (2024-06-07)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/helix-importer to v3.4.4 ([#369](https://github.com/adobe/helix-importer-ui/issues/369)) ([2ab0bbd](https://github.com/adobe/helix-importer-ui/commit/2ab0bbd34e557d257501f5d00e1f23293f22309b))
+
+## [1.51.19](https://github.com/adobe/helix-importer-ui/compare/v1.51.18...v1.51.19) (2024-06-07)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @adobe/helix-importer to v3.4.3 ([#368](https://github.com/adobe/helix-importer-ui/issues/368)) ([c62cd1f](https://github.com/adobe/helix-importer-ui/commit/c62cd1fa0541a7e7a070d3d7d9c40dbaef1f3fc4))
+
 ## [1.51.18](https://github.com/adobe/helix-importer-ui/compare/v1.51.17...v1.51.18) (2024-06-05)
 
 

css/fragment-mapping/fragment.mapping.css

@@ -4,7 +4,6 @@
 /* Fragment-mapping styles */
 .import-fragments #mapping-editor {
   margin-top: 2rem;
-  height: calc(100vh - 232px);
 
   & h2, h3 {
     /* font-family: monospace; */
@@ -54,7 +53,7 @@
     & .sm-fragment {
       padding: 1rem;
       border-left: 25px solid var(--spectrum-global-color-gray-100);
-      border-top: 2px solid var(--spectrum-global-color-static-transparent-white-400);
+      border-top: 2px solid var(--spectrum-global-color-gray-100);
 
       & .sm-fragment-content {
         display: flex;

js/import/import.ui.js

@@ -115,20 +115,6 @@ const setupUI = () => {
     SPTABS.selected = 'import-preview';
   }
 
-  // check if in demo tool context
-  if (IS_FRAGMENTS && sessionStorage.getItem(DEMO_TOOL_MODE_SESSION_STORAGE_KEY)) {
-    const searchParams = new URLSearchParams(window.top.location.search);
-    if (searchParams.get('url')) {
-      const f = window.document.querySelector('#import-url');
-      f.value = searchParams.get('url');
-      config.fields['import-url'] = searchParams.get('url');
-    }
-
-    const saveDocxCheckboxEl = document.getElementById('import-local-docx');
-    saveDocxCheckboxEl.setAttribute('checked', true);
-    saveDocxCheckboxEl.setAttribute('disabled', '');
-  }
-
   // init the fragment UI
   fragmentUI.init(config);
 };
@@ -561,8 +547,8 @@ const attachListeners = () => {
           await dirHandle.requestPermission({
             mode: 'readwrite',
           });
+          FOLDERNAME_SPAN.innerText = `Saving file(s) to: ${dirHandle.name}`;
         }
-        FOLDERNAME_SPAN.innerText = `Saving file(s) to: ${dirHandle.name}`;
         FOLDERNAME_SPAN.classList.remove('hidden');
       } catch (e) {
         restoreWaitingUI(null, true);
@@ -964,6 +950,34 @@ const attachListeners = () => {
 
 const init = () => {
   config.origin = window.location.origin;
+
+  // check if in demo tool context
+  if (IS_FRAGMENTS && sessionStorage.getItem(DEMO_TOOL_MODE_SESSION_STORAGE_KEY)) {
+    const searchParams = new URLSearchParams(window.top.location.search);
+    if (searchParams.get('url')) {
+      const f = window.document.querySelector('#import-url');
+      f.value = searchParams.get('url');
+    }
+
+    if (searchParams.get('enableJs')) {
+      const enableJsEl = document.getElementById('import-enable-js');
+      if (enableJsEl) {
+        enableJsEl.setAttribute('checked', true);
+      }
+    }
+
+    if (searchParams.get('saveAs')) {
+      const saveAsDocxCheckboxEl = document.getElementById('import-local-docx');
+      if (saveAsDocxCheckboxEl) {
+        saveAsDocxCheckboxEl.removeAttribute('checked');
+      }
+      const saveAsCheckboxEl = document.getElementById(`import-local-${searchParams.get('saveAs')}`);
+      if (saveAsCheckboxEl) {
+        saveAsCheckboxEl.setAttribute('checked', true);
+      }
+    }
+  }
+
   config.fields = initOptionFields(CONFIG_PARENT_SELECTOR);
 
   createImporter();

js/sections-mapping/import/import.utils.js

@@ -1,6 +1,60 @@
 /* global WebImporter */
 
-import { getXPath } from '../../shared/utils.js';
+// courtesy of https://github.com/adobecom/aem-milo-migrations/blob/main/tools/importer/parsers/utils.js
+const getXPath = (elm, document, withDetails = false) => {
+  const allNodes = document.getElementsByTagName('*');
+  let segs;
+  // eslint-disable-next-line no-param-reassign
+  for (segs = []; elm && elm.nodeType === 1; elm = elm.parentNode) {
+    if (withDetails) {
+      if (elm.hasAttribute('id')) {
+        let uniqueIdCount = 0;
+        for (let n = 0; n < allNodes.length; n += 1) {
+          if (allNodes[n].hasAttribute('id') && allNodes[n].id === elm.id) {
+            uniqueIdCount += 1;
+          }
+          if (uniqueIdCount > 1) {
+            break;
+          }
+        }
+        if (uniqueIdCount === 1) {
+          segs.unshift(`id("${elm.getAttribute('id')}")`);
+          return segs.join('/');
+        }
+
+        segs.unshift(`${elm.localName.toLowerCase()}[@id="${elm.getAttribute('id')}"]`);
+      } else if (elm.hasAttribute('class')) {
+        segs.unshift(`${elm.localName.toLowerCase()}[@class="${[...elm.classList].join(' ').trim()}"]`);
+      }
+    } else {
+      let i;
+      let sib;
+      for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) {
+        if (sib.localName === elm.localName) {
+          i += 1;
+        }
+      }
+      segs.unshift(`${elm.localName.toLowerCase()}[${i}]`);
+    }
+  }
+  return segs.length ? `/${segs.join('/')}` : null;
+};
+
+export function getElementByXpath(document, path) {
+  try {
+    return document.evaluate(
+      path,
+      document,
+      null,
+      XPathResult.FIRST_ORDERED_NODE_TYPE,
+      null,
+    ).singleNodeValue;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('Error evaluating this xpath:', path, e);
+  }
+  return undefined;
+}
 
 // courtesy of https://github.com/adobecom/aem-milo-migrations/blob/main/tools/importer/parsers/utils.js
 export function getNSiblingsDivs(el, document, n = null) {
@@ -34,17 +88,6 @@ export function getNSiblingsDivs(el, document, n = null) {
   return xpathGrouping[selectedXpathPattern] || null;
 }
 
-export function getElementByXpath(document, path) {
-  return document.evaluate(
-    path,
-    document,
-    null,
-    XPathResult.FIRST_ORDERED_NODE_TYPE,
-    null,
-  )
-    .singleNodeValue;
-}
-
 // thanks to https://stackoverflow.com/questions/49974145/how-to-convert-rgba-to-hex-color-code-using-javascript
 export function RGBAToHexA(rgba, forceRemoveAlpha = false) {
   return "#" + rgba.replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values

js/sections-mapping/import/sections-mapping.import.js

@@ -3,7 +3,7 @@
  */
 /* global WebImporter */
 
-import { getElementByXpath } from './import.utils.js';
+import { getElementByXpath } from '../../shared/utils.js';
 import * as parsers from './parsers/parsers.js';
 
 /**
@@ -48,8 +48,8 @@ export function getFragmentSectionsMappingData(url) {
  * constants
  */
 
-// init sections report
-const IMPORT_REPORT = {};
+// // init sections report
+// const IMPORT_REPORT = {};
 
 /**
  * main
@@ -106,7 +106,7 @@ export default {
      * get sections mapping data
      */
 
-    const mapping = getSectionsMappingData(params.originalURL);
+    const mapping = getFragmentSectionsMappingData(params.originalURL);
     if (!mapping) {
       throw new Error('No sections mapping data found, aborting');
     }

js/sections-mapping/sm.ui.js

@@ -75,7 +75,6 @@ export function addFragmentAccordionElement(path) {
   <sp-button id="delete-frg" size="s" variant="negative" treatment="fill" role="button" icon-only>
     <sp-icon-delete slot="icon" dir="ltr" aria-hidden="true"></sp-icon-delete>
   </sp-button>
-  <details>
   <details>
     <summary>${label}</summary>
     <div class="sm-fragment-content">