Merge pull request #327 from cheeaun/main · alice.mosphere.at/phanpy@0f53766

+1 -1

src/app.css

··· 1577 1577 position: fixed !important; 1578 1578 z-index: 10; 1579 1579 } 1580 - .szh-menu-container:has(.szh-menu--state-open) { 1580 + .szh-menu-container:not(:empty) { 1581 1581 inset: 0; 1582 1582 inset: env(safe-area-inset-top) env(safe-area-inset-right) 1583 1583 env(safe-area-inset-bottom) env(safe-area-inset-left);

+3 -10

src/components/account-info.jsx

··· 29 29 import Link from './link'; 30 30 import ListAddEdit from './list-add-edit'; 31 31 import Loader from './loader'; 32 + import Menu2 from './menu2'; 32 33 import MenuConfirm from './menu-confirm'; 33 34 import Modal from './modal'; 34 35 import TranslationBlock from './translation-block'; ··· 906 907 }, [info, isSelf]); 907 908 908 909 const loading = relationshipUIState === 'loading'; 909 - const menuInstanceRef = useRef(null); 910 910 911 911 const [showTranslatedBio, setShowTranslatedBio] = useState(false); 912 912 const [showAddRemoveLists, setShowAddRemoveLists] = useState(false); ··· 947 947 <span>{privateNote}</span> 948 948 </button> 949 949 )} 950 - <Menu 951 - instanceRef={menuInstanceRef} 950 + <Menu2 952 951 portal={{ 953 952 target: document.body, 954 953 }} ··· 957 956 // Higher than the backdrop 958 957 zIndex: 1001, 959 958 }, 960 - onClick: (e) => { 961 - if (e.target === e.currentTarget) { 962 - menuInstanceRef.current?.closeMenu?.(); 963 - } 964 - }, 965 959 }} 966 960 align="center" 967 961 position="anchor" 968 962 overflow="auto" 969 - boundingBoxPadding="8 8 8 8" 970 963 menuButton={ 971 964 <button 972 965 type="button" ··· 1215 1208 </MenuItem> */} 1216 1209 </> 1217 1210 )} 1218 - </Menu> 1211 + </Menu2> 1219 1212 {!relationship && relationshipUIState === 'loading' && ( 1220 1213 <Loader abrupt /> 1221 1214 )}

+10 -8

src/components/compose.jsx

··· 107 107 // https://github.com/mastodon/mastodon/blob/c03bd2a238741a012aa4b98dc4902d6cf948ab63/app/models/account.rb#L69 108 108 const USERNAME_RE = /[a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?/i; 109 109 const MENTION_RE = new RegExp( 110 - `(?<![=\\/\\w])@((${USERNAME_RE.source})(?:@[\\w.-]+[\\w]+)?)`, 110 + `(^|[^=\\/\\w])(@${USERNAME_RE.source}(?:@[\\w.-]+[\\w]+)?)`, 111 111 'ig', 112 112 ); 113 113 114 114 // AI-generated, all other regexes are too complicated 115 115 const HASHTAG_RE = new RegExp( 116 - `(?<![=\\/\\w])#([a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?)(?![\\/\\w])`, 116 + `(^|[^=\\/\\w])(#[a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?)(?![\\/\\w])`, 117 117 'ig', 118 118 ); 119 119 120 120 // https://github.com/mastodon/mastodon/blob/23e32a4b3031d1da8b911e0145d61b4dd47c4f96/app/models/custom_emoji.rb#L31 121 121 const SHORTCODE_RE_FRAGMENT = '[a-zA-Z0-9_]{2,}'; 122 122 const SCAN_RE = new RegExp( 123 - `(?<=[^A-Za-z0-9_:\\n]|^):(${SHORTCODE_RE_FRAGMENT}):(?=[^A-Za-z0-9_:]|$)`, 123 + `([^A-Za-z0-9_:\\n]|^)(:${SHORTCODE_RE_FRAGMENT}:)(?=[^A-Za-z0-9_:]|$)`, 124 124 'g', 125 125 ); 126 126 ··· 142 142 143 143 html = html 144 144 .replace(urlRegexObj, '$2<mark class="compose-highlight-url">$3</mark>') // URLs 145 - .replace(MENTION_RE, '<mark class="compose-highlight-mention">$&</mark>') // Mentions 146 - .replace(HASHTAG_RE, '<mark class="compose-highlight-hashtag">#$1</mark>') // Hashtags 145 + .replace(MENTION_RE, '$1<mark class="compose-highlight-mention">$2</mark>') // Mentions 146 + .replace(HASHTAG_RE, '$1<mark class="compose-highlight-hashtag">$2</mark>') // Hashtags 147 147 .replace( 148 148 SCAN_RE, 149 - '<mark class="compose-highlight-emoji-shortcode">$&</mark>', 149 + '$1<mark class="compose-highlight-emoji-shortcode">$2</mark>', 150 150 ); // Emoji shortcodes 151 151 152 152 return html + leftoverHTML; ··· 1474 1474 if (!textarea) return; 1475 1475 const resizeObserver = new ResizeObserver(() => { 1476 1476 // Get height of textarea, set height to textExpander 1477 - const { height } = textarea.getBoundingClientRect(); 1478 - textExpanderRef.current.style.height = height + 'px'; 1477 + if (textExpanderRef.current) { 1478 + const { height } = textarea.getBoundingClientRect(); 1479 + textExpanderRef.current.style.height = height + 'px'; 1480 + } 1479 1481 }); 1480 1482 resizeObserver.observe(textarea); 1481 1483 }, []);

