feat: Add support for spoilers (#60)

* feat: add support for spoilers

* add text parser

* added more safeguards

Author: dkyadav34

public/scripts/text-parser.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * All rights reserved.
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Export for use in other files
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { extractSpoilerInfo };
+}
+
+/**
+ * Extracts spoiler text and their positions from a string with **spoiler** markers
+ * @param {string} text - Input text with **spoiler** markers
+ * @returns {Object} - Object containing spoiler info and cleaned text
+ */
+function extractSpoilerInfo(text) {
+    const spoilerMarker = '**spoiler**';
+    const textEntities = [];
+    let cleanedText = '';
+    let currentPosition = 0;
+    let searchPosition = 0;
+
+    while (currentPosition < text.length && searchPosition < text.length) {
+        // Find the next spoiler start marker
+        const startMarkerIndex = text.indexOf(spoilerMarker, searchPosition);
+
+        if (startMarkerIndex === -1) {
+            // No more spoiler markers, add remaining text
+            cleanedText += text.substring(searchPosition);
+            break;
+        }
+
+        // Add text before the spoiler marker to cleaned text
+        const textBeforeMarker = text.substring(searchPosition, startMarkerIndex);
+        cleanedText += textBeforeMarker;
+        currentPosition += textBeforeMarker.length;
+
+        // Find the closing spoiler marker
+        const contentStartIndex = startMarkerIndex + spoilerMarker.length;
+        const endMarkerIndex = text.indexOf(spoilerMarker, contentStartIndex);
+
+        if (endMarkerIndex === -1) {
+            // No closing marker found, treat remaining text as normal
+            cleanedText += text.substring(startMarkerIndex);
+            break;
+        }
+
+        // Extract spoiler content
+        const spoilerContent = text.substring(contentStartIndex, endMarkerIndex);
+
+        // Record spoiler info
+        textEntities.push({
+            entity_type: "SPOILER",
+            text: spoilerContent,
+            offset: currentPosition.toString(),
+            length: spoilerContent.length.toString(),
+        });
+
+        // Add spoiler content to cleaned text
+        cleanedText += spoilerContent;
+        currentPosition += spoilerContent.length;
+
+        // Move search position past the end marker
+        searchPosition = endMarkerIndex + spoilerMarker.length;
+    }
+
+    return {
+        textEntities: textEntities,
+        text: cleanedText
+    };
+}

public/scripts/upload.js

