mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Fix emoji input behaviour
This commit is contained in:
parent
e95edadf62
commit
497f7e7ad3
@ -102,6 +102,7 @@ const EditBox: Component<{
|
|||||||
const elm = textArea as AutoSizedTextArea;
|
const elm = textArea as AutoSizedTextArea;
|
||||||
const preview = textPreview;
|
const preview = textPreview;
|
||||||
|
|
||||||
|
|
||||||
if(elm.nodeName !== 'TEXTAREA' || elm.id !== `${prefix()}new_note_text_area` || !preview) {
|
if(elm.nodeName !== 'TEXTAREA' || elm.id !== `${prefix()}new_note_text_area` || !preview) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -110,19 +111,20 @@ const EditBox: Component<{
|
|||||||
|
|
||||||
!elm._baseScrollHeight && getScrollHeight(elm);
|
!elm._baseScrollHeight && getScrollHeight(elm);
|
||||||
|
|
||||||
|
|
||||||
if (elm.scrollHeight >= (maxHeight / 3)) {
|
if (elm.scrollHeight >= (maxHeight / 3)) {
|
||||||
elm.style.height = '46vh';
|
elm.style.height = '46vh';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
elm.style.height = 'auto';
|
elm.style.height = 'auto';
|
||||||
|
|
||||||
elm.rows = minRows;
|
elm.rows = minRows;
|
||||||
const rows = Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 20);
|
const rows = Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 20);
|
||||||
elm.rows = minRows + rows;
|
elm.rows = minRows + rows;
|
||||||
|
|
||||||
const rect = elm.getBoundingClientRect();
|
const rect = elm.getBoundingClientRect();
|
||||||
|
|
||||||
|
|
||||||
preview.style.maxHeight = `${maxHeight - rect.height - 120}px`;
|
preview.style.maxHeight = `${maxHeight - rect.height - 120}px`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -163,7 +165,6 @@ const EditBox: Component<{
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (isEmojiInput()) {
|
if (isEmojiInput()) {
|
||||||
|
|
||||||
if (e.code === 'ArrowDown') {
|
if (e.code === 'ArrowDown') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setHighlightedEmoji(i => {
|
setHighlightedEmoji(i => {
|
||||||
@ -246,6 +247,7 @@ const EditBox: Component<{
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
emojiResults.length === 0 && setEmojiResults(emojiSearch(emojiQuery()));
|
||||||
selectEmoji(emojiResults[highlightedEmoji()]);
|
selectEmoji(emojiResults[highlightedEmoji()]);
|
||||||
setHighlightedEmoji(0);
|
setHighlightedEmoji(0);
|
||||||
return false;
|
return false;
|
||||||
@ -261,7 +263,7 @@ const EditBox: Component<{
|
|||||||
setEmojiInput(false);
|
setEmojiInput(false);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
} else {
|
} else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
|
||||||
setEmojiQuery(q => q + e.key);
|
setEmojiQuery(q => q + e.key);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@ -341,7 +343,7 @@ const EditBox: Component<{
|
|||||||
setMentioning(false);
|
setMentioning(false);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
} else {
|
} else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
|
||||||
setPreQuery(q => q + e.key);
|
setPreQuery(q => q + e.key);
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
@ -927,7 +929,10 @@ const EditBox: Component<{
|
|||||||
});
|
});
|
||||||
|
|
||||||
const selectEmoji = (emoji: EmojiOption) => {
|
const selectEmoji = (emoji: EmojiOption) => {
|
||||||
if (!textArea) {
|
if (!textArea || !emoji) {
|
||||||
|
setEmojiInput(false);
|
||||||
|
setEmojiQuery('');
|
||||||
|
setEmojiResults(() => []);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -257,7 +257,7 @@ export const defaultNotificationSettings: Record<string, boolean> = {
|
|||||||
POST_YOUR_POST_WAS_MENTIONED_IN_WAS_REPLIED_TO: true,
|
POST_YOUR_POST_WAS_MENTIONED_IN_WAS_REPLIED_TO: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const emojiSearchLimit = 1;
|
export const emojiSearchLimit = 0;
|
||||||
|
|
||||||
export const today = (new Date()).getTime();
|
export const today = (new Date()).getTime();
|
||||||
|
|
||||||
|
@ -20,7 +20,7 @@ import SearchOption from '../components/Search/SearchOption';
|
|||||||
import { debounce, isVisibleInContainer, uuidv4 } from '../utils';
|
import { debounce, isVisibleInContainer, uuidv4 } from '../utils';
|
||||||
import { useSearchContext } from '../contexts/SearchContext';
|
import { useSearchContext } from '../contexts/SearchContext';
|
||||||
import { createStore } from 'solid-js/store';
|
import { createStore } from 'solid-js/store';
|
||||||
import { editMentionRegex } from '../constants';
|
import { editMentionRegex, emojiSearchLimit } from '../constants';
|
||||||
import Search from '../components/Search/Search';
|
import Search from '../components/Search/Search';
|
||||||
import { useProfileContext } from '../contexts/ProfileContext';
|
import { useProfileContext } from '../contexts/ProfileContext';
|
||||||
import Paginator from '../components/Paginator/Paginator';
|
import Paginator from '../components/Paginator/Paginator';
|
||||||
@ -125,8 +125,6 @@ export const parseNpubLinks = (text: string, mentionedUsers: Record<string, Prim
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const emojiSearchLimit = 2;
|
|
||||||
|
|
||||||
const Messages: Component = () => {
|
const Messages: Component = () => {
|
||||||
const instanceId = uuidv4();
|
const instanceId = uuidv4();
|
||||||
|
|
||||||
@ -371,7 +369,7 @@ const Messages: Component = () => {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const mentionSeparators = ['Enter', 'Space', 'Comma'];
|
const mentionSeparators = ['Enter', 'Space', 'Comma', 'Tab'];
|
||||||
|
|
||||||
if (!isMentioning() && !isEmojiInput() && e.code === 'Enter' && !e.shiftKey) {
|
if (!isMentioning() && !isEmojiInput() && e.code === 'Enter' && !e.shiftKey) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -472,6 +470,7 @@ const Messages: Component = () => {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
emojiResults.length === 0 && setEmojiResults(emojiSearch(emojiQuery()));
|
||||||
selectEmoji(emojiResults[highlightedEmoji()]);
|
selectEmoji(emojiResults[highlightedEmoji()]);
|
||||||
setHighlightedEmoji(0);
|
setHighlightedEmoji(0);
|
||||||
return false;
|
return false;
|
||||||
@ -487,16 +486,11 @@ const Messages: Component = () => {
|
|||||||
setEmojiInput(false);
|
setEmojiInput(false);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
} else {
|
} else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
|
||||||
setEmojiQuery(q => q + e.key);
|
setEmojiQuery(q => q + e.key);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (emojiQuery().length === 0) {
|
|
||||||
// setEmojiInput(false);
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -572,16 +566,11 @@ const Messages: Component = () => {
|
|||||||
setMentioning(false);
|
setMentioning(false);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
} else {
|
} else if (!['Shift', 'Control', 'Meta'].includes(e.key)) {
|
||||||
setPreQuery(q => q + e.key);
|
setPreQuery(q => q + e.key);
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (preQuery().length === 0) {
|
|
||||||
// setMentioning(false);
|
|
||||||
// return false;
|
|
||||||
// }
|
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -748,7 +737,10 @@ const Messages: Component = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const selectEmoji = (emoji: EmojiOption) => {
|
const selectEmoji = (emoji: EmojiOption) => {
|
||||||
if (!newMessageInput) {
|
if (!newMessageInput || !emoji) {
|
||||||
|
setEmojiInput(false);
|
||||||
|
setEmojiQuery('');
|
||||||
|
setEmojiResults(() => []);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user