Bug: background-image URLs to Canvas course files are not correctly rewritten when copying pages between courses

[dj-visiarc]

Describe the bug

Description

When a Canvas page contains an inline background-image style that references a course file URL, copying the page to another course using Copy to... rewrites the URL to a course reference path that does not resolve correctly.

For example, the following HTML in the original page:

<div style="background-image: url('https://abc.instructure.com/files/4956/download?download_frd=1&amp;verifier=YHQr7NNjHjxQKj3WhFv6BU7G9Y5EMRvBncyXze4l');"></div>

is transformed in the copied page into:

<div style="background-image: url('$CANVAS_COURSE_REFERENCE$/file_ref/g4535939b713907bd74f5d7ad976f21fe/download?download_frd=1&amp;verifier=YHQr7NNjHjxQKj3WhFv6BU7G9Y5EMRvBncyXze4l');"></div>

The rewritten URL is not valid and causes the background image to break in the destination course.

This appears to be an issue with how course file references are rewritten when they are used inside CSS url() declarations in inline styles.

Screenshots or screen recordings

No response

Steps to reproduce

Steps to reproduce

1. Create a new page using the Rich Content Editor (RTE).

2. Add the following HTML snippet to the page:

   <div style="background-image: url('https://abc.instructure.com/files/4956/download?download_frd=1&amp;verifier=YHQr7NNjHjxQKj3WhFv6BU7G9Y5EMRvBncyXze4l');"></div>

3. Click Copy to... on the page and copy it to another course.

4. Open the destination course.

5. Open the copied page and view the HTML source in the Rich Content Editor (RTE).

Expected behavior

The background-image URL should be rewritten to a valid file reference in the destination course, or otherwise remain functional after the page has been copied.

Actual behavior

The URL is rewritten to:

<div style="background-image: url('$CANVAS_COURSE_REFERENCE$/file_ref/g4535939b713907bd74f5d7ad976f21fe/download?download_frd=1&amp;verifier=YHQr7NNjHjxQKj3WhFv6BU7G9Y5EMRvBncyXze4l');"></div>

which results in a broken background image in the copied page.

What browsers are you seeing the problem on (if applicable)?

No response

Backtrace

Relevant log output