LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-29 15:51:14 +00:00
Code Issues Projects Releases Wiki Activity

fix: Fix emoji picker custom emoji bug (#2175)

Browse source 
* Make emoji picker insert custom emojis

* Close emoji picker after emoji is selected
This commit is contained in:
SleeplessOne1917 2023-10-06 12:56:36 +00:00 committed by GitHub
parent ff98c2428d
commit ae4c37ed44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/shared/components/common/emoji-mart.tsx
View file

@ -1,4 +1,4 @@
import { Component } from "inferno"; import { Component, RefObject, createRef } from "inferno";
import { getEmojiMart } from "../../markdown"; import { getEmojiMart } from "../../markdown";
interface EmojiMartProps { interface EmojiMartProps {
@ -7,21 +7,24 @@ interface EmojiMartProps {
} }
export class EmojiMart extends Component<EmojiMartProps> { export class EmojiMart extends Component<EmojiMartProps> {
div: RefObject<HTMLDivElement>;
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
this.div = createRef();
this.handleEmojiClick = this.handleEmojiClick.bind(this); this.handleEmojiClick = this.handleEmojiClick.bind(this);
} }
componentDidMount() { componentDidMount() {
const div: any = document.getElementById("emoji-picker"); this.div.current?.appendChild(
if (div) { getEmojiMart(this.handleEmojiClick, this.props.pickerOptions) as any,
div.appendChild(
getEmojiMart(this.handleEmojiClick, this.props.pickerOptions),
); );
} }
}
render() { render() {
return <div id="emoji-picker"></div>; return <div id="emoji-picker" ref={this.div} />;
} }
handleEmojiClick(e: any) { handleEmojiClick(e: any) {

1
src/shared/components/common/emoji-picker.tsx
View file

@ -77,5 +77,6 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
handleEmojiClick(e: any) { handleEmojiClick(e: any) {
this.props.onEmojiClick?.(e); this.props.onEmojiClick?.(e);
this.setState({ showPicker: false });
} }
} }

17
src/shared/components/common/markdown-textarea.tsx
View file

@ -89,6 +89,7 @@ export class MarkdownTextArea extends Component<
super(props, context); super(props, context);
this.handleLanguageChange = this.handleLanguageChange.bind(this); this.handleLanguageChange = this.handleLanguageChange.bind(this);
this.handleEmoji = this.handleEmoji.bind(this);
if (isBrowser()) { if (isBrowser()) {
this.tribute = setupTribute(); this.tribute = setupTribute();
@ -163,9 +164,7 @@ export class MarkdownTextArea extends Component<
{this.getFormatButton("bold", this.handleInsertBold)} {this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)} {this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)} {this.getFormatButton("link", this.handleInsertLink)}
<EmojiPicker <EmojiPicker onEmojiClick={this.handleEmoji}></EmojiPicker>
onEmojiClick={e => this.handleEmoji(this, e)}
></EmojiPicker>
<label <label
htmlFor={`file-upload-${this.id}`} htmlFor={`file-upload-${this.id}`}
className={classNames("mb-0", { className={classNames("mb-0", {
@ -359,19 +358,19 @@ export class MarkdownTextArea extends Component<
); );
} }
handleEmoji(i: MarkdownTextArea, e: any) { handleEmoji(e: any) {
let value = e.native; let value = e.native;
if (value === null) { if (!value) {
const emoji = customEmojisLookup.get(e.id)?.custom_emoji; const emoji = customEmojisLookup.get(e.id)?.custom_emoji;
if (emoji) { if (emoji) {
value = `![${emoji.alt_text}](${emoji.image_url} "emoji ${emoji.shortcode}")`; value = `![${emoji.alt_text}](${emoji.image_url} "emoji ${emoji.shortcode}")`;
} }
} }
i.setState({ this.setState({
content: `${i.state.content ?? ""} ${value} `, content: `${this.state.content ?? ""} ${value} `,
}); });
i.contentChange(); this.contentChange();
const textarea: any = document.getElementById(i.id); const textarea: any = document.getElementById(this.id);
autosize.update(textarea); autosize.update(textarea);
} }