GH-90 - AEM Assets Integration (#91)

* Allows admins to spec a cloud service repository per project
* Shows a button to creators if assets is enabled.
* Opens modal to let creator choose asset.
* Automatically inserts asset into doc and maintains AEM origin.
* Converts author URL to publish (polaris coming soon).

Resolves: GH-90

blocks/edit/da-assets/da-assets.css

@@ -0,0 +1,13 @@
+.da-dialog-asset {
+ width: calc(100% - 72px);
+ box-sizing: border-box;
+ height: calc(100% - 72px);
+ padding: 0;
+ border: 0;
+ border-radius: 16px;
+ filter: drop-shadow(0 0 8px rgb(0 0 0 / 30%));
+}
+
+.da-dialog-asset-inner {
+ height: 100%;
+}

blocks/edit/da-assets/da-assets.js

@@ -0,0 +1,69 @@
+import { getNx } from '../../../scripts/utils.js';
+import getPathDetails from '../../shared/pathDetails.js';
+import { DA_ORIGIN } from '../../shared/constants.js';
+import { daFetch } from '../../shared/utils.js';
+
+const { loadScript, loadStyle } = await import(`${getNx()}/scripts/nexter.js`);
+const { loadIms, handleSignIn } = await import(`${getNx()}/utils/ims.js`);
+
+const ASSET_SELECTOR_URL = 'https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js';
+
+export async function getRepoId() {
+ const { repo, owner } = getPathDetails();
+ if (!(repo || owner)) return null;
+ const resp = await daFetch(`${DA_ORIGIN}/config/${owner}/${repo}`);
+ if (!resp.ok) return null;
+ const json = await resp.json();
+ const repoConf = json.data.find((conf) => conf.key === 'aem.repositoryId');
+ if (!repoConf) return null;
+ return repoConf.value;
+}
+
+export async function openAssets() {
+ const repoId = await getRepoId();
+ const details = await loadIms();
+ if (details.anonymous) handleSignIn();
+ if (!(repoId && details.accessToken)) return;
+
+ let dialog = document.querySelector('.da-dialog-asset');
+ if (!dialog) {
+ await loadStyle(import.meta.url.replace('.js', '.css'));
+ await loadScript(ASSET_SELECTOR_URL);
+
+ dialog = document.createElement('dialog');
+ dialog.className = 'da-dialog-asset';
+
+ const inner = document.createElement('div');
+ inner.className = 'da-dialog-asset-inner';
+
+ dialog.append(inner);
+
+ const main = document.body.querySelector('main');
+ main.insertAdjacentElement('afterend', dialog);
+
+ const selectorProps = {
+ imsToken: details.accessToken.token,
+ repositoryId: repoId,
+ aemTierType: 'author',
+ onClose: () => { dialog.close(); },
+ handleSelection: (assets) => {
+ const [asset] = assets;
+ if (!asset) return;
+ const format = asset['aem:formatName'];
+ if (!format) return;
+ const { path } = asset;
+ const pubRepoId = repoId.replace('author', 'publish');
+ const { view } = window;
+ const { state } = view;
+ dialog.close();
+
+ const imgObj = { src: `https://${pubRepoId}${path}`, style: 'width: 180px' };
+ const fpo = state.schema.nodes.image.create(imgObj);
+ view.dispatch(state.tr.insert(state.selection.head, fpo).scrollIntoView());
+ },
+ };
+ window.PureJSSelectors.renderAssetSelector(inner, selectorProps);
+ }
+
+ dialog.showModal();
+}

blocks/edit/da-editor/da-editor.css

@@ -110,6 +110,10 @@ span.ProseMirror-menuseparator {
  height: 44px;
 }
 
+.ProseMirror-menuitem:has(.open-assets.ProseMirror-menu-disabled) {
+ display: none;
+}
+
 .ProseMirror-menu-disabled {
  opacity: 0.5;
 }
@@ -247,6 +251,10 @@ span.ProseMirror-menuseparator {
  background: url('/blocks/edit/img/Smock_CCLibrary_18_N.svg') center / 18px no-repeat #EFEFEF;
 }
 
+.open-assets {
+ background: url('/blocks/edit/img/Smock_Images_18_N.svg') center / 18px no-repeat #EFEFEF;
+}
+
 .edit-undo {
  background: url('/blocks/edit/img/Smock_Undo_18_N.svg') center / 18px no-repeat #EFEFEF;
 }

blocks/edit/prose/plugins/menu.js

@@ -26,6 +26,7 @@ import openPrompt from '../../da-palette/da-palette.js';
 import openLibrary from '../../da-library/da-library.js';
 
 import insertTable from '../table.js';
+import { getRepoId, openAssets } from '../../da-assets/da-assets.js';
 
 function canInsert(state, nodeType) {
  const { $from } = state.selection;
@@ -199,23 +200,6 @@ function removeLinkItem(linkMarkType) {
  });
 }
 
