Text Formatter: Add button and hotkey for spoiler

src/api/gramjs/gramjsBuilders/index.ts

@@ -294,6 +294,8 @@ export function buildMtpMessageEntity(entity: ApiMessageEntity): GramJs.TypeMess
         length,
         userId: new GramJs.InputUser({ userId: BigInt(userId!), accessHash: user!.accessHash! }),
       });
+    case ApiMessageEntityTypes.Spoiler:
+      return new GramJs.MessageEntitySpoiler({ offset, length });
     default:
       return new GramJs.MessageEntityUnknown({ offset, length });
   }

src/components/common/helpers/renderMessageText.tsx

@@ -499,6 +499,8 @@ function processEntityAsHtml(
         data-entity-type="${entity.type}"
         dir="auto"
       >${renderedContent}</a>`;
+    case ApiMessageEntityTypes.Spoiler:
+      return `||${renderedContent}||`;
     default:
       return renderedContent;
   }

src/components/middle/composer/TextFormatter.tsx

@@ -253,6 +253,12 @@ const TextFormatter: FC<OwnProps> = ({
     selectedRange, selectedTextFormats.strikethrough,
   ]);
 
+  const handleSpoilerText = useCallback(() => {
+    const text = getSelectedText();
+    document.execCommand('insertHTML', false, `||${text}||`);
+    onClose();
+  }, [getSelectedText, onClose]);
+
   const handleMonospaceText = useCallback(() => {
     if (selectedTextFormats.monospace) {
       const element = getSelectedElement();
@@ -314,6 +320,7 @@ const TextFormatter: FC<OwnProps> = ({
       i: handleItalicText,
       m: handleMonospaceText,
       s: handleStrikethroughText,
+      p: handleSpoilerText,
     };
 
     const handler = HANDLERS_BY_KEY[getKeyFromEvent(e)];
@@ -330,9 +337,8 @@ const TextFormatter: FC<OwnProps> = ({
     e.stopPropagation();
     handler();
   }, [
-    handleBoldText, handleItalicText, handleUnderlineText,
+    openLinkControl, handleBoldText, handleUnderlineText, handleItalicText, handleMonospaceText,
-    handleMonospaceText, handleStrikethroughText,
+    handleStrikethroughText, handleSpoilerText,
-    openLinkControl,
   ]);
 
   useEffect(() => {
@@ -380,6 +386,13 @@ const TextFormatter: FC<OwnProps> = ({
       onKeyDown={handleContainerKeyDown}
     >
       <div className="TextFormatter-buttons">
+        <Button
+          color="translucent"
+          ariaLabel="Spoiler text"
+          onClick={handleSpoilerText}
+        >
+          <i className="icon-eye-closed" />
+        </Button>
         <Button
           color="translucent"
           ariaLabel="Bold text"

src/util/parseMessageInput.ts

@@ -96,6 +96,10 @@ function parseMarkdown(html: string) {
     /(^|\s)(?!<code[^<]*|<\/)[~]{2}([^~\n]+)[~]{2}(?![^<]*<\/code>)(\s|$)/g,
     '$1<s>$2</s>$3',
   );
+  parsedHtml = parsedHtml.replace(
+    /(^|\s)(?!<code[^<]*|<\/)[|]{2}([^|\n]+)[|]{2}(?![^<]*<\/code>)(\s|$)/g,
+    `$1<span data-entity-type="${ApiMessageEntityTypes.Spoiler}">$2</span>$3`,
+  );
 
   return parsedHtml;
 }