fix: allow to preview images

src/editors/containers/TextEditor/index.jsx

@@ -40,6 +40,11 @@ const TextEditor = ({
     learningContextId,
   });
   const editorContent = newContent || initialContent;
+  let documentURL;
+  if (isLibrary) {
+    // TODO Get the library base URL in the format http://{STUDIO_HOST}/library_assets/{component_uuid}/
+    documentURL = 'http://studio.local.openedx.io:8001/library_assets/9b40a992-9d5f-4f22-9d8c-5ff18c3600dc/';
+  }
 
   if (!refReady) { return null; }
 
@@ -65,6 +70,7 @@ const TextEditor = ({
           images,
           isLibrary,
           learningContextId,
+          documentURL,
         }}
       />
     );

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -84,20 +84,6 @@ 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(
@@ -116,7 +102,21 @@ export const replaceStaticWithAsset = ({
 
       // 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 (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.
+        if (isStatic) {
+          staticFullUrl = assetSrc.substring(1);
+        }
+      } else if (editorType === 'expandable') {
         if (isCorrectAssetFormat) {
           staticFullUrl = `${lmsEndpointUrl}${assetSrc}`;
         } else {
@@ -261,9 +261,12 @@ export const editorConfig = ({
   content,
   minHeight,
   learningContextId,
+  documentURL,
 }) => {
   const lmsEndpointUrl = getConfig().LMS_BASE_URL;
   const studioEndpointUrl = getConfig().STUDIO_BASE_URL;
+
+  const baseURL = documentURL || lmsEndpointUrl;
   const {
     toolbar,
     config,
@@ -290,7 +293,7 @@ export const editorConfig = ({
       min_height: minHeight,
       contextmenu: 'link table',
       directionality: isLocaleRtl ? 'rtl' : 'ltr',
-      document_base_url: lmsEndpointUrl,
+      document_base_url: baseURL,
       imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)],
       imagetools_toolbar: imageToolbar,
       formats: { label: { inline: 'label' } },
@@ -436,6 +439,14 @@ export const setAssetToStaticUrl = ({ editorValue, lmsEndpointUrl }) => {
     const updatedContent = content.replace(currentSrc, portableUrl);
     content = updatedContent;
   });
+
+  assetSrcs.filter(src => src.startsWith('static/')).forEach(src => {
+    const nameFromEditorSrc = parseAssetName(src);
+    const portableUrl = `/${ nameFromEditorSrc}`;
+    const currentSrc = src.substring(0, src.search(/("|")/));
+    const updatedContent = content.replace(currentSrc, portableUrl);
+    content = updatedContent;
+  });
   return content;
 };
 

src/editors/sharedComponents/TinyMceWidget/index.jsx

@@ -44,6 +44,7 @@ const TinyMceWidget = ({
   images,
   isLibrary,
   onChange,
+  documentURL,
   ...editorConfig
 }) => {
   const { isImgOpen, openImgModal, closeImgModal } = hooks.imgModalToggle();
@@ -85,6 +86,7 @@ const TinyMceWidget = ({
             learningContextId,
             images: imagesRef,
             editorContentHtml,
+            documentURL,
             ...imageSelection,
             ...editorConfig,
           })