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: add emoji picker in editor (#221)

Browse Source 
* feat: add vietnamese

* feat: add emoji picker in editor

* fix failing checks

* move emoji button before upload button

* move script to body index.html

* Update web/index.html

Co-authored-by: boojack <stevenlgtm@gmail.com>
This commit is contained in:
f97
2022-09-16 23:42:52 +07:00
committed by GitHub
parent 059080f194
commit e7db587a9e
6 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,11 +7,13 @@ import * as storage from "../helpers/storage";
import Icon from "./Icon";
import toastHelper from "./Toast";
import Editor, { EditorRefActions } from "./Editor/Editor";
import EmojiPicker from "./Editor/EmojiPicker";
import "../less/memo-editor.less";
interface State {
isUploadingResource: boolean;
fullscreen: boolean;
isShowEmojiPicker: boolean;
}
const MemoEditor = () => {
@ -22,6 +24,7 @@ const MemoEditor = () => {
const [state, setState] = useState<State>({
isUploadingResource: false,
fullscreen: false,
isShowEmojiPicker: false,
});
const editorRef = useRef<EditorRefActions>(null);
const prevGlobalStateRef = useRef(editorState);
@ -244,6 +247,21 @@ const MemoEditor = () => {
}
}, []);
const handleChangeIsShowEmojiPicker = (status: boolean) => {
setState({
...state,
isShowEmojiPicker: status,
});
};
const handleEmojiClick = (event: any, emojiObject: any) => {
if (!editorRef.current) {
return;
}
editorRef.current?.insertText(`${emojiObject.emoji}`);
handleChangeIsShowEmojiPicker(false);
};
const isEditing = Boolean(editorState.editMemoId && editorState.editMemoId !== UNKNOWN_ID);
const editorConfig = useMemo(
@ -296,6 +314,9 @@ const MemoEditor = () => {
<button className="action-btn">
<Icon.Code className="icon-img" onClick={handleCodeBlockBtnClick} />
</button>
<button className="action-btn">
<Icon.Smile className="icon-img" onClick={() => handleChangeIsShowEmojiPicker(!state.isShowEmojiPicker)} />
</button>
<button className="action-btn">
<Icon.Image className="icon-img" onClick={handleUploadFileBtnClick} />
<span className={`tip-text ${state.isUploadingResource ? "!block" : ""}`}>Uploading</span>
@ -306,6 +327,13 @@ const MemoEditor = () => {
</>
}
/>
{state.isShowEmojiPicker && (
<EmojiPicker
onEmojiClick={handleEmojiClick}
isShowEmojiPicker={state.isShowEmojiPicker}
handleChangeIsShowEmojiPicker={handleChangeIsShowEmojiPicker}
/>
)}
</div>
);
};