From 7c5c518d9da60eb31a2099bec402cefee43b875b Mon Sep 17 00:00:00 2001
From: David Ormsbee <dave@axim.org>
Date: Tue, 15 Oct 2024 00:16:25 -0400
Subject: [PATCH 1/2] refactor: switch Content Library XBlock preview to Studio

edx-platform commit 7316111 (PR #35598) moved the XBlock embed view so
that it can be rendered on either LMS or Studio. This commit moves the
frontend to actually call the Studio endpoint. This will make Content
Library static asset display easier, because that view will only be made
available through Studio and not the LMS.
---
 src/library-authoring/LibraryBlock/LibraryBlock.tsx           | 4 ++--
 .../component-info/ComponentPreview.test.tsx                  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index 87defc0d83..dd49206123 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -20,7 +20,7 @@ interface LibraryBlockProps {
 const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(600);
-  const lmsBaseUrl = getConfig().LMS_BASE_URL;
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
 
   const intl = useIntl();
 
@@ -74,7 +74,7 @@ const LibraryBlock = ({ onBlockNotification, usageKey }: LibraryBlockProps) => {
       <iframe
         ref={iframeRef}
         title={intl.formatMessage(messages.iframeTitle)}
-        src={`${lmsBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
+        src={`${studioBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/`}
         data-testid="block-preview"
         style={{
           width: '100%',
diff --git a/src/library-authoring/component-info/ComponentPreview.test.tsx b/src/library-authoring/component-info/ComponentPreview.test.tsx
index 859eb6cd1d..7c9b565e56 100644
--- a/src/library-authoring/component-info/ComponentPreview.test.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.test.tsx
@@ -15,7 +15,7 @@ describe('<ComponentPreview />', () => {
     const usageKey = mockLibraryBlockMetadata.usageKeyPublished;
     render(<ComponentPreview usageKey={usageKey} />);
     const iframe = (await screen.findByTitle('Preview')) as HTMLIFrameElement;
-    expect(iframe.src).toEqual(`http://localhost:18000/xblocks/v2/${usageKey}/embed/student_view/`);
+    expect(iframe.src).toEqual(`http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/`);
   });
 
   it('shows an expanded preview of the component', async () => {
@@ -30,6 +30,6 @@ describe('<ComponentPreview />', () => {
     const dialogIframe = dialog.querySelector('iframe')!;
     expect(dialogIframe).not.toBeNull();
     expect(dialogIframe).toHaveAttribute('title', 'Preview');
-    expect(dialogIframe.src).toEqual(`http://localhost:18000/xblocks/v2/${usageKey}/embed/student_view/`);
+    expect(dialogIframe.src).toEqual(`http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/`);
   });
 });

From 234496b1daf3ed42df7196569090121f2a67704b Mon Sep 17 00:00:00 2001
From: David Ormsbee <dave@axim.org>
Date: Tue, 15 Oct 2024 00:29:30 -0400
Subject: [PATCH 2/2] fix: disable static asset mangling for v2 Content
 Libraries

The static asset substitution used to make images show up properly when
in the TinyMCE editor doesn't work for Content Libraries. Unfortunately,
this will cause the static asset references in XBlock content to get
mangled and saved incorrectly. So until we can handle it correctly,
we're just going to disable it entirely if the LearningContext is a v2
Content Library.

This means that static assets won't display properly in the editor
itself, but it should at least get written/preserved correctly, so that
those assets will show up properly in XBlock previews.
---
 .../sharedComponents/TinyMceWidget/hooks.js    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js
index b74488b4b6..6fe5b313e5 100644
--- a/src/editors/sharedComponents/TinyMceWidget/hooks.js
+++ b/src/editors/sharedComponents/TinyMceWidget/hooks.js
@@ -18,6 +18,7 @@ import pluginConfig from './pluginConfig';
 import * as module from './hooks';
 import * as tinyMCE from '../../data/constants/tinyMCE';
 import { getRelativeUrl, getStaticUrl, parseAssetName } from './utils';
+import { isLibraryKey } from '../../../generic/key-utils';
 
 export const state = StrictDict({
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -83,6 +84,20 @@ export const replaceStaticWithAsset = ({
   editorType,
   lmsEndpointUrl,
 }) => {
+  if (isLibraryKey(learningContextId)) {
+    // This function doesn't currently know how to deal with Library assets.
+    // Libraries don't mangle the path into an asset key–it might be sufficient
+    // to remove the initial "/" in a "/static/images/foo.png" link, and then
+    // set the base URL to the correct ComponentVersion base. If we let this
+    // function try to deal with Library assets, it would convert them in such a
+    // way that it wouldn't convert back later on, and we'd end up storing the
+    // incorrect OLX and breaking the display from that point forward.
+    //
+    // So until we handle it better, just disable static asset URL substitutions
+    // when dealing with Library content.
+    return false;
+  }
+
   let content = initialContent;
   let hasChanges = false;
   const srcs = content.split(/(src="|src=&quot;|href="|href=&quot)/g).filter(
@@ -98,7 +113,8 @@ export const replaceStaticWithAsset = ({
       const assetName = parseAssetName(src);
       const displayName = isStatic ? staticName : assetName;
       const isCorrectAssetFormat = assetSrc.startsWith('/asset') && assetSrc.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/g)?.length >= 1;
-      // assets in expandable text areas so not support relative urls so all assets must have the lms
+
+      // assets in expandable text areas do not support relative urls so all assets must have the lms
       // endpoint prepended to the relative url
       if (editorType === 'expandable') {
         if (isCorrectAssetFormat) {