-// eslint-disable-next-line no-unused-vars
-function libraryItem(_menu, _markType) {
- const label = 'Library';
- return new MenuItem({
- title: 'Open library',
- label,
- class: 'insert-table',
- run(state, dispatch, view) {
- // eslint-disable-next-line no-unused-vars
- const callback = (_attrs) => {
- view.focus();
- };
- openLibrary({ callback });
- },
- });
-}
-
 function markItem(markType, options) {
  const passedOptions = { active(state) { return markActive(state, markType); } };
  // eslint-disable-next-line no-restricted-syntax, guard-for-in
@@ -298,13 +282,14 @@ function getTextBlocks(marks, nodes) {
  ];
 }
 
-function getMenu(view) {
+async function getMenu(view) {
  const menu = document.createElement('div');
  menu.className = 'ProseMirror-menubar';
 
  const { marks, nodes } = view.state.schema;
  const editTable = getTableMenu();
  const textBlocks = getTextBlocks(marks, nodes);
+ const repoId = await getRepoId();
 
  const textMenu = [
  new Dropdown(textBlocks, {
@@ -331,6 +316,13 @@ function getMenu(view) {
  run() { openLibrary(); },
  class: 'open-library',
  }),
+ new MenuItem({
+ title: 'Open assets',
+ label: 'Assets',
+ enable() { return !!repoId; },
+ async run() { openAssets(); },
+ class: 'open-assets',
+ }),
  new Dropdown(editTable, {
  label: 'Edit Block',
  class: 'edit-table',
@@ -388,16 +380,15 @@ function getMenu(view) {
 export default new Plugin({
  props: {
  handleDOMEvents: {
- // eslint-disable-next-line no-unused-vars
- focus: (view, _event) => {
+ focus: (view) => {
  view.root.querySelectorAll('da-palette').forEach((palette) => {
  palette.updateSelection();
  });
  },
  },
  },
- view: (view) => {
- const { menu, update } = getMenu(view);
+ view: async (view) => {
+ const { menu, update } = await getMenu(view);
  const palettes = document.createElement('div');
  palettes.className = 'da-palettes';
  view.dom.insertAdjacentElement('beforebegin', menu);

blocks/shared/constants.js

@@ -32,4 +32,5 @@ export const getDaAdmin = (() => {
  };
 })();
 
+export const DA_ORIGIN = (() => getDaEnv(window.location, 'da-admin', DA_ADMIN_ENVS))();
 export const COLLAB_ORIGIN = (() => getDaEnv(window.location, 'da-collab', DA_COLLAB_ENVS))();

scripts/scripts.js

@@ -17,6 +17,7 @@ const STYLES = '/styles/styles.css';
 const CONFIG = {
  codeBase,
  imsClientId: 'darkalley',
+ imsScope: 'ab.manage,additional_info.projectedProductContext,AdobeID,gnav,openid,org.read,read_organizations,session',
  decorateArea,
 };