Merge branch 'release' into beta

CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Experimental
 
+## [1.134.3] - 2024-07-29
+### Added
+- The autocomplete menu now has a links to the found users/groups pages. These
+  links opens in a new tab for the most cases. Links opens in the current tab
+  when the user enters the "@username" in the search bar at the beginning of the
+  query.
+### Changed
+- The 'Expandable' component was rewritten using the modern browser APIs. It now
+  properly handles the content updates and does not require the content to be
+  fully inline.
+
 ## [1.134.2] - 2024-07-20
 ### Fixed
 - Style issues for code blocks.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-pepyatka",
-  "version": "1.134.2",
+  "version": "1.134.3",
   "description": "",
   "main": "index.js",
   "dependencies": {
@@ -12,7 +12,7 @@
     "classnames": "~2.5.1",
     "custom-event": "~1.0.1",
     "date-fns": "~3.6.0",
-    "debug": "~4.3.5",
+    "debug": "~4.3.6",
     "events": "~3.3.0",
     "filesize": "~10.1.4",
     "final-form": "~4.20.10",
@@ -55,12 +55,12 @@
     "whatwg-fetch": "~3.6.20"
   },
   "devDependencies": {
-    "@babel/core": "~7.24.8",
-    "@babel/eslint-parser": "~7.24.8",
+    "@babel/core": "~7.24.9",
+    "@babel/eslint-parser": "~7.25.1",
     "@babel/preset-react": "~7.24.7",
     "@gfx/zopfli": "~1.0.15",
-    "@testing-library/dom": "~10.3.1",
-    "@testing-library/jest-dom": "~6.4.6",
+    "@testing-library/dom": "~10.4.0",
+    "@testing-library/jest-dom": "~6.4.8",
     "@testing-library/react": "~16.0.0",
     "@testing-library/react-hooks": "~8.0.1",
     "@testing-library/user-event": "~14.5.2",
@@ -73,14 +73,14 @@
     "eslint-plugin-babel": "~5.3.1",
     "eslint-plugin-import": "~2.29.1",
     "eslint-plugin-lodash": "~8.0.0",
-    "eslint-plugin-prettier": "~5.1.3",
+    "eslint-plugin-prettier": "~5.2.1",
     "eslint-plugin-promise": "~6.4.0",
-    "eslint-plugin-react": "~7.34.4",
+    "eslint-plugin-react": "~7.35.0",
     "eslint-plugin-react-hooks": "~4.6.2",
     "eslint-plugin-unicorn": "~54.0.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "~6.14.0",
     "husky": "~8.0.3",
-    "jsdom": "~24.1.0",
+    "jsdom": "~24.1.1",
     "lint-staged": "~15.2.7",
     "node-html-parser": "~6.1.13",
     "npm-run-all": "~4.1.5",
@@ -93,17 +93,17 @@
     "stylelint": "~16.7.0",
     "stylelint-config-prettier": "~9.0.5",
     "stylelint-config-standard-scss": "~13.1.0",
-    "stylelint-prettier": "~5.0.1",
+    "stylelint-prettier": "~5.0.2",
     "stylelint-scss": "~6.4.1",
-    "terser": "~5.31.2",
+    "terser": "~5.31.3",
     "unexpected": "~13.2.1",
     "unexpected-react": "~6.0.2",
     "unexpected-sinon": "~11.1.0",
-    "url": "~0.11.3",
-    "vite": "~5.3.3",
+    "url": "~0.11.4",
+    "vite": "~5.3.5",
     "vite-plugin-compression": "~0.5.1",
-    "vite-plugin-generate-file": "~0.1.1",
-    "vitest": "~2.0.2"
+    "vite-plugin-generate-file": "~0.2.0",
+    "vitest": "~2.0.4"
   },
   "scripts": {
     "start": "vite",

src/components/autocomplete/autocomplete.jsx

@@ -12,6 +12,9 @@ const defaultAnchor = /(^|[^a-z\d])@/gi;
 export function Autocomplete({ inputRef, context, anchor = defaultAnchor }) {
   const [query, setQuery] = useState(/** @type {string|null}*/ null);
 
+  // Special case for the "@username" in the search bar
+  const [atStart, setAtStart] = useState(false);
+
   const events = useMemo(() => new EventEmitter(), []);
 
   const keyHandler = useEvent((/** @type {KeyboardEvent}*/ e) => {
@@ -39,6 +42,7 @@ export function Autocomplete({ inputRef, context, anchor = defaultAnchor }) {
       }
       const matchPos = getQueryPosition(input, anchor);
       setQuery(matchPos ? input.value.slice(matchPos[0], matchPos[1]) : null);
+      setAtStart(context === 'search' && matchPos?.[0] === 1 && input.value.charAt(0) === '@');
     };
 
     // Clears the query after 100ms of no focus. This delay allows to click on
@@ -63,14 +67,20 @@ export function Autocomplete({ inputRef, context, anchor = defaultAnchor }) {
       document.removeEventListener('selectionchange', inputHandler);
       input.removeEventListener('keydown', keyHandler, { capture: true });
     };
-  }, [anchor, inputRef, keyHandler]);
+  }, [anchor, context, inputRef, keyHandler]);
 
   const onSelectHandler = useEvent((text) => replaceQuery(inputRef.current, text, anchor));
 
   if (query) {
     return (
       <div className={style.wrapper}>
-        <Selector query={query} events={events} onSelect={onSelectHandler} context={context} />
+        <Selector
+          query={query}
+          events={events}
+          onSelect={onSelectHandler}
+          context={context}
+          localLinks={atStart}
+        />
       </div>
     );
   }

