usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-12-18 22:59:24 +08:00
Code Issues Projects Releases Packages Wiki Activity

make margin left based on number in ol

Browse source
This commit is contained in:
SaraVieira 2025-08-10 13:56:59 +01:00
parent 9f8921d3b9
commit f645a86699
No known key found for this signature in database
GPG key ID: D31B9EE2FD5463CC
1 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/src/components/MemoContent/OrderedListItem.tsx
View file

@ -1,3 +1,4 @@
import { useMemo } from "react";
import { Node } from "@/types/proto/api/v1/markdown_service";
import Renderer from "./Renderer";
import { BaseProps } from "./types";
@ -8,12 +9,22 @@ interface Props extends BaseProps {
children: Node[];
}
const OrderedListItem: React.FC<Props> = ({ children }: Props) => {
const OrderedListItem: React.FC<Props> = ({ children, number }: Props) => {
const ml = useMemo(
() =>
number.length > 1
? {
marginLeft: 8 * (number.length - 1),
}
: {},
[number],
);
return (
<li>
{children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))}
<li style={ml}>
{children.map((child, index) => {
return <Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />;
})}
</li>
);
};