+
+ )
+ }
+)
+
+QuoteCard.displayName = 'QuoteCard'
diff --git a/src/components/QuoteImageDialog/Content.tsx b/src/components/QuoteImageDialog/Content.tsx
new file mode 100644
index 0000000000..d8609f55e6
--- /dev/null
+++ b/src/components/QuoteImageDialog/Content.tsx
@@ -0,0 +1,252 @@
+import { toJpeg } from 'html-to-image'
+import QRCode from 'qrcode'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl'
+
+import { analytics, isMobile } from '~/common/utils'
+import { Dialog } from '~/components'
+
+import { QuoteCard } from './Card'
+import { clampQuote, MAX_QUOTE_LEN, QUOTE_SIZES, QUOTE_STYLES } from './presets'
+import styles from './styles.module.css'
+
+const PREVIEW_WIDTH = 320 // 預覽寬度（卡片以此等比縮放顯示）
+
+const styleNames = defineMessages({
+ warm: { defaultMessage: 'Cream', id: 'lY48xg' },
+ sky: { defaultMessage: 'Sky', id: '/uJdnC' },
+ coral: { defaultMessage: 'Coral', id: 'bGxO22' },
+ ink: { defaultMessage: 'Ink', id: 'QWkEED' },
+ pine: { defaultMessage: 'Pine', id: 'K3+ihp' },
+ mint: { defaultMessage: 'Mint', id: 'OwO+Nr' },
+ violet: { defaultMessage: 'Violet', id: '3cxMQp' },
+ slate: { defaultMessage: 'Slate', id: 'iLKG5w' },
+})
+const sizeNames = defineMessages({
+ square: { defaultMessage: 'Square 1:1', id: 'iII6Ry' },
+ portrait: { defaultMessage: 'Portrait 4:5', id: 'em7860' },
+ story: { defaultMessage: 'Story 9:16', id: 'CZciVV' },
+})
+const sizeNotes = defineMessages({
+ square: { defaultMessage: 'IG / FB post', id: 'A6dqhl' },
+ portrait: { defaultMessage: 'IG post · most eye-catching', id: 'Oawtbo' },
+ story: { defaultMessage: 'IG / FB story · Threads', id: '6RAJ7U' },
+})
+
+export type QuoteImageDialogContentProps = {
+ closeDialog: () => void
+ quote: string
+ author: string
+ title: string
+ /** 文章連結，用於產生 QR Code */
+ shareLink: string
+ isSevenDayBook: boolean
+}
+
+const QuoteImageDialogContent: React.FC
+
+
+
+ “
+
+
+ {text}
+
+
+ —
+ {author}
+
+
+
+
+
+
+ 原文
+ {title}
+
+ {isSevenDayBook ? (
+
+
+ ) : (
+
+ Matters · matters.town
+
+ )}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+
+
+
+ {QUOTE_STYLES.map((s) => (
+
+ ))}
+
+
+ {QUOTE_SIZES.map((s) => (
+
+ ))}
+
+
+ {selection && (
+
+ )
+ }
+
return (
+
+
+ {canQuoteImage && (
+ <>
+
+ {quoteImageDialog(
+ <>
+
+ )}
+
{selection && position && (
@@ -186,10 +305,16 @@ export const TextSelectionPopover = ({
- {/*
- */}
+
+ {canQuoteImage && (
+ <>
+
+ {quoteImageDialog(
+
)}
diff --git a/src/components/TextSelectionPopover/styles.module.css b/src/components/TextSelectionPopover/styles.module.css
index fe75f1fc50..f2484360d0 100644
--- a/src/components/TextSelectionPopover/styles.module.css
+++ b/src/components/TextSelectionPopover/styles.module.css
@@ -60,3 +60,42 @@
}
}
}
+
+/* mobile: fixed action bar at the bottom of the screen, so it never fights
+ with the iOS/Android native selection menu near the selected text */
+.bottomBar {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 100;
+ display: flex;
+ align-items: stretch;
+ justify-content: space-around;
+ padding-bottom: env(safe-area-inset-bottom);
+ background: var(--color-black);
+
+ & .divider {
+ width: 1px;
+ margin: var(--sp12) 0;
+ background-color: var(--color-grey-darker);
+ }
+
+ & .barButton {
+ @mixin transition;
+
+ display: flex;
+ flex: 1;
+ gap: var(--sp8);
+ align-items: center;
+ justify-content: center;
+ padding: var(--sp12) var(--sp16);
+ font-size: var(--text14);
+ color: var(--color-white);
+ transition-property: opacity;
+
+ &:active {
+ opacity: 0.6;
+ }
+ }
+}
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 4297e37892..063ca4de65 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -76,6 +76,7 @@ export * from './Interaction'
export * from './Layout'
export * from './Notice'
export * from './Protected'
+export * from './QuoteImageDialog'
export * from './ReCaptcha'
export * from './Search'
export * from './TagDigest'
diff --git a/src/views/ArticleDetail/Content/index.tsx b/src/views/ArticleDetail/Content/index.tsx
index adc6172781..67c86f1a6d 100644
--- a/src/views/ArticleDetail/Content/index.tsx
+++ b/src/views/ArticleDetail/Content/index.tsx
@@ -13,7 +13,7 @@ import {
ViewerContext,
} from '~/components'
import { useReadTimer } from '~/components/Hook'
-import { ReadArticleMutation } from '~/gql/graphql'
+import { QuoteImageArticleFragment, ReadArticleMutation } from '~/gql/graphql'
import styles from './styles.module.css'
@@ -27,10 +27,12 @@ const READ_ARTICLE = gql`
const Content = ({
articleId,
+ article,
content,
indentFirstLine,
}: {
articleId: string
+ article?: QuoteImageArticleFragment | null
content: string
indentFirstLine: boolean
}) => {
@@ -151,6 +153,20 @@ const Content = ({
contentContainer.current && (