mirror of https://github.com/usememos/memos
feat: support embed memo with iframe (#912)
boojack
2 years ago
committed by
GitHub
parent
0f8ce3dd16
commit
96798e10b4
@ -0,0 +1,60 @@
|
||||
import React from "react";
|
||||
import Icon from "./Icon";
|
||||
import { generateDialog } from "./Dialog";
|
||||
import copy from "copy-to-clipboard";
|
||||
import toastHelper from "./Toast";
|
||||
|
||||
interface Props extends DialogProps {
|
||||
memoId: MemoId;
|
||||
}
|
||||
|
||||
const EmbedMemoDialog: React.FC<Props> = (props: Props) => {
|
||||
const { memoId, destroy } = props;
|
||||
|
||||
const memoEmbeddedCode = () => {
|
||||
return `<iframe style="width:100%;height:auto;min-width:256px;" src="${window.location.origin}/m/${memoId}/embed" frameBorder="0"></iframe>`;
|
||||
};
|
||||
|
||||
const handleCopyCode = () => {
|
||||
copy(memoEmbeddedCode());
|
||||
toastHelper.success("Succeed to copy code to clipboard.");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dialog-header-container">
|
||||
<p className="title-text">Embed Memo</p>
|
||||
<button className="btn close-btn" onClick={() => destroy()}>
|
||||
<Icon.X />
|
||||
</button>
|
||||
</div>
|
||||
<div className="dialog-content-container !w-80">
|
||||
<p className="text-base leading-6 mb-2">Copy and paste the below codes into your blog or website.</p>
|
||||
<pre className="w-full font-mono text-sm p-3 border rounded-lg">
|
||||
<code className="w-full break-all whitespace-pre-wrap">{memoEmbeddedCode()}</code>
|
||||
</pre>
|
||||
<p className="w-full text-sm leading-6 flex flex-row justify-between items-center mt-2">
|
||||
* Only the public memo supports.
|
||||
<span className="btn-primary" onClick={handleCopyCode}>
|
||||
Copy
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function showEmbedMemoDialog(memoId: MemoId) {
|
||||
generateDialog(
|
||||
{
|
||||
className: "embed-memo-dialog",
|
||||
dialogName: "embed-memo-dialog",
|
||||
},
|
||||
EmbedMemoDialog,
|
||||
{
|
||||
memoId,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export default showEmbedMemoDialog;
|
||||
@ -1,7 +1,11 @@
|
||||
html,
|
||||
body {
|
||||
@apply text-base dark:bg-zinc-800;
|
||||
@apply text-base w-full h-full dark:bg-zinc-800;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
|
||||
"WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
}
|
||||
|
||||
#root {
|
||||
@apply w-full h-full;
|
||||
}
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
import dayjs from "dayjs";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { UNKNOWN_ID } from "../helpers/consts";
|
||||
import { useMemoStore } from "../store/module";
|
||||
import useLoading from "../hooks/useLoading";
|
||||
import toastHelper from "../components/Toast";
|
||||
import MemoContent from "../components/MemoContent";
|
||||
import MemoResources from "../components/MemoResources";
|
||||
|
||||
interface State {
|
||||
memo: Memo;
|
||||
}
|
||||
|
||||
const EmbedMemo = () => {
|
||||
const { i18n } = useTranslation();
|
||||
const params = useParams();
|
||||
const memoStore = useMemoStore();
|
||||
const [state, setState] = useState<State>({
|
||||
memo: {
|
||||
id: UNKNOWN_ID,
|
||||
} as Memo,
|
||||
});
|
||||
const loadingState = useLoading();
|
||||
|
||||
useEffect(() => {
|
||||
const memoId = Number(params.memoId);
|
||||
if (memoId && !isNaN(memoId)) {
|
||||
memoStore
|
||||
.fetchMemoById(memoId)
|
||||
.then((memo) => {
|
||||
setState({
|
||||
memo,
|
||||
});
|
||||
loadingState.setFinish();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
toastHelper.error(error.response.data.message);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="w-full h-full flex flex-row justify-start items-start p-2">
|
||||
{!loadingState.isLoading && (
|
||||
<main className="w-full max-w-lg mx-auto my-auto shadow px-4 py-4 rounded-lg">
|
||||
<div className="w-full flex flex-col justify-start items-start">
|
||||
<div className="w-full mb-2 flex flex-row justify-start items-center text-sm text-gray-400 dark:text-gray-300">
|
||||
<span>{dayjs(state.memo.displayTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss")}</span>
|
||||
<a className="ml-2 hover:underline hover:text-green-600" href={`/u/${state.memo.creator.id}`}>
|
||||
@{state.memo.creator.nickname || state.memo.creator.username}
|
||||
</a>
|
||||
</div>
|
||||
<MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
|
||||
<MemoResources resourceList={state.memo.resourceList} />
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmbedMemo;
|
||||
Loading…
Reference in New Issue