YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update memo content props

Browse Source
This commit is contained in:
Steven
2023-12-28 22:57:51 +08:00
parent 46f7cffc7b
commit ea87a1dc0c
6 changed files with 10 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/components/MemoContent/index.tsx
View File

@ -1,35 +1,17 @@
import { isUndefined } from "lodash-es"; import { useRef } from "react";
import { useEffect, useRef, useState } from "react";
import { markdownServiceClient } from "@/grpcweb";
import { Node } from "@/types/proto/api/v2/markdown_service"; import { Node } from "@/types/proto/api/v2/markdown_service";
import Renderer from "./Renderer"; import Renderer from "./Renderer";
interface Props { interface Props {
content: string; nodes: Node[];
nodes?: Node[];
className?: string; className?: string;
onMemoContentClick?: (e: React.MouseEvent) => void; onMemoContentClick?: (e: React.MouseEvent) => void;
} }
const MemoContent: React.FC<Props> = (props: Props) => { const MemoContent: React.FC<Props> = (props: Props) => {
const { className, content, onMemoContentClick } = props; const { className, onMemoContentClick } = props;
const [nodes, setNodes] = useState<Node[]>(props.nodes ?? []);
const memoContentContainerRef = useRef<HTMLDivElement>(null); const memoContentContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!isUndefined(props.nodes)) {
return;
}
markdownServiceClient
.parseMarkdown({
markdown: content,
})
.then(({ nodes }) => {
setNodes(nodes);
});
}, [content, props.nodes]);
const handleMemoContentClick = async (e: React.MouseEvent) => { const handleMemoContentClick = async (e: React.MouseEvent) => {
if (onMemoContentClick) { if (onMemoContentClick) {
onMemoContentClick(e); onMemoContentClick(e);
@ -43,7 +25,7 @@ const MemoContent: React.FC<Props> = (props: Props) => {
className="w-full max-w-full word-break text-base leading-6 space-y-1" className="w-full max-w-full word-break text-base leading-6 space-y-1"
onClick={handleMemoContentClick} onClick={handleMemoContentClick}
> >
{nodes.map((node, index) => ( {props.nodes.map((node, index) => (
<Renderer key={`${node.type}-${index}`} node={node} /> <Renderer key={`${node.type}-${index}`} node={node} />
))} ))}
</div> </div>

4
web/src/components/MemoView.tsx
View File

@ -205,7 +205,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
<div className="w-auto hidden group-hover:flex flex-row justify-between items-center"> <div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
{props.showVisibility && memo.visibility !== Visibility.PRIVATE && ( {props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
<> <>
<Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility)}` as any)} placement="top"> <Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility).toLowerCase()}` as any)} placement="top">
<span> <span>
<VisibilityIcon visibility={memo.visibility} /> <VisibilityIcon visibility={memo.visibility} />
</span> </span>
@ -251,7 +251,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
)} )}
</div> </div>
</div> </div>
<MemoContent content={memo.content} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} /> <MemoContent nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
<MemoResourceListView resourceList={memo.resources} /> <MemoResourceListView resourceList={memo.resources} />
<MemoRelationListView memo={memo} relationList={referenceRelations} /> <MemoRelationListView memo={memo} relationList={referenceRelations} />
</div> </div>

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

@ -100,7 +100,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
> >
<span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span> <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span>
<div className="w-full px-6 text-base pb-4"> <div className="w-full px-6 text-base pb-4">
<MemoContent content={memo.content} /> <MemoContent nodes={memo.nodes} />
<MemoResourceListView resourceList={memo.resources} /> <MemoResourceListView resourceList={memo.resources} />
</div> </div>
<div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6"> <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">

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

@ -21,7 +21,7 @@ const TimelineMemo = (props: Props) => {
<Icon.Dot className="w-5 h-auto opacity-60" /> <Icon.Dot className="w-5 h-auto opacity-60" />
<span className="opacity-60">#{memo.id}</span> <span className="opacity-60">#{memo.id}</span>
</div> </div>
<MemoContent content={memo.content} nodes={memo.nodes} /> <MemoContent nodes={memo.nodes} />
<MemoResourceListView resourceList={memo.resources} /> <MemoResourceListView resourceList={memo.resources} />
<MemoRelationListView memo={memo} relationList={relations} /> <MemoRelationListView memo={memo} relationList={relations} />
</div> </div>

2
web/src/pages/Archived.tsx
View File

@ -105,7 +105,7 @@ const Archived = () => {
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<MemoContent content={memo.content} nodes={memo.nodes} /> <MemoContent nodes={memo.nodes} />
</div> </div>
))} ))}
</div> </div>

2
web/src/pages/MemoDetail.tsx
View File

@ -139,7 +139,7 @@ const MemoDetail = () => {
</Link> </Link>
</div> </div>
)} )}
<MemoContent content={memo.content} /> <MemoContent nodes={memo.nodes} />
<MemoResourceListView resourceList={memo.resources} /> <MemoResourceListView resourceList={memo.resources} />
<MemoRelationListView memo={memo} relationList={referenceRelations} /> <MemoRelationListView memo={memo} relationList={referenceRelations} />
<div className="w-full mt-3 flex flex-row justify-between items-center gap-2"> <div className="w-full mt-3 flex flex-row justify-between items-center gap-2">