Minimal Library Asset Support

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="|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) {

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%',

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/`);
   });
 });