Merge branch 'release' into beta

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Experimental
 
+## [1.131.2] - 2024-05-08
+### Fixed
+- Programmatic insertion into the comment text area is now debounced with a
+  timeout of 100ms. It prevents races when multiple files are uploaded at the
+  same time.
+- Very long words now breaks up in the comment preview and at the Notifications
+  page.
+
 ## [1.131.1] - 2024-05-06
 ### Fixed
 - Fixed a draft fileIds synchronization bug.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-pepyatka",
-  "version": "1.131.1",
+  "version": "1.131.2",
   "description": "",
   "main": "index.js",
   "dependencies": {

src/components/footer.jsx

@@ -7,7 +7,7 @@ export default function Footer({ short }) {
   return (
     <footer className="footer">
       <p role="navigation">
-        &copy; FreeFeed 1.131.1-beta (May 6, 2024)
+        &copy; FreeFeed 1.131.2-beta (May 8, 2024)
         <br />
         <Link to="/about">About</Link>
         {' | '}

src/components/post/post-comment-preview.module.scss

@@ -21,6 +21,7 @@
     0 3px 9px 2px rgba(0, 0, 0, 0.25),
     0 -3px 9px 0 rgba(0, 0, 0, 0.1);
   transition: transform 0.3s;
+  overflow-wrap: break-word;
 
   &::after {
     $sz: rem(16px);

src/components/smart-textarea.jsx

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import { CODE_ENTER } from 'keycode-js';
-import { forwardRef, useCallback, useEffect, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import TextareaAutosize from 'react-textarea-autosize';
 
@@ -63,27 +63,7 @@ export const SmartTextarea = forwardRef(function SmartTextarea(
     };
   }, [cancelEmptyDraftOnBlur, draftKey, ref]);
 
-  ref.current.insertText = useCallback(
-    (insertion) => {
-      const input = ref.current;
-      const [text, selStart, selEnd] = insertText(
-        insertion,
-        input.value,
-        input.selectionStart,
-        input.selectionEnd,
-      );
-      // Pre-fill the input value to keep the cursor/selection
-      // position after React update cycle
-      input.value = text;
-      input.setSelectionRange(selStart, selEnd);
-      input.focus();
-      onText?.(input.value);
-      if (draftKey) {
-        setDraftField(draftKey, 'text', input.value);
-      }
-    },
-    [draftKey, onText, ref],
-  );
+  ref.current.insertText = useDebouncedInsert(100, ref, onText, draftKey);
 
   useEffect(() => {
     if (!draftKey && !onText) {
@@ -261,3 +241,44 @@ function containsFiles(dndEvent) {
   }
   return false;
 }
+
+function useDebouncedInsert(interval, inputRef, onText, draftKey) {
+  const queue = useRef([]);
+  const timer = useRef(0);
+
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const insertQueue = useCallback(() => {
+    const toInsert = queue.current.join(' ');
+    if (toInsert === '') {
+      return;
+    }
+    queue.current.length = 0;
+
+    const input = inputRef.current;
+    const [text, selStart, selEnd] = insertText(
+      toInsert,
+      input.value,
+      input.selectionStart,
+      input.selectionEnd,
+    );
+    // Pre-fill the input value to keep the cursor/selection
+    // position after React update cycle
+    input.value = text;
+    input.setSelectionRange(selStart, selEnd);
+    input.focus();
+    onText?.(input.value);
+    if (draftKey) {
+      setDraftField(draftKey, 'text', input.value);
+    }
+  }, [draftKey, inputRef, onText]);
+
+  return useCallback(
+    (insertion) => {
+      queue.current.push(insertion);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(insertQueue, interval);
+    },
+    [insertQueue, interval],
+  );
+}

src/services/drafts.js

@@ -2,7 +2,6 @@
 /* global CONFIG */
 import storage from 'local-storage-fallback';
 import { isEqual, omit } from 'lodash-es';
-import { shallowEqual } from 'react-redux';
 import { setAttachment } from '../redux/action-creators';
 import { setDelayedAction } from './drafts-throttling';
 import { EventEmitter } from './drafts-events';
@@ -71,10 +70,6 @@ export function setDraftField(key, field, value) {
   const newData = { ...oldData, [field]: value, ts: Date.now() };
   if (field === 'files') {
     fillFileIds(newData);
-    if (shallowEqual(oldData?.fileIds, newData.fileIds)) {
-      setActiveDraft(key);
-      return;
-    }
   }
   setActiveDraft(key);
   setDraftData(key, newData);
@@ -370,7 +365,7 @@ function trimDraftPrefix(storageKey) {
  * @returns {boolean}
  */
 function isUnchangedData(data1, data2) {
-  return data2 === data1 || isEqual(data1, data2);
+  return data2 === data1 || isEqual(omit(data1, 'ts'), omit(data2, 'ts'));
 }
 
 /**

styles/shared/events-list.scss

@@ -47,6 +47,7 @@
     padding-left: 0.9em;
     margin-left: 0.3em;
     border-left: 0.3em solid #eee;
+    overflow-wrap: break-word;
 
     @media (max-width: 450px) {
       margin-left: 0;