diff --git a/web/src/components/DailyMemo.tsx b/web/src/components/DailyMemo.tsx index 576ea2497..67b3f6654 100644 --- a/web/src/components/DailyMemo.tsx +++ b/web/src/components/DailyMemo.tsx @@ -21,7 +21,6 @@ const DailyMemo: React.FC = (props: Props) => { }; const displayConfig: DisplayConfig = { enableExpand: false, - showInlineImage: true, }; return ( diff --git a/web/src/components/MemoContent.tsx b/web/src/components/MemoContent.tsx index af3065c2e..fca61234e 100644 --- a/web/src/components/MemoContent.tsx +++ b/web/src/components/MemoContent.tsx @@ -3,14 +3,8 @@ import { formatMemoContent } from "../helpers/marked"; import Icon from "./Icon"; import "../less/memo-content.less"; -const defaultDisplayConfig: DisplayConfig = { - enableExpand: true, - showInlineImage: false, -}; - export interface DisplayConfig { enableExpand: boolean; - showInlineImage: boolean; } interface Props { @@ -27,6 +21,10 @@ interface State { expandButtonStatus: ExpandButtonStatus; } +const defaultDisplayConfig: DisplayConfig = { + enableExpand: true, +}; + const MAX_MEMO_CONTAINER_HEIGHT = 384; const MemoContent: React.FC = (props: Props) => { @@ -39,9 +37,6 @@ const MemoContent: React.FC = (props: Props) => { ...defaultDisplayConfig, ...props.displayConfig, }; - const formatConfig = { - inlineImage: displayConfig.showInlineImage, - }; useEffect(() => { if (!memoContentContainerRef) { @@ -84,7 +79,7 @@ const MemoContent: React.FC = (props: Props) => { className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`} onClick={handleMemoContentClick} onDoubleClick={handleMemoContentDoubleClick} - dangerouslySetInnerHTML={{ __html: formatMemoContent(content, formatConfig) }} + dangerouslySetInnerHTML={{ __html: formatMemoContent(content) }} > {state.expandButtonStatus !== -1 && (
diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx index 78520e1a5..d836b3e73 100644 --- a/web/src/components/ShareMemoImageDialog.tsx +++ b/web/src/components/ShareMemoImageDialog.tsx @@ -4,10 +4,8 @@ import { userService } from "../services"; import toImage from "../labs/html2image"; import { ANIMATION_DURATION } from "../helpers/consts"; import * as utils from "../helpers/utils"; -import { IMAGE_URL_REG } from "../helpers/marked"; import Icon from "./Icon"; import { generateDialog } from "./Dialog"; -import toastHelper from "./Toast"; import MemoContent from "./MemoContent"; import "../less/share-memo-image-dialog.less"; @@ -19,21 +17,14 @@ const ShareMemoImageDialog: React.FC = (props: Props) => { const { memo: propsMemo, destroy } = props; const { t } = useTranslation(); const { user: userinfo } = userService.getState(); + const [shortcutImgUrl, setShortcutImgUrl] = useState(""); const memo = { ...propsMemo, createdAtStr: utils.getDateTimeString(propsMemo.createdTs), }; - const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1")); - - const [shortcutImgUrl, setShortcutImgUrl] = useState(""); - const [imgAmount, setImgAmount] = useState(imageUrls.length); const memoElRef = useRef(null); useEffect(() => { - if (imgAmount > 0) { - return; - } - setTimeout(() => { if (!memoElRef.current) { return; @@ -46,24 +37,16 @@ const ShareMemoImageDialog: React.FC = (props: Props) => { .then((url) => { setShortcutImgUrl(url); }) - .catch(() => { - // do nth + .catch((err) => { + console.error(err); }); }, ANIMATION_DURATION); - }, [imgAmount]); + }, []); const handleCloseBtnClick = () => { destroy(); }; - const handleImageOnLoad = (event: React.SyntheticEvent) => { - if (event.type === "error") { - toastHelper.error(t("message.image-load-failed")); - (event.target as HTMLImageElement).remove(); - } - setImgAmount(imgAmount - 1); - }; - const handleDownloadBtnClick = () => { const a = document.createElement("a"); a.href = shortcutImgUrl; @@ -90,13 +73,6 @@ const ShareMemoImageDialog: React.FC = (props: Props) => { {shortcutImgUrl !== "" && } {memo.createdAtStr} - {imageUrls.length > 0 && ( -
- {imageUrls.map((imgUrl, idx) => ( - - ))} -
- )}
✍️ by {userinfo?.name} diff --git a/web/src/helpers/marked.ts b/web/src/helpers/marked.ts index 3c0c8a9a5..63bfed1c2 100644 --- a/web/src/helpers/marked.ts +++ b/web/src/helpers/marked.ts @@ -36,29 +36,12 @@ const parseHtmlToRawText = (htmlStr: string): string => { return text; }; -interface FormatterConfig { - inlineImage: boolean; -} -const defaultFormatterConfig: FormatterConfig = { - inlineImage: false, -}; - -const formatMemoContent = (content: string, additionConfig?: Partial) => { - const config = { - ...defaultFormatterConfig, - ...additionConfig, - }; +const formatMemoContent = (content: string) => { const tempElement = document.createElement("div"); tempElement.innerHTML = parseMarkedToHtml(escape(content)); - let outputString = tempElement.innerHTML; - if (config.inlineImage) { - outputString = outputString.replace(IMAGE_URL_REG, ""); - } else { - outputString = outputString.replace(IMAGE_URL_REG, ""); - } - - return outputString + return tempElement.innerHTML + .replace(IMAGE_URL_REG, "") .replace(MEMO_LINK_REG, "$1") .replace(LINK_URL_REG, "$1") .replace(TAG_REG, "#$1 "); diff --git a/web/src/less/memo.less b/web/src/less/memo.less index b10004636..ee1e3ab15 100644 --- a/web/src/less/memo.less +++ b/web/src/less/memo.less @@ -1,5 +1,4 @@ @import "./mixin.less"; -@import "./memo-content.less"; .memo-wrapper { @apply flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200; @@ -100,18 +99,15 @@ } } - > .memo-content-text { - @apply w-full h-auto transition-all; - - &.expanded { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 8; - overflow: hidden; - } + > .memo-content-wrapper { + > .memo-content-text { + .tag-span { + @apply cursor-pointer hover:opacity-80; + } - .tag-span { - @apply cursor-pointer hover:opacity-80; + .img { + @apply max-w-xs; + } } }