Merge branch 'main' into glitch-soc/merge-upstream

Conflicts:
- `.github/workflows/build-image.yml`:
  Upstream changed how docker images were built, including how
  they were cached.
  I don't know much about it, so applied upstream's changes.
- `app/controllers/admin/domain_blocks_controller.rb`:
  The feature, that was in glitch-soc, got backported upstream.
  It also had a few fixes upstream, so those have been ported!
- `app/javascript/packs/admin.js`:
  Glitch-soc changes have been backported upstream. As a result,
  some code from `app/javascript/core/admin.js` got added upstream.
  Kept our version since our shared Javascript already has that feature.
- `app/models/user.rb`:
  Upstream added something to distinguish unusable and unusable-because-moved
  accounts, while glitch-soc considers moved accounts usable.
  Took upstream's code for `functional_or_moved?` and made `functional?`
  call it.
- `app/views/statuses/_simple_status.html.haml`:
  Upstream cleaned up code style a bit, on a line that we had custom changes
  for.
  Applied upstream's change while keeping our change.
- `config/initializers/content_security_policy.rb`:
  Upstream adopted one CSP directive we already had.
  The conflict is because of our files being structurally different, but the
  change itself was already part of glitch-soc.
  Kept our version.

1 files changed, 16 insertions, 7 deletions

diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js
index 52a8458fb..bc3dd8c60 100644
--- a/app/javascript/mastodon/features/emoji/emoji.js
+++ b/app/javascript/mastodon/features/emoji/emoji.js
@@ -19,8 +19,6 @@ const emojiFilename = (filename) => {
   return borderedEmoji.includes(filename) ? (filename + '_border') : filename;
 };
 
-const domParser = new DOMParser();
-
 const emojifyTextNode = (node, customEmojis) => {
   let str = node.textContent;
 
@@ -39,7 +37,7 @@ const emojifyTextNode = (node, customEmojis) => {
       }
     }
 
-    let rend, replacement = '';
+    let rend, replacement = null;
     if (i === str.length) {
       break;
     } else if (str[i] === ':') {
@@ -51,7 +49,14 @@ const emojifyTextNode = (node, customEmojis) => {
         // if you want additional emoji handler, add statements below which set replacement and return true.
         if (shortname in customEmojis) {
           const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = `<img draggable="false" class="emojione custom-emoji" alt="${shortname}" title="${shortname}" src="${filename}" data-original="${customEmojis[shortname].url}" data-static="${customEmojis[shortname].static_url}" />`;
+          replacement = document.createElement('img');
+          replacement.setAttribute('draggable', false);
+          replacement.setAttribute('class', 'emojione custom-emoji');
+          replacement.setAttribute('alt', shortname);
+          replacement.setAttribute('title', shortname);
+          replacement.setAttribute('src', filename);
+          replacement.setAttribute('data-original', customEmojis[shortname].url);
+          replacement.setAttribute('data-static', customEmojis[shortname].static_url);
           return true;
         }
         return false;
@@ -59,7 +64,12 @@ const emojifyTextNode = (node, customEmojis) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${emojiFilename(filename)}.svg" />`;
+      replacement = document.createElement('img');
+      replacement.setAttribute('draggable', false);
+      replacement.setAttribute('class', 'emojione');
+      replacement.setAttribute('alt', match);
+      replacement.setAttribute('title', title);
+      replacement.setAttribute('src', `${assetHost}/emoji/${emojiFilename(filename)}.svg`);
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.
       if (str.codePointAt(rend) === 65038) {
@@ -69,9 +79,8 @@ const emojifyTextNode = (node, customEmojis) => {
 
     fragment.append(document.createTextNode(str.slice(0, i)));
     if (replacement) {
-      fragment.append(domParser.parseFromString(replacement, 'text/html').documentElement.getElementsByTagName('img')[0]);
+      fragment.append(replacement);
     }
-    node.textContent = str.slice(0, i);
     str = str.slice(rend);
   }