Support emojos in inline spoiler texts

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).

diff --git a/app/javascript/flavours/glitch/actions/importer/normalizer.js b/app/javascript/flavours/glitch/actions/importer/normalizer.js
index 7bf51d72a6f329d609aada906ca4a0cab56063a9..6736731d41f5672b9d975b99cb0f58b6d48930ef 100644 (file)
--- 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 7d22ee97c3a21632d2244d0ae12529277996306f..ee2e5c644aafd27b81e22d6f0866d213b75e5380 100644 (file)
--- 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 29c82f121cc77ffea2b84360a28c41722750c03a..1ce30fcad08d436f4cb1ae992a6eaaf6e88bbfd9 100644 (file)
--- 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 b818ee408ac85c378ae70cdad5189a2e91678392..33d177ae8de5a534a5e5dc7edd3087e2d2d0e0d9 100644 (file)
--- 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 7eac6e4b07667aeeda450999fda37e87c491fee5..65d085c01ae9d25974c313704aff390a595bdea7 100644 (file)
--- 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');