From 41d9c9d76e442c109be7903fd2d3e2e0fffbd873 Mon Sep 17 00:00:00 2001 From: johnnyjoy Date: Wed, 25 Dec 2024 22:43:26 +0800 Subject: [PATCH] fix: order list starts --- web/src/components/MemoContent/List.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/web/src/components/MemoContent/List.tsx b/web/src/components/MemoContent/List.tsx index 7e7a9ba2..6f0c1b83 100644 --- a/web/src/components/MemoContent/List.tsx +++ b/web/src/components/MemoContent/List.tsx @@ -1,4 +1,5 @@ import clsx from "clsx"; +import { head } from "lodash-es"; import React from "react"; import { ListNode_Kind, Node, NodeType } from "@/types/proto/api/v1/markdown_service"; import Renderer from "./Renderer"; @@ -14,7 +15,7 @@ const List: React.FC = ({ kind, indent, children }: Props) => { let prevNode: Node | null = null; let skipNextLineBreakFlag = false; - const getListContainer = (kind: ListNode_Kind) => { + const getListContainer = () => { switch (kind) { case ListNode_Kind.ORDERED: return "ol"; @@ -27,13 +28,26 @@ const List: React.FC = ({ kind, indent, children }: Props) => { } }; + const getAttributes = () => { + if (kind === ListNode_Kind.ORDERED) { + const firstChild = head(children); + if (firstChild?.type === NodeType.ORDERED_LIST_ITEM) { + return { + start: firstChild.orderedListItemNode?.number, + }; + } + } + return {}; + }; + return React.createElement( - getListContainer(kind), + getListContainer(), { className: clsx( `list-inside ${kind === ListNode_Kind.ORDERED ? "list-decimal" : kind === ListNode_Kind.UNORDERED ? "list-disc" : "list-none"}`, indent > 0 ? `pl-${2 * indent}` : "", ), + ...getAttributes(), }, children.map((child, index) => { if (prevNode?.type !== NodeType.LINE_BREAK && child.type === NodeType.LINE_BREAK && skipNextLineBreakFlag) {