From 0d7f50c1e46de3e44f46e685e33ee6a038554637 Mon Sep 17 00:00:00 2001
From: kibigo! <go@kibi.family>
Date: Fri, 11 Nov 2022 16:27:54 -0800
Subject: [PATCH] Support emojos in inline spoiler texts
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Right now, this requires re·emojifying the spoiler texts every time one
is opened or closed. There is probably a significant more efficient way
of doing this, but this is easiest conceptually and from a maintenance
standpoint (and emojification is a fast enough process that I’m really
not worried about efficiency here).
---
 .../flavours/glitch/actions/importer/normalizer.js          | 2 +-
 .../flavours/glitch/containers/status_container.js          | 6 +++++-
 app/javascript/flavours/glitch/features/status/index.js     | 6 +++++-
 .../flavours/glitch/styles/components/status.scss           | 2 ++
 app/javascript/flavours/glitch/utils/spoilertextify.js      | 4 ++++
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/importer/normalizer.js b/app/javascript/flavours/glitch/actions/importer/normalizer.js
index 7bf51d72a..6736731d4 100644
--- a/app/javascript/flavours/glitch/actions/importer/normalizer.js
+++ b/app/javascript/flavours/glitch/actions/importer/normalizer.js
@@ -91,7 +91,7 @@ export function normalizeStatus(status, normalOldStatus, settings) {
       // Set up initial (hidden) spoilers.
       spoilerNode.replaceWith(spoilertextify(
         spoilerNode.getAttribute('content'),
-        { document: statusDoc },
+        { document: statusDoc, emojos: emojiMap },
       ));
     });
 
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 7d22ee97c..ee2e5c644 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -236,8 +236,12 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
 
   onToggleSpoilerText (status, oldBody, spoilerElement, intl, open) {
     spoilerElement.replaceWith(spoilertextify(
-      spoilerElement.querySelector('.spoilertext--content').textContent,
+      spoilerElement.getAttribute('data-spoilertext-content'),
       {
+        emojos: status.get('emojis').reduce((obj, emoji) => {
+          obj[`:${emoji.get('shortcode')}:`] = emoji.toJS();
+          return obj;
+        }, {}),
         intl,
         open: open == null
           ? !spoilerElement.classList.contains('open')
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index 29c82f121..1ce30fcad 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -240,8 +240,12 @@ class Status extends ImmutablePureComponent {
 
   handleToggleSpoilerText = (status, oldBody, spoilerElement, intl, open) => {
     spoilerElement.replaceWith(spoilertextify(
-      spoilerElement.querySelector('.spoilertext--content').textContent,
+      spoilerElement.getAttribute('data-spoilertext-content'),
       {
+        emojos: status.get('emojis').reduce((obj, emoji) => {
+          obj[`:${emoji.get('shortcode')}:`] = emoji.toJS();
+          return obj;
+        }, {}),
         intl,
         open: open == null
           ? !spoilerElement.classList.contains('open')
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index b818ee408..33d177ae8 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -1191,6 +1191,8 @@ a.status-card.compact:hover {
     background: $base-shadow-color;
     user-select: none;
     pointer-events: none;
+
+    img { visibility: hidden }
   }
 
   .spoilertext--span { white-space: nowrap }
diff --git a/app/javascript/flavours/glitch/utils/spoilertextify.js b/app/javascript/flavours/glitch/utils/spoilertextify.js
index 7eac6e4b0..65d085c01 100644
--- a/app/javascript/flavours/glitch/utils/spoilertextify.js
+++ b/app/javascript/flavours/glitch/utils/spoilertextify.js
@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import emojify from 'flavours/glitch/util/emoji';
 
 const messages = defineMessages({
   spoilerHidden: {
@@ -17,9 +18,11 @@ const messages = defineMessages({
  */
 export default (text, options) => {
   const doc = options?.document || document;
+  const emojiMap = options?.emojos || {};
   const { intl, open } = options;
   const result = doc.createElement('span');
   result.className = open ? 'spoilertext open' : 'spoilertext';
+  result.setAttribute('data-spoilertext-content', text);
   if (!open) {
     const accessibleDescription = doc.createElement('span');
     accessibleDescription.className = 'spoilertext--screenreader-only';
@@ -30,6 +33,7 @@ export default (text, options) => {
   textElt.className = 'spoilertext--content';
   textElt.setAttribute('aria-hidden', open ? 'false' : 'true');
   textElt.textContent = text;
+  textElt.innerHTML = emojify(textElt.innerHTML, emojiMap);
   const togglerSpan = doc.createElement('span');
   togglerSpan.className = 'spoilertext--span';
   const togglerButton = doc.createElement('button');
-- 
2.47.3