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: match sublist indentation when adding a new item (#4433)

Browse Source 
* match sublist indentation

* recursively get last node

* fix linting issues
This commit is contained in:
Michael Baumgarten
2025-02-22 13:48:39 +01:00
committed by GitHub
parent 964ae16851
commit 9f01b451df
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/MemoEditor/Editor/index.tsx
View File

@@ -1,7 +1,7 @@
import { last } from "lodash-es"; import { last } from "lodash-es";
import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react"; import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
import { markdownServiceClient } from "@/grpcweb"; import { markdownServiceClient } from "@/grpcweb";
import { NodeType, OrderedListItemNode, TaskListItemNode, UnorderedListItemNode } from "@/types/proto/api/v1/markdown_service"; import { Node, NodeType, OrderedListItemNode, TaskListItemNode, UnorderedListItemNode } from "@/types/proto/api/v1/markdown_service";
import { cn } from "@/utils"; import { cn } from "@/utils";
import TagSuggestions from "./TagSuggestions"; import TagSuggestions from "./TagSuggestions";
@@ -150,6 +150,20 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
updateEditorHeight(); updateEditorHeight();
}, []); }, []);
const getLastNode = (nodes: Node[]): Node | undefined => {
const lastNode = last(nodes);
if (!lastNode) {
return undefined;
}
if (lastNode.type === NodeType.LIST) {
const children = lastNode.listNode?.children;
if (children) {
return getLastNode(children);
}
}
return lastNode;
};
const handleEditorKeyDown = async (event: React.KeyboardEvent<HTMLTextAreaElement>) => { const handleEditorKeyDown = async (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (event.key === "Enter" && !isInIME) { if (event.key === "Enter" && !isInIME) {
if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) { if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
@@ -159,7 +173,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
const cursorPosition = editorActions.getCursorPosition(); const cursorPosition = editorActions.getCursorPosition();
const prevContent = editorActions.getContent().substring(0, cursorPosition); const prevContent = editorActions.getContent().substring(0, cursorPosition);
const { nodes } = await markdownServiceClient.parseMarkdown({ markdown: prevContent }); const { nodes } = await markdownServiceClient.parseMarkdown({ markdown: prevContent });
const lastNode = last(last(nodes)?.listNode?.children); const lastNode = getLastNode(nodes);
if (!lastNode) { if (!lastNode) {
return; return;
} }
@@ -171,13 +185,13 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
let insertText = indentationMatch ? indentationMatch[0] : ""; // Keep the indentation of the previous line let insertText = indentationMatch ? indentationMatch[0] : ""; // Keep the indentation of the previous line
if (lastNode.type === NodeType.TASK_LIST_ITEM) { if (lastNode.type === NodeType.TASK_LIST_ITEM) {
const { symbol } = lastNode.taskListItemNode as TaskListItemNode; const { symbol } = lastNode.taskListItemNode as TaskListItemNode;
insertText = `${symbol} [ ] `; insertText += `${symbol} [ ] `;
} else if (lastNode.type === NodeType.UNORDERED_LIST_ITEM) { } else if (lastNode.type === NodeType.UNORDERED_LIST_ITEM) {
const { symbol } = lastNode.unorderedListItemNode as UnorderedListItemNode; const { symbol } = lastNode.unorderedListItemNode as UnorderedListItemNode;
insertText = `${symbol} `; insertText += `${symbol} `;
} else if (lastNode.type === NodeType.ORDERED_LIST_ITEM) { } else if (lastNode.type === NodeType.ORDERED_LIST_ITEM) {
const { number } = lastNode.orderedListItemNode as OrderedListItemNode; const { number } = lastNode.orderedListItemNode as OrderedListItemNode;
insertText = `${Number(number) + 1}. `; insertText += `${Number(number) + 1}. `;
} }
if (insertText) { if (insertText) {
editorActions.insertText(insertText); editorActions.insertText(insertText);