@@ -7,17 +7,21 @@
 
 async function updateMediaType(attachmentsCount, attachmentListElem) {
     const mediaTypeElem = document.getElementById('media-type');
+    const spoilerMediaControl = document.querySelector('.spoiler-media-control');
 
     let mediaTypeDesc;
     if (attachmentsCount === 0) {
         mediaTypeDesc = 'Text 📝';
+        spoilerMediaControl.style.display = 'none';
     } else if (attachmentsCount === 1) {
         const singleAttachmentType =
             attachmentListElem.querySelector('select').value;
         if (singleAttachmentType === 'Image') mediaTypeDesc = 'Image 🖼️';
         else mediaTypeDesc = 'Video 🎬';
+        spoilerMediaControl.style.display = 'block';
     } else {
         mediaTypeDesc = 'Carousel 🎠';
+        spoilerMediaControl.style.display = 'block';
     }
 
     mediaTypeElem.innerText = mediaTypeDesc;

src/index.js

@@ -15,7 +15,9 @@ const fs = require('fs');
 const { URLSearchParams, URL } = require('url');
 const multer = require('multer');
 const { DateTime } = require('luxon');
+const textParser = require('../public/scripts/text-parser.js');
 
+const spoilerMarker = "**spoiler**";;
 const app = express();
 const upload = multer();
 
@@ -58,6 +60,8 @@ const FIELD__THREADS_BIOGRAPHY = 'threads_biography';
 const FIELD__THREADS_PROFILE_PICTURE_URL = 'threads_profile_picture_url';
 const FIELD__USERNAME = 'username';
 const FIELD__VIEWS = 'views';
+const FIELD_IS_SPOILER_MEDIA = 'is_spoiler_media';
+const FIELD_TEXT_ENTITES = 'text_entities';
 
 const MEDIA_TYPE__CAROUSEL = 'CAROUSEL';
 const MEDIA_TYPE__IMAGE = 'IMAGE';
@@ -94,6 +98,8 @@ const PARAMS__SEARCH_TYPE = 'search_type';
 const PARAMS__TEXT = 'text';
 const PARAMS__TOPIC_TAG = 'topic_tag';
 const PARAMS__USERNAME = 'username';
+const PARAMS_IS_SPOILER_MEDIA = 'is_spoiler_media';
+const PARAMS_TEXT_ENTITES = 'text_entities';
 
 // Read variables from environment
 require('dotenv').config();
@@ -442,15 +448,24 @@ app.post('/upload', upload.array(), async (req, res) => {
         pollOptionC,
         pollOptionD,
         quotePostId,
+        spoilerMedia,
     } = req.body;
 
     const params = {
-        [PARAMS__TEXT]: text,
         [PARAMS__REPLY_CONTROL]: replyControl,
         [PARAMS__REPLY_TO_ID]: replyToId,
         [PARAMS__LINK_ATTACHMENT]: linkAttachment,
     };
 
+    if (text.includes(spoilerMarker)) {
+        parsedInput = textParser.extractSpoilerInfo(text);
+        processedText = parsedInput.text;
+        textEntites = parsedInput.textEntities;
+        params[PARAMS__TEXT] = processedText;
+        params[PARAMS_TEXT_ENTITES] = JSON.stringify(textEntites);
+    } else {
+        params[PARAMS__TEXT] = text;
+    }
     if (
         topicTag.length >= 1 &&
         topicTag.length <= 50 &&
@@ -460,6 +475,10 @@ app.post('/upload', upload.array(), async (req, res) => {
         params[PARAMS__TOPIC_TAG] = topicTag;
     }
 
+    if (spoilerMedia) {
+        params[PARAMS_IS_SPOILER_MEDIA] = true;
+    }
+
     if (pollOptionA && pollOptionB) {
         const pollAttachment = JSON.stringify({
             option_a: pollOptionA,
@@ -658,6 +677,8 @@ app.get('/threads/:threadId', loggedInUserChecker, async (req, res) => {
                 FIELD__IS_QUOTE_POST,
                 FIELD__QUOTED_POST,
                 FIELD__REPOSTED_POST,
+                FIELD_IS_SPOILER_MEDIA,
+                FIELD_TEXT_ENTITES,
             ].join(','),
         },
         req.session.access_token

views/thread.pug

@@ -23,6 +23,9 @@ block content
             tr
                 td Text
                 td #{text}
+            tr
+                td Text Entities
+                td #{text_entities}
             tr
                 td Topic Tag
                 td #{topic_tag}
@@ -33,6 +36,9 @@ block content
                 td Media URL
                 td
                     a(href=media_url target='_blank') #{media_url}
+            tr
+                td Is Spoiler Media Post
+                td #{is_spoiler_media}
             tr
                 td GIF URL
                 td

views/upload.pug

@@ -35,6 +35,8 @@ block content
         textarea {
             text-align: center;
             padding: 5px 0;
+            border-radius: 20px;
+            height: 100px;
         }
         img {
             margin-bottom: 15px;
@@ -53,6 +55,9 @@ block content
         #quote-post-id {
             width: 200px;
         }
+        .spoiler-media-control {
+            display: none;
+        }
 
     if (replyToId !== undefined)
         p(style='color: gray') Replying to #{replyToId}
@@ -67,6 +72,11 @@ block content
             img#attachments-button(src='/img/attachment.png')
             div.attachment-controls
                 div#attachments-list.attachments
+        div.spoiler-media-control
+            label(for='spoilerMedia')
+            |   Mark Media as Spoiler   
+            input(type='checkbox' name='spoilerMedia' value='true')
+        br
 
         label(for="reply-control") Who Can Reply
         select#reply-control(name='replyControl' hint="Reply Control")