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

feat: implement indent for list nodes

Browse Source
This commit is contained in:
Steven
2024-01-14 22:19:03 +08:00
parent d44e74bd1e
commit 98762be1e5
14 changed files with 310 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/components/MemoContent/UnorderedList.tsx
View File

@ -1,22 +1,29 @@
import { repeat } from "lodash-es";
import { Node } from "@/types/proto/api/v2/markdown_service";
import Renderer from "./Renderer";
interface Props {
symbol: string;
indent: number;
children: Node[];
}
const UnorderedList: React.FC<Props> = ({ children }: Props) => {
const UnorderedList: React.FC<Props> = ({ indent, children }: Props) => {
return (
<ul>
<li className="grid grid-cols-[24px_1fr] gap-1">
<div className="w-7 h-6 flex justify-center items-center">
<span className="opacity-80">•</span>
<li className="w-full flex flex-row">
<div className="block font-mono shrink-0">
<span>{repeat(" ", indent)}</span>
</div>
<div>
{children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))}
<div className="w-auto grid grid-cols-[24px_1fr] gap-1">
<div className="w-7 h-6 flex justify-center items-center">
<span className="opacity-80">•</span>
</div>
<div>
{children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))}
</div>
</div>
</li>
</ul>