YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-19 12:50:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: use markdown image syntax (#83)

Browse Source
This commit is contained in:
Steven 2022-06-21 22:14:52 +08:00 committed by GitHub
parent 9f81362027
commit f80f0f2422
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/DailyMemo.tsx
View File

@ -20,7 +20,7 @@ const DailyMemo: React.FC<Props> = (props: Props) => {
createdAtStr: utils.getDateTimeString(propsMemo.createdTs), createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
timeStr: utils.getTimeString(propsMemo.createdTs), timeStr: utils.getTimeString(propsMemo.createdTs),
}; };
const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []); const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
return ( return (
<div className="daily-memo-wrapper"> <div className="daily-memo-wrapper">

2
web/src/components/DeletedMemo.tsx
View File

@ -21,7 +21,7 @@ const DeletedMemo: React.FC<Props> = (props: Props) => {
deletedAtStr: utils.getDateTimeString(propsMemo.updatedTs ?? Date.now()), deletedAtStr: utils.getDateTimeString(propsMemo.updatedTs ?? Date.now()),
}; };
const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false); const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []); const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
const handleDeleteMemoClick = async () => { const handleDeleteMemoClick = async () => {
if (showConfirmDeleteBtn) { if (showConfirmDeleteBtn) {

2
web/src/components/Memo.tsx
View File

@ -23,7 +23,7 @@ const Memo: React.FC<Props> = (props: Props) => {
createdAtStr: utils.getDateTimeString(propsMemo.createdTs), createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
}; };
const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false); const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []); const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
const handleShowMemoStoryDialog = () => { const handleShowMemoStoryDialog = () => {
showMemoCardDialog(memo); showMemoCardDialog(memo);

2
web/src/components/MemoCardDialog.tsx
View File

@ -26,7 +26,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
}); });
const [linkMemos, setLinkMemos] = useState<LinkedMemo[]>([]); const [linkMemos, setLinkMemos] = useState<LinkedMemo[]>([]);
const [linkedMemos, setLinkedMemos] = useState<LinkedMemo[]>([]); const [linkedMemos, setLinkedMemos] = useState<LinkedMemo[]>([]);
const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []); const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
useEffect(() => { useEffect(() => {
const fetchLinkedMemos = async () => { const fetchLinkedMemos = async () => {

6
web/src/components/MemoEditor.tsx
View File

@ -80,7 +80,7 @@ const MemoEditor: React.FC<Props> = () => {
const file = event.clipboardData.files[0]; const file = event.clipboardData.files[0];
const url = await handleUploadFile(file); const url = await handleUploadFile(file);
if (url) { if (url) {
editorRef.current?.insertText(url + " "); editorRef.current?.insertText(`![](${url})`);
} }
} }
}; };
@ -91,7 +91,7 @@ const MemoEditor: React.FC<Props> = () => {
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];
const url = await handleUploadFile(file); const url = await handleUploadFile(file);
if (url) { if (url) {
editorRef.current?.insertText(url); editorRef.current?.insertText(`![](${url})`);
} }
} }
}; };
@ -246,7 +246,7 @@ const MemoEditor: React.FC<Props> = () => {
const file = inputEl.files[0]; const file = inputEl.files[0];
const url = await handleUploadFile(file); const url = await handleUploadFile(file);
if (url) { if (url) {
editorRef.current?.insertText(url); editorRef.current?.insertText(`![](${url})`);
} }
}; };
inputEl.click(); inputEl.click();

8
web/src/components/ShareMemoImageDialog.tsx
View File

@ -20,10 +20,10 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
...propsMemo, ...propsMemo,
createdAtStr: utils.getDateTimeString(propsMemo.createdTs), createdAtStr: utils.getDateTimeString(propsMemo.createdTs),
}; };
const memoImgUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []); const imageUrls = Array.from(memo.content.match(IMAGE_URL_REG) ?? []).map((s) => s.replace(IMAGE_URL_REG, "$1"));
const [shortcutImgUrl, setShortcutImgUrl] = useState(""); const [shortcutImgUrl, setShortcutImgUrl] = useState("");
const [imgAmount, setImgAmount] = useState(memoImgUrls.length); const [imgAmount, setImgAmount] = useState(imageUrls.length);
const memoElRef = useRef<HTMLDivElement>(null); const memoElRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -81,9 +81,9 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
</Only> </Only>
<span className="time-text">{memo.createdAtStr}</span> <span className="time-text">{memo.createdAtStr}</span>
<div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div> <div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>
<Only when={memoImgUrls.length > 0}> <Only when={imageUrls.length > 0}>
<div className="images-container"> <div className="images-container">
{memoImgUrls.map((imgUrl, idx) => ( {imageUrls.map((imgUrl, idx) => (
<img <img
crossOrigin="anonymous" crossOrigin="anonymous"
decoding="async" decoding="async"

2
web/src/helpers/consts.ts
View File

@ -17,7 +17,7 @@ export const TAG_REG = /#(.+?) /g;
export const LINK_REG = /(https?:\/\/[^\s<\\*>']+)/g; export const LINK_REG = /(https?:\/\/[^\s<\\*>']+)/g;
// image regex // image regex
export const IMAGE_URL_REG = /([^\s<\\*>']+\.(jpeg|jpg|gif|png|svg|webp))/g; export const IMAGE_URL_REG = /!\[.*?\]\((.+?)\)/g;
// linked memo regex // linked memo regex
export const MEMO_LINK_REG = /\[@(.+?)\]\((.+?)\)/g; export const MEMO_LINK_REG = /\[@(.+?)\]\((.+?)\)/g;

2
web/src/less/daily-memo-diary-dialog.less
View File

@ -20,7 +20,7 @@
} }
&.share-btn { &.share-btn {
@apply w-5 h-auto; @apply ~"p-0.5";
} }
} }
} }

2
web/src/less/memo-content.less
View File

@ -5,7 +5,7 @@
@apply w-full whitespace-pre-wrap break-words; @apply w-full whitespace-pre-wrap break-words;
> p { > p {
@apply inline-block w-full h-auto mb-1 text-base leading-7 whitespace-pre-wrap break-words; @apply inline-block w-full h-auto mb-1 last:mb-0 text-base leading-7 whitespace-pre-wrap break-words;
} }
.tag-span { .tag-span {

4
web/src/less/memo.less
View File

@ -2,7 +2,7 @@
@import "./memo-content.less"; @import "./memo-content.less";
.memo-wrapper { .memo-wrapper {
@apply flex flex-col justify-start items-start w-full max-w-full p-3 px-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200; @apply flex flex-col justify-start items-start w-full max-w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
&.deleted-memo { &.deleted-memo {
@apply border-gray-200; @apply border-gray-200;
@ -13,7 +13,7 @@
} }
> .memo-top-wrapper { > .memo-top-wrapper {
@apply flex flex-row justify-between items-center w-full h-6 mb-2; @apply flex flex-row justify-between items-center w-full h-6 mb-1;
> .time-text { > .time-text {
@apply text-xs text-gray-400 cursor-pointer; @apply text-xs text-gray-400 cursor-pointer;