src/components/autocomplete/autocomplete.module.scss

@@ -65,8 +65,30 @@
   flex: none;
 }
 
+.itemText {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.itemLink {
+  flex: none;
+  color: currentColor;
+  opacity: 0.5;
+  font-size: 0.8em;
+  width: 1.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.itemLinkIconLocal {
+  transform: rotate(45deg);
+}
+
 .screenName {
-  margin-left: 1em;
+  margin-left: 0.5em;
   color: #999;
 }
 

src/components/autocomplete/selector.jsx

@@ -1,8 +1,9 @@
 import { useDispatch, useSelector, useStore } from 'react-redux';
+import { Link } from 'react-router';
 import cn from 'classnames';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useEvent } from 'react-use-event-hook';
-import { faUserFriends } from '@fortawesome/free-solid-svg-icons';
+import { faExternalLinkAlt, faUserFriends } from '@fortawesome/free-solid-svg-icons';
 import { Finder } from '../../utils/sparse-match';
 import { UserPicture } from '../user-picture';
 import { Icon } from '../fontawesome-icons';
@@ -20,7 +21,7 @@ import {
   getRankedNames,
 } from './ranked-names';
 
-export function Selector({ query, events, onSelect, context }) {
+export function Selector({ query, events, onSelect, context, localLinks = false }) {
   const dispatch = useDispatch();
   const [usernames, accountsMap, compare] = useAccountsMap({ context });
 
@@ -77,6 +78,7 @@ export function Selector({ query, events, onSelect, context }) {
             account={accountsMap.get(match.text)}
             match={match}
             isCurrent={idx === cursor}
+            localLink={localLinks}
             onClick={onSelect}
           />
         ))}
@@ -85,8 +87,9 @@ export function Selector({ query, events, onSelect, context }) {
   );
 }
 
-function Item({ account, match, isCurrent, onClick }) {
+function Item({ account, match, isCurrent, onClick, localLink }) {
   const clk = useEvent(() => onClick(match.text));
+  const linkClk = useEvent((e) => e.stopPropagation());
 
   return (
     <li className={cn(style.item, isCurrent && style.itemCurrent)} onClick={clk}>
@@ -100,6 +103,23 @@ function Item({ account, match, isCurrent, onClick }) {
           <span className={style.screenName}>{account.screenName}</span>
         )}
       </span>
+      {localLink ? (
+        <Link to={`/${account.username}`} className={style.itemLink} onClick={linkClk}>
+          <Icon
+            className={cn(style.itemLinkIcon, style.itemLinkIconLocal)}
+            icon={faExternalLinkAlt}
+          />
+        </Link>
+      ) : (
+        <a
+          href={`/${account.username}`}
+          target="_blank"
+          className={style.itemLink}
+          onClick={linkClk}
+        >
+          <Icon className={style.itemLinkIcon} icon={faExternalLinkAlt} />
+        </a>
+      )}
     </li>
   );
 }

src/components/drafts-page.jsx

@@ -4,7 +4,6 @@ import { faComment, faEdit } from '@fortawesome/free-regular-svg-icons';
 import { useSelector } from 'react-redux';
 import { deleteDraft, getAllDrafts, subscribeToDraftChanges } from '../services/drafts';
 import { pluralForm } from '../utils';
-import { postReadmoreConfig } from '../utils/readmore-config';
 import { READMORE_STYLE_COMPACT } from '../utils/frontend-preferences-options';
 import ErrorBoundary from './error-boundary';
 import TimeDisplay from './time-display';
@@ -13,7 +12,7 @@ import { Icon } from './fontawesome-icons';
 import { useBool } from './hooks/bool';
 import { UserPicture } from './user-picture';
 import { faCommentPlus } from './fontawesome-custom-icons';
-import Expandable from './expandable';
+import { Expandable } from './expandable';
 
 export default function DraftsPage() {
   const allDrafts = useSyncExternalStore(subscribeToDraftChanges, getAllDrafts);
@@ -118,10 +117,7 @@ function DraftEntry({ draftKey, data }) {
       </div>
       <div className="single-event__content">
         {data.text ? (
-          <Expandable
-            expanded={readMoreStyle === READMORE_STYLE_COMPACT}
-            config={postReadmoreConfig}
-          >
+          <Expandable expanded={readMoreStyle === READMORE_STYLE_COMPACT}>
             <PieceOfText text={data.text} readMoreStyle={readMoreStyle} />
           </Expandable>
         ) : (