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

chore: update insert content in editor (#336)

Browse Source
This commit is contained in:
boojack
2022-10-23 20:28:30 +08:00
committed by GitHub
parent 5690dab6bb
commit fe5ba6850b
2 changed files with 26 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/Editor/Editor.tsx
View File

@ -47,19 +47,19 @@ const Editor = forwardRef((props: Props, ref: React.ForwardedRef<EditorRefAction
focus: () => {
editorRef.current?.focus();
},
insertText: (content = "", prefix = "", suffix = prefix) => {
insertText: (content = "", prefix = "", suffix = "") => {
if (!editorRef.current) {
return;
}
const cursorPosition = editorRef.current.selectionStart;
const endPosition = editorRef.current.selectionEnd;
const prevValue = editorRef.current.value;
const value =
prevValue.slice(0, cursorPosition) +
prefix +
prevValue.slice(cursorPosition, endPosition) +
(content || prevValue.slice(cursorPosition, endPosition)) +
suffix +
content +
prevValue.slice(endPosition);
editorRef.current.value = value;

48
web/src/components/MemoEditor.tsx
View File

@ -76,39 +76,37 @@ const MemoEditor: React.FC = () => {
prevGlobalStateRef.current = editorState;
}, [state, editorState.editMemoId]);
const handleInsertMark = (mark: string) => {
editorRef.current?.insertText("", mark);
};
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === "Escape" && state.fullscreen) {
handleFullscreenBtnClick();
return;
}
if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
handleSaveBtnClick();
return;
}
if (event.key === "Tab") {
event.preventDefault();
editorRef.current?.insertText(" ".repeat(TAB_SPACE_WIDTH));
return;
}
if (event.ctrlKey || event.metaKey) {
event.preventDefault();
switch (event.key) {
case "b":
handleInsertMark("**");
break;
case "i":
handleInsertMark("*");
break;
case "e":
handleInsertMark("`");
break;
}
if (event.key === "Enter") {
handleSaveBtnClick();
return;
}
if (event.key === "b") {
event.preventDefault();
editorRef.current?.insertText("", "**", "**");
return;
}
if (event.key === "i") {
event.preventDefault();
editorRef.current?.insertText("", "*", "*");
return;
}
if (event.key === "e") {
event.preventDefault();
editorRef.current?.insertText("", "`", "`");
return;
}
}
};
const handleDropEvent = async (event: React.DragEvent) => {
@ -235,9 +233,9 @@ const MemoEditor: React.FC = () => {
const cursorPosition = editorRef.current.getCursorPosition();
const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
if (prevValue === "" || prevValue.endsWith("\n")) {
editorRef.current?.insertText("- [ ] ");
editorRef.current?.insertText("", "- [ ] ");
} else {
editorRef.current?.insertText("\n- [ ] ");
editorRef.current?.insertText("", "\n- [ ] ");
}
};
@ -249,9 +247,9 @@ const MemoEditor: React.FC = () => {
const cursorPosition = editorRef.current.getCursorPosition();
const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
if (prevValue === "" || prevValue.endsWith("\n")) {
editorRef.current?.insertText("```\n\n```");
editorRef.current?.insertText("", "```\n", "\n```");
} else {
editorRef.current?.insertText("\n```\n\n```");
editorRef.current?.insertText("", "\n```\n", "\n```");
}
};
@ -375,7 +373,7 @@ const MemoEditor: React.FC = () => {
)}
</div>
</div>
<button className="action-btn">
<button className="action-btn !hidden sm:!flex ">
<Icon.Smile className="icon-img" onClick={handleEmojiPickerBtnClick} />
</button>
<button className="action-btn">