+3 -2

src/components/media-alt-modal.jsx

·········

+3 -3

src/components/media-modal.jsx

·········

+4 -2

src/components/menu2.jsx

··· 6 6 7 7 // It's like Menu but with sensible defaults, bug fixes and improvements. 8 8 function Menu2(props) { 9 - const { containerProps } = props; 9 + const { containerProps, instanceRef: _instanceRef } = props; 10 10 const size = useWindowSize(); 11 - const instanceRef = useRef(); 11 + const instanceRef = _instanceRef?.current ? _instanceRef : useRef(); 12 + 12 13 return ( 13 14 <Menu 14 15 boundingBoxPadding={safeBoundingBoxPadding()} 15 16 repositionFlag={`${size.width}x${size.height}`} 17 + unmountOnClose 16 18 {...props} 17 19 instanceRef={instanceRef} 18 20 containerProps={{

+3 -3

src/components/shortcuts.jsx

··· 14 14 import AsyncText from './AsyncText'; 15 15 import Icon from './icon'; 16 16 import Link from './link'; 17 + import Menu2 from './menu2'; 17 18 import MenuLink from './menu-link'; 18 19 19 20 function Shortcuts() { ··· 139 140 </ul> 140 141 </nav> 141 142 ) : ( 142 - <Menu 143 + <Menu2 143 144 instanceRef={menuRef} 144 145 overflow="auto" 145 146 viewScroll="close" 146 - boundingBoxPadding="8 8 8 8" 147 147 menuClassName="glass-menu shortcuts-menu" 148 148 gap={8} 149 149 position="anchor" ··· 195 195 </MenuLink> 196 196 ); 197 197 })} 198 - </Menu> 198 + </Menu2> 199 199 )} 200 200 </div> 201 201 );

+3 -3

src/components/status.jsx

··· 28 28 import AccountBlock from '../components/account-block'; 29 29 import EmojiText from '../components/emoji-text'; 30 30 import Loader from '../components/loader'; 31 + import Menu2 from '../components/menu2'; 31 32 import MenuConfirm from '../components/menu-confirm'; 32 33 import Modal from '../components/modal'; 33 34 import NameText from '../components/name-text'; ··· 1629 1630 onClick={bookmarkStatus} 1630 1631 /> 1631 1632 </div> 1632 - <Menu 1633 + <Menu2 1633 1634 portal={{ 1634 1635 target: 1635 1636 document.querySelector('.status-deck') || document.body, ··· 1638 1639 gap={4} 1639 1640 overflow="auto" 1640 1641 viewScroll="close" 1641 - boundingBoxPadding="8 8 8 8" 1642 1642 menuButton={ 1643 1643 <div class="action"> 1644 1644 <button ··· 1652 1652 } 1653 1653 > 1654 1654 {StatusMenuItems} 1655 - </Menu> 1655 + </Menu2> 1656 1656 </div> 1657 1657 </> 1658 1658 )}

+3 -2

src/pages/accounts.jsx

··· 7 7 import Avatar from '../components/avatar'; 8 8 import Icon from '../components/icon'; 9 9 import Link from '../components/link'; 10 + import Menu2 from '../components/menu2'; 10 11 import MenuConfirm from '../components/menu-confirm'; 11 12 import NameText from '../components/name-text'; 12 13 import { api } from '../utils/api'; ··· 92 93 <span class="tag">Default</span>{' '} 93 94 </> 94 95 )} 95 - <Menu 96 + <Menu2 96 97 align="end" 97 98 menuButton={ 98 99 <button ··· 150 151 <Icon icon="exit" /> 151 152 <span>Log out…</span> 152 153 </MenuConfirm> 153 - </Menu> 154 + </Menu2> 154 155 </div> 155 156 </li> 156 157 );

+3 -2

src/pages/status.jsx

··· 23 23 import Link from '../components/link'; 24 24 import Loader from '../components/loader'; 25 25 import MediaModal from '../components/media-modal'; 26 + import Menu2 from '../components/menu2'; 26 27 import NameText from '../components/name-text'; 27 28 import RelativeTime from '../components/relative-time'; 28 29 import Status from '../components/status'; ··· 1034 1035 > 1035 1036 <Icon icon="layout4" size="l" /> 1036 1037 </button> 1037 - <Menu 1038 + <Menu2 1038 1039 align="end" 1039 1040 portal={{ 1040 1041 // Need this, else the menu click will cause scroll jump ··· 1114 1115 Switch to post's instance (<b>{postInstance}</b>) 1115 1116 </small> 1116 1117 </MenuItem> 1117 - </Menu> 1118 + </Menu2> 1118 1119 <Link class="button plain deck-close" to={closeLink}> 1119 1120 <Icon icon="x" size="xl" /> 1120 1121 </Link>

Configure Feed

Configure Feed