Use proxy for quick-edit

nx/blocks/quick-edit-portal/quick-edit-portal.js

@@ -1,4 +1,4 @@
-import { checkPermissions, signIn, handlePreview } from './src/utils.js';
+import { checkPermissions, signIn, handlePreview, getImageCookie } from './src/utils.js';
 import createProse from './src/prose.js';
 import {
   updateDocument, updateCursors, updateState, handleUndoRedo, getEditor, handleCursorMove,
@@ -88,13 +88,15 @@ export default async function decorate(el) {
       ctx.path = path;
       ctx.port = port;
 
+      await getImageCookie(owner, repo);
+
       await initProse(owner, repo, path, el, ctx);
 
       // Going forward, all messages will be sent via the port
       port.onmessage = (event) => onMessage(event, ctx);
 
       // Tell the other side we are ready
-      port.postMessage({ ready: true });
+      port.postMessage({ type: 'ready', ready: true });
     }
   }
   // set up message channel

nx/blocks/quick-edit-portal/src/prose2aem.js

@@ -63,6 +63,6 @@ export function getInstrumentedHTML(view) {
     }
   });
 
-  // Convert to an HTML string using prose2aem
-  return prose2aem(editorClone, true);
+  // Convert to an HTML string using prose2aem.
+  return prose2aem(editorClone, true, false, true);
 }

nx/blocks/quick-edit-portal/src/utils.js

@@ -1,5 +1,46 @@
 import { handleSignIn, loadIms } from '../../../utils/ims.js';
 
+const DA_LIVE_PREVIEW_ENVS = {
+  local: 'localhost:8000',
+  stage: 'stage-preview.da.live',
+  prod: 'preview.da.live',
+};
+
+export async function getToken() {
+  const ims = await loadIms(true);
+  if (ims.anonymous) return null;
+  const { token } = ims.accessToken;
+  return token;
+}
+
+function getLivePreviewDomain() {
+  const { href } = window.location;
+  const query = new URL(href).searchParams.get('da-live-preview');
+  if (query && query === 'reset') {
+    localStorage.removeItem('da-live-preview');
+  } else if (query) {
+    localStorage.setItem('da-live-preview', query);
+  }
+  const env = DA_LIVE_PREVIEW_ENVS[localStorage.getItem('da-live-preview') || 'prod'];
+  return window.location.origin === 'https://da.page' ? env.replace('.live', '.page') : env;
+}
+
+function getLivePreviewUrl(owner, repo) {
+  const domain = getLivePreviewDomain();
+  const protocol = domain.startsWith('localhost') ? 'http' : 'https';
+  return `${protocol}://main--${repo}--${owner}.${domain}`;
+}
+
+export async function getImageCookie(owner, repo) {
+  const token = await getToken();
+  if (token) {
+    await fetch(`${getLivePreviewUrl(owner, repo)}/gimme_cookie`, {
+      credentials: 'include',
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  }
+}
+
 export function findChangedNodes(oldDoc, newDoc) {
   const changes = [];
 
@@ -175,13 +216,6 @@ export function generateColor(name, hRange = [0, 360], sRange = [60, 80], lRange
   return `#${f(0)}${f(8)}${f(4)}`;
 }
 
-export async function getToken() {
-  const ims = await loadIms(true);
-  if (ims.anonymous) return null;
-  const { token } = ims.accessToken;
-  return token;
-}
-
 export async function checkPermissions(sourceUrl) {
   const token = await getToken();
   const resp = await fetch(sourceUrl, {

nx/public/plugins/quick-edit/quick-edit.js

@@ -19,9 +19,23 @@ async function setBody(body, ctx) {
   setupActions(ctx);
 }
 
-function onMessage(e, ctx) {
+function handleReady(e, ctx) {
   ctx.initialized = true;
-  if (e.data.type === 'set-body') {
+}
+
+function checkDomain() {
+  const currentUrl = new URL(window.location.href);
+  if (currentUrl.origin.endsWith('.aem.page')) {
+    const newOrigin = currentUrl.origin.replace('.aem.page', '.preview.da.live');
+    const newHref = `${newOrigin}${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+    window.location.replace(newHref);
+  }
+}
+
+function onMessage(e, ctx) {
+  if (e.data.type === 'ready') {
+    handleReady(e, ctx);
+  } else if (e.data.type === 'set-body') {
     setBody(e.data.body, ctx);
   } else if (e.data.type === 'set-editor-state') {
     const { editorState, cursorOffset } = e.data;
@@ -55,6 +69,8 @@ function getQuickEditSrc() {
 export default async function loadQuickEdit({ detail: payload }, loadPage) {
   if (document.getElementById(QUICK_EDIT_ID)) return;
 
+  checkDomain();
+
   const ctx = {
     initialized: false,
     loadPage,

nx/public/plugins/quick-edit/src/utils.js

@@ -1,9 +1,21 @@
 function removeQuickEditParam() {
-  const url = new URL(window.location);
+  const url = new URL(window.location.href);
   url.searchParams.delete('quick-edit');
   window.history.replaceState({}, '', url);
 }
 
+function navigateToAemPageOrReload() {
+  const currentUrl = new URL(window.location.href);
+  if (currentUrl.origin.endsWith('.preview.da.live')) {
+    const newOrigin = currentUrl.origin.replace('.preview.da.live', '.aem.page');
+    const newUrl = new URL(`${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`, `${newOrigin}/`);
+    newUrl.searchParams.delete('quick-edit');
+    window.location.replace(newUrl.href);
+  } else {
+    window.location.reload();
+  }
+}
+
 export function pollConnection(ctx, action) {
   ctx.initialized = false;
   let count = 0;
@@ -25,7 +37,7 @@ async function handlePreview(ctx) {
         ctx.port.removeEventListener('message', previewListener);
         if (e.data.ok) {
           removeQuickEditParam();
-          window.location.reload();
+          navigateToAemPageOrReload();
         } else {
           // eslint-disable-next-line no-alert
           alert(e.data.error);
@@ -53,7 +65,7 @@ export function setupActions(ctx) {
   // Create exit button
   const exitButton = createButton('quick-edit-exit', 'Exit', () => {
     removeQuickEditParam();
-    window.location.reload();
+    navigateToAemPageOrReload();
   });
   exitButton.style.display = 'none';