Save changes button displayed for new course without changes in settings

Reproduce

1. Enablecontentstore.new_studio_mfe.use_new_schedule_details_page
2. Create course in Studio
3. Open Settings -> Schedule & details

4. You can also see a broken placeholder image for the Course overview field

Expected Result

The "You've made some changes" message with the Save button should not appear if no changes were made in the Schedule & Details section. It's important to note that no changes should be present, as this is a newly created course.

---

Investigation

I have identified the cause behind the appearance of the window with the save button:

This determines whether there are any changes in the edit fields for course information (hooks.jsx):

    if (editedValues[fieldName] !== value) {
      setEditedValues((prevEditedValues) => ({
        ...prevEditedValues,
        [fieldName]: value || '',
      }));

      if (!showModifiedAlert) {
        setShowModifiedAlert(true);
      }
    }

For the Course overview field, initially, the template fragments were not equal:

• edited value:

<section class="about">
<h2>About This Course</h2>
<p>Include your long course description here. The long course description should contain 150-400 words.</p>
<p>This is paragraph 2 of the long course description. Add more paragraphs as needed. Make sure to enclose them in paragraph tags.</p>
</section>
<section class="prerequisites">
<h2>Requirements</h2>
<p>Add information about the skills and knowledge students need to take this course.</p>
</section>
<section class="course-staff">
<h2>Course Staff</h2>
<article class="teacher">
<div class="teacher-image"><img src="/asset-v1:RG+dima-visibility+2024+type@asset+block@images/placeholder-faculty.png" align="left" alt="Course Staff Image #1" /></div>
<h3>Staff Member #1</h3>
<p>Biography of instructor/staff member #1</p>
</article>
<article class="teacher">
<div class="teacher-image"><img src="/asset-v1:RG+dima-visibility+2024+type@asset+block@images/placeholder-faculty.png" align="left" alt="Course Staff Image #2" /></div>
<h3>Staff Member #2</h3>
<p>Biography of instructor/staff member #2</p>
</article>
</section>
<section class="faq">
<section class="responses">
<h2>Frequently Asked Questions</h2>
<article class="response">
<h3>What web browser should I use?</h3>
<p>The Open edX platform works best with current versions of Chrome, Edge, Firefox, or Safari.</p>
<p>See our <a href="https://edx.readthedocs.org/projects/open-edx-learner-guide/en/latest/front_matter/browsers.html">list of supported browsers</a> for the most up-to-date information.</p>
</article>
<article class="response">
<h3>Question #2</h3>
<p>Your answer would be displayed here.</p>
</article>
</section>
</section>

---

• it getting from the backend

<section class="about">
  <h2>About This Course</h2>
  <p>Include your long course description here. The long course description should contain 150-400 words.</p>

  <p>This is paragraph 2 of the long course description. Add more paragraphs as needed. Make sure to enclose them in paragraph tags.</p>
</section>

<section class="prerequisites">
  <h2>Requirements</h2>
  <p>Add information about the skills and knowledge students need to take this course.</p>
</section>

<section class="course-staff">
  <h2>Course Staff</h2>
  <article class="teacher">
    <div class="teacher-image">
      <img src="/static/images/placeholder-faculty.png" align="left" alt="Course Staff Image #1" />
    </div>

    <h3>Staff Member #1</h3>
    <p>Biography of instructor/staff member #1</p>
  </article>

  <article class="teacher">
    <div class="teacher-image">
      <img src="/static/images/placeholder-faculty.png" align="left" alt="Course Staff Image #2" />
    </div>

    <h3>Staff Member #2</h3>
    <p>Biography of instructor/staff member #2</p>
  </article>
</section>

<section class="faq">
  <section class="responses">
    <h2>Frequently Asked Questions</h2>
    <article class="response">
      <h3>What web browser should I use?</h3>
      <p>The Open edX platform works best with current versions of Chrome, Edge, Firefox, or Safari.</p>
      <p>See our <a href="https://edx.readthedocs.org/projects/open-edx-learner-guide/en/latest/front_matter/browsers.html">list of supported browsers</a> for the most up-to-date information.</p>
    </article>

    <article class="response">
      <h3>Question #2</h3>
      <p>Your answer would be displayed here.</p>
    </article>
  </section>
</section>

---

The difference is (this is another bug related to this issue):
src="/asset-v1:RG+dima-visibility+2024+type@asset+block@images/placeholder-faculty.png"
src="/static/images/placeholder-faculty.png"

This behavior was not present in the Redwood.1 release, but appeared in Redwood.2.

• Course Authoring MFE Redwood.1 -> "@edx/frontend-lib-content-components": "^2.1.11"
• Course Authoring MFE Redwood.2 -> "@edx/frontend-lib-content-components": "^2.5.1"

I have concluded those recent changes in the frontend-lib-content-components library have impacted the Course Authoring MFE.

The replaceStaticWithAsset function is responsible for path transformation. If I understand correctly, the changes in this MR affected the images in the Course Overview field.

Since frontend-lib-content-components is deprecated, no further modifications can be made to it. I checked the master branch, and the same bug exists there, as the code from this library was migrated to Course Authoring MFE. However, I am unable to fix this bug as the functionality is quite complex, and my frontend expertise is limited.

@arbrandes @KristinAoki Could you assist me in resolving this issue?