feat(form): add media field with Upload and AEM Assets

nx/blocks/form/editor.js

@@ -3,7 +3,10 @@ import { LitElement, html, nothing } from 'da-lit';
 import { createEngine } from '../../deps/da-sc-sdk/dist/index.js';
 import { loadFormContext } from './utils/context.js';
 import { attachPersistence } from './utils/persistence.js';
-import { loadStyle, hashChange } from '../../../nx2/utils/utils.js';
+import { createAssetSources } from './utils/assets.js';
+import {
+  ensurePreviewLogin, getLivePreviewUrl, loadStyle, hashChange,
+} from '../../../nx2/utils/utils.js';
 
 import './views/editor.js';
 import './views/sidebar.js';
@@ -19,16 +22,17 @@ const EL_NAME = 'nx-form';
 
 // Derive the legacy `details` shape the form utils expect from the EW-supplied
 // `ctx`. `ctx.path` is the full `org/site/path` locator; the DA source is the
-// `.html` document at that path.
+// `.html` document at that path. `parent` and `name` match the upload context Canvas uses.
 function detailsFromCtx(ctx) {
   if (!ctx?.org || !ctx?.repo || !ctx?.path) return null;
   const raw = `/${String(ctx.path).replace(/^\/+/, '')}`;
   const fullpath = raw.toLowerCase().endsWith('.html') ? raw : `${raw}.html`;
-  const name = fullpath.slice(fullpath.lastIndexOf('/') + 1, -'.html'.length);
+  const separator = fullpath.lastIndexOf('/');
   return {
     owner: ctx.org,
     repo: ctx.repo,
-    name,
+    parent: fullpath.slice(0, separator),
+    name: fullpath.slice(separator + 1, -'.html'.length),
     fullpath,
     sourceUrl: fullpath,
   };
@@ -41,13 +45,26 @@ function ctxFromHashState(state) {
   return { org: state.org, repo: state.site, path: state.fullpath.slice(1) };
 }
 
+async function loadAemRepoConfig({ owner, repo }) {
+  try {
+    const { getRepositoryConfig } = await import('../../../nx2/utils/aem-assets/repository-config.js');
+    return { repoConfig: await getRepositoryConfig(owner, repo) };
+  } catch (error) {
+    return { error };
+  }
+}
+
 class Form extends LitElement {
   static properties = {
     ctx: { attribute: false },
+
     _context: { state: true },
     _state: { state: true },
     _nav: { state: true },
     _pendingSchemaId: { state: true },
+
+    _assetSources: { state: true },
+    _previewOrigin: { state: true },
   };
 
   // Reactive properties (declared in static properties) must NOT have class-
@@ -119,7 +136,10 @@ class Form extends LitElement {
     this._state = this._editor.getState();
     // Attach AFTER load so the loaded document is the persistence's baseline —
     // mutations after this point trigger saves; the load itself does not.
-    this._persistence = attachPersistence(this._editor, { path: this._details?.fullpath });
+    this._persistence = attachPersistence(this._editor, {
+      path: this._details?.fullpath,
+      schema,
+    });
     this._nav = { pointer: '/data', origin: null, seq: 0 };
   }
 
@@ -146,6 +166,10 @@ class Form extends LitElement {
     this._editor = null;
     this._persistence?.detach();
     this._persistence = null;
+
+    this._assetSources = undefined;
+    this._previewOrigin = undefined;
+
     this._details = detailsFromCtx(this.ctx);
 
     if (!this._details) {
@@ -163,6 +187,34 @@ class Form extends LitElement {
     if (context.status === 'ready') {
       this._start({ schema: context.schema, json: context.json });
     }
+
+    if (context.status === 'ready' || context.status === 'select-schema') {
+      await this._loadAssetContext(version);
+    }
+  }
+
+  // File sources and previews load independently, so a slow preview login never delays sources.
+  async _loadAssetContext(version) {
+    const { owner, repo } = this._details;
+    const isCurrent = () => version === this._loadVersion;
+
+    ensurePreviewLogin({ org: owner, repo }).then(() => {
+      if (isCurrent()) {
+        this._previewOrigin = getLivePreviewUrl({ org: owner, repo });
+      }
+    });
+
+    const { repoConfig, error } = await loadAemRepoConfig({ owner, repo });
+    if (!isCurrent()) {
+      return;
+    }
+
+    if (error) {
+      // eslint-disable-next-line no-console
+      console.warn('AEM Assets configuration unavailable; offering Upload only.', error);
+    }
+
+    this._assetSources = createAssetSources({ details: this._details, repoConfig, isCurrent });
   }
 
   _onPendingSchemaChange(e) {
@@ -359,6 +411,8 @@ class Form extends LitElement {
             .state=${this._state}
             .nav=${this._nav}
             .onSelect=${this._onSelect}
+            .assetSources=${this._assetSources}
+            .previewOrigin=${this._previewOrigin}
           ></nx-editor>
           <nx-preview .state=${this._state}></nx-preview>
         </div>

nx/blocks/form/fields/asset.css

@@ -0,0 +1,129 @@
+:host {
+  --asset-preview-height: 194px;
+  --asset-row-height: 56px;
+  --asset-transparency-grid-size: 8px;
+  --asset-preview-fade: 130ms;
+  --asset-menu-icon-size: 16px;
+
+  display: block;
+  font-family: var(--s2-font-family, adobe-clean, "Source Sans Pro", system-ui, sans-serif);
+}
+
+/* Fixed rows in every state, so selecting, replacing or removing never shifts the page. */
+.asset {
+  display: grid;
+  grid-template-rows: var(--asset-preview-height) var(--asset-row-height);
+  overflow: hidden;
+  border: 1px solid var(--s2-gray-300);
+  border-radius: var(--s2-corner-radius-500);
+  background: var(--s2-gray-25);
+}
+
+.has-error .asset {
+  border-color: var(--s2-red-900);
+}
+
+.asset-preview {
+  display: grid;
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+  place-items: center;
+  overflow: hidden;
+  background: var(--s2-gray-100);
+}
+
+/* The image covers the file type badge once it has loaded. */
+.asset-preview > * {
+  grid-area: 1 / 1;
+}
+
+.asset-file-type {
+  padding: var(--s2-spacing-75) var(--s2-spacing-200);
+  border-radius: var(--s2-corner-radius-200);
+  background: var(--s2-gray-25);
+  color: var(--s2-gray-800);
+  font-size: var(--s2-body-size-s);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.asset-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity var(--asset-preview-fade) ease-out;
+  background-color: var(--s2-gray-25);
+  background-image: conic-gradient(
+    var(--s2-gray-200) 90deg, transparent 90deg 180deg,
+    var(--s2-gray-200) 180deg 270deg, transparent 270deg
+  );
+  background-size: var(--asset-transparency-grid-size) var(--asset-transparency-grid-size);
+}
+
+.asset-preview img.is-loaded {
+  opacity: 1;
+}
+
+.asset-row {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--s2-spacing-200);
+  min-width: 0;
+  padding: 0 var(--s2-spacing-200) 0 var(--s2-spacing-300);
+  border-top: 1px solid var(--s2-gray-200);
+}
+
+.asset-placeholder,
+.asset-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--s2-body-size-s);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.asset-name {
+  display: flex;
+  color: var(--s2-gray-900);
+  font-weight: 600;
+}
+
+.asset-name-stem {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.asset-name-extension {
+  flex: none;
+}
+
+.asset-placeholder {
+  color: var(--s2-gray-700);
+}
+
+.asset-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--s2-spacing-100);
+}
+
+.asset-source-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s2-spacing-75);
+}
+
+.asset-menu-chevron {
+  width: var(--asset-menu-icon-size);
+  height: var(--asset-menu-icon-size);
+}
+
+nx-dialog p {
+  margin: 0;
+}