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/OrderedList.tsx
View File

@ -1,23 +1,30 @@
import { repeat } from "lodash-es";
import { Node } from "@/types/proto/api/v2/markdown_service";
import Renderer from "./Renderer";
import { BaseProps } from "./types";
interface Props extends BaseProps {
number: string;
indent: number;
children: Node[];
}
const OrderedList: React.FC<Props> = ({ number, children }: Props) => {
const OrderedList: React.FC<Props> = ({ number, indent, children }: Props) => {
return (
<ol>
<li className="grid grid-cols-[24px_1fr] gap-1">
<div className="w-7 h-6 flex justify-center items-center">
<span className="opacity-80">{number}.</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">{number}.</span>
</div>
<div>
{children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))}
</div>
</div>
</li>
</ol>

24
web/src/components/MemoContent/TaskList.tsx
View File

@ -1,4 +1,6 @@
import { Checkbox } from "@mui/joy";
import classNames from "classnames";
import { repeat } from "lodash-es";
import { useContext } from "react";
import { useMemoStore } from "@/store/v1";
import { Node, NodeType } from "@/types/proto/api/v2/markdown_service";
@ -8,11 +10,12 @@ import { RendererContext } from "./types";
interface Props {
index: string;
symbol: string;
indent: number;
complete: boolean;
children: Node[];
}
const TaskList: React.FC<Props> = ({ index, complete, children }: Props) => {
const TaskList: React.FC<Props> = ({ index, indent, complete, children }: Props) => {
const context = useContext(RendererContext);
const memoStore = useMemoStore();
@ -43,14 +46,19 @@ const TaskList: React.FC<Props> = ({ index, complete, children }: Props) => {
return (
<ul>
<li className="grid grid-cols-[24px_1fr] gap-1">
<div className="w-7 h-6 flex justify-center items-center">
<Checkbox size="sm" checked={complete} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
<li className="w-full flex flex-row">
<div className="block font-mono shrink-0">
<span>{repeat(" ", indent)}</span>
</div>
<div>
{children.map((child, subIndex) => (
<Renderer key={`${child.type}-${subIndex}`} index={`${index}-${subIndex}`} node={child} />
))}
<div className="w-auto grid grid-cols-[24px_1fr] gap-1">
<div className="w-7 h-6 flex justify-center items-center">
<Checkbox size="sm" checked={complete} disabled={context.readonly} onChange={(e) => handleCheckboxChange(e.target.checked)} />
</div>
<div className={classNames(complete && "line-through opacity-80")}>
{children.map((child, index) => (
<Renderer key={`${child.type}-${index}`} index={String(index)} node={child} />
))}
</div>
</div>
</li>
</ul>

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>