Add previewMode

This commit is contained in:
Lim Chee Aun 2023-03-16 13:02:46 +08:00
parent e0688afdfc
commit bc4dfaf62f
3 changed files with 24 additions and 19 deletions

View file

@ -633,7 +633,7 @@ function Compose({
</div> </div>
{!!replyToStatus && ( {!!replyToStatus && (
<div class="status-preview"> <div class="status-preview">
<Status status={replyToStatus} size="s" /> <Status status={replyToStatus} size="s" previewMode />
<div class="status-preview-legend reply-to"> <div class="status-preview-legend reply-to">
Replying to @ Replying to @
{replyToStatus.account.acct || replyToStatus.account.username} {replyToStatus.account.acct || replyToStatus.account.username}
@ -643,7 +643,7 @@ function Compose({
)} )}
{!!editStatus && ( {!!editStatus && (
<div class="status-preview"> <div class="status-preview">
<Status status={editStatus} size="s" /> <Status status={editStatus} size="s" previewMode />
<div class="status-preview-legend">Editing source status</div> <div class="status-preview-legend">Editing source status</div>
</div> </div>
)} )}

View file

@ -70,6 +70,7 @@ function Status({
readOnly, readOnly,
contentTextWeight, contentTextWeight,
enableTranslate, enableTranslate,
previewMode,
}) { }) {
if (skeleton) { if (skeleton) {
return ( return (
@ -578,6 +579,7 @@ function Status({
onContextMenu={(e) => { onContextMenu={(e) => {
if (size === 'l') return; if (size === 'l') return;
if (e.metaKey) return; if (e.metaKey) return;
if (previewMode) return;
// console.log('context menu', e); // console.log('context menu', e);
const link = e.target.closest('a'); const link = e.target.closest('a');
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return; if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
@ -662,7 +664,7 @@ function Status({
)} */} )} */}
{/* </span> */}{' '} {/* </span> */}{' '}
{size !== 'l' && {size !== 'l' &&
(url ? ( (url && !previewMode ? (
<Menu <Menu
instanceRef={menuInstanceRef} instanceRef={menuInstanceRef}
portal={{ portal={{
@ -788,7 +790,7 @@ function Status({
lang={language} lang={language}
ref={contentRef} ref={contentRef}
data-read-more={readMoreText} data-read-more={readMoreText}
onClick={handleContentLinks({ mentions, instance })} onClick={handleContentLinks({ mentions, instance, previewMode })}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: enhanceContent(content, { __html: enhanceContent(content, {
emojis, emojis,
@ -801,6 +803,7 @@ function Status({
a.removeAttribute('target'); a.removeAttribute('target');
} }
}); });
if (previewMode) return;
// Unfurl Mastodon links // Unfurl Mastodon links
dom dom
.querySelectorAll( .querySelectorAll(

View file

@ -1,7 +1,7 @@
import states from './states'; import states from './states';
function handleContentLinks(opts) { function handleContentLinks(opts) {
const { mentions = [], instance } = opts || {}; const { mentions = [], instance, previewMode } = opts || {};
return (e) => { return (e) => {
let { target } = e; let { target } = e;
target = target.closest('a'); target = target.closest('a');
@ -35,7 +35,8 @@ function handleContentLinks(opts) {
instance, instance,
}; };
} }
} else if (target.classList.contains('hashtag')) { } else if (!previewMode) {
if (target.classList.contains('hashtag')) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const tag = target.innerText.replace(/^#/, '').trim(); const tag = target.innerText.replace(/^#/, '').trim();
@ -50,6 +51,7 @@ function handleContentLinks(opts) {
}; };
location.hash = `#${states.unfurledLinks[target.href].url}`; location.hash = `#${states.unfurledLinks[target.href].url}`;
} }
}
}; };
} }