usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-26 23:22:47 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: split editor keydown handler

Browse source
This commit is contained in:
Steven 2024-01-15 20:33:42 +08:00
parent 728a9705ea
commit 5a723f00fa
2 changed files with 46 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
web/src/components/MemoEditor/handlers.tsx Normal file
View file

@ -0,0 +1,43 @@
import { EditorRefActions } from "./Editor";
export const handleEditorKeydownWithMarkdownShortcuts = (event: React.KeyboardEvent, editorRef: EditorRefActions) => {
if (event.key === "b") {
const boldDelimiter = "**";
event.preventDefault();
styleHighlightedText(editorRef, boldDelimiter);
} else if (event.key === "i") {
const italicsDelimiter = "*";
event.preventDefault();
styleHighlightedText(editorRef, italicsDelimiter);
} else if (event.key === "k") {
event.preventDefault();
hyperlinkHighlightedText(editorRef);
}
};
const styleHighlightedText = (editor: EditorRefActions, delimiter: string) => {
const cursorPosition = editor.getCursorPosition();
const selectedContent = editor.getSelectedContent();
if (selectedContent.startsWith(delimiter) && selectedContent.endsWith(delimiter)) {
editor.insertText(selectedContent.slice(delimiter.length, -delimiter.length));
const newContentLength = selectedContent.length - delimiter.length * 2;
editor.setCursorPosition(cursorPosition, cursorPosition + newContentLength);
} else {
editor.insertText(`${delimiter}${selectedContent}${delimiter}`);
editor.setCursorPosition(cursorPosition + delimiter.length, cursorPosition + delimiter.length + selectedContent.length);
}
};
const hyperlinkHighlightedText = (editor: EditorRefActions, url?: string) => {
const cursorPosition = editor.getCursorPosition();
const selectedContent = editor.getSelectedContent();
const blankURL = "url";
url = url ?? blankURL;
editor.insertText(`[${selectedContent}](${url})`);
if (url === blankURL) {
const newCursorStart = cursorPosition + selectedContent.length + 3;
editor.setCursorPosition(newCursorStart, newCursorStart + url.length);
}
};

48
web/src/components/MemoEditor/index.tsx
View file

@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
import useLocalStorage from "react-use/lib/useLocalStorage";
import { memoServiceClient } from "@/grpcweb";
import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
import { isValidUrl } from "@/helpers/utils";
import { useGlobalStore, useResourceStore } from "@/store/module";
import { useMemoStore, useUserStore } from "@/store/v1";
import { MemoRelation, MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
@ -24,6 +23,7 @@ import TagSelector from "./ActionButton/TagSelector";
import Editor, { EditorRefActions } from "./Editor";
import RelationListView from "./RelationListView";
import ResourceListView from "./ResourceListView";
import { handleEditorKeydownWithMarkdownShortcuts } from "./handlers";
interface Props {
className?: string;
@ -116,20 +116,8 @@ const MemoEditor = (props: Props) => {
handleSaveBtnClick();
return;
}
if (event.key === "b") {
const boldDelimiter = "**";
event.preventDefault();
styleHighlightedText(editorRef.current, boldDelimiter);
}
if (event.key === "i") {
const italicsDelimiter = "*";
event.preventDefault();
styleHighlightedText(editorRef.current, italicsDelimiter);
}
if (event.key === "k") {
event.preventDefault();
hyperlinkHighlightedTest(editorRef.current);
}
handleEditorKeydownWithMarkdownShortcuts(event, editorRef.current);
}
if (event.key === "Tab") {
event.preventDefault();
@ -254,9 +242,6 @@ const MemoEditor = (props: Props) => {
if (event.clipboardData && event.clipboardData.files.length > 0) {
event.preventDefault();
await uploadMultiFiles(event.clipboardData.files);
} else if (editorRef.current != null && isValidUrl(event.clipboardData.getData("Text"))) {
event.preventDefault();
hyperlinkHighlightedTest(editorRef.current, event.clipboardData.getData("Text"));
}
};
@ -357,33 +342,6 @@ const MemoEditor = (props: Props) => {
editorRef.current?.focus();
};
const styleHighlightedText = (editor: EditorRefActions, delimiter: string) => {
const cursorPosition = editor.getCursorPosition();
const selectedContent = editor.getSelectedContent();
if (selectedContent.startsWith(delimiter) && selectedContent.endsWith(delimiter)) {
editor.insertText(selectedContent.slice(delimiter.length, -delimiter.length));
const newContentLength = selectedContent.length - delimiter.length * 2;
editor.setCursorPosition(cursorPosition, cursorPosition + newContentLength);
} else {
editor.insertText(`${delimiter}${selectedContent}${delimiter}`);
editor.setCursorPosition(cursorPosition + delimiter.length, cursorPosition + delimiter.length + selectedContent.length);
}
};
const hyperlinkHighlightedTest = (editor: EditorRefActions, url?: string) => {
const cursorPosition = editor.getCursorPosition();
const selectedContent = editor.getSelectedContent();
const blankURL = "url";
url = url ?? blankURL;
editor.insertText(`[${selectedContent}](${url})`);
if (url === blankURL) {
const newCursorStart = cursorPosition + selectedContent.length + 3;
editor.setCursorPosition(newCursorStart, newCursorStart + url.length);
}
};
const editorConfig = useMemo(
() => ({
className: editorClassName ?? "",