YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-15 02:40:53 +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),
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 (
<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()),
};
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 () => {
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),
};
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 = () => {
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 [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(() => {
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 url = await handleUploadFile(file);
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 url = await handleUploadFile(file);
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 url = await handleUploadFile(file);
if (url) {
editorRef.current?.insertText(url);
editorRef.current?.insertText(`![](${url})`);
}
};
inputEl.click();

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

@ -20,10 +20,10 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
...propsMemo,
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 [imgAmount, setImgAmount] = useState(memoImgUrls.length);
const [imgAmount, setImgAmount] = useState(imageUrls.length);
const memoElRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -81,9 +81,9 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
</Only>
<span className="time-text">{memo.createdAtStr}</span>
<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">
{memoImgUrls.map((imgUrl, idx) => (
{imageUrls.map((imgUrl, idx) => (
<img
crossOrigin="anonymous"
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;
// image regex
export const IMAGE_URL_REG = /([^\s<\\*>']+\.(jpeg|jpg|gif|png|svg|webp))/g;
export const IMAGE_URL_REG = /!\[.*?\]\((.+?)\)/g;
// linked memo regex
export const MEMO_LINK_REG = /\[@(.+?)\]\((.+?)\)/g;

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

@ -20,7 +20,7 @@
}
&.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;
> 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 {

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

@ -2,7 +2,7 @@
@import "./memo-content.less";
.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 {
@apply border-gray-200;
@ -13,7 +13,7 @@
}
> .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 {
@apply text-xs text-gray-400 cursor-pointer;