toast,
setupTribute,
wsJsonToRes,
+ emojiPicker,
} from '../utils';
import { WebSocketService, UserService } from '../services';
import autosize from 'autosize';
import Tribute from 'tributejs/src/Tribute.js';
+import emojiShortName from 'emoji-short-name';
import { i18n } from '../i18next';
interface CommentFormProps {
super(props, context);
this.tribute = setupTribute();
+ this.setupEmojiPicker();
+
this.state = this.emptyState;
if (this.props.node) {
</button>
{this.state.commentForm.content && (
<button
- className={`btn btn-sm mr-2 btn-secondary ${this.state
- .previewMode && 'active'}`}
+ className={`btn btn-sm mr-2 btn-secondary ${
+ this.state.previewMode && 'active'
+ }`}
onClick={linkEvent(this, this.handlePreviewToggle)}
>
{i18n.t('preview')}
<use xlinkHref="#icon-spinner"></use>
</svg>
)}
+ <span
+ onClick={linkEvent(this, this.handleEmojiPickerClick)}
+ class="pointer unselectable d-inline-block mr-3 float-right text-muted font-weight-bold"
+ data-tippy-content={i18n.t('emoji_picker')}
+ >
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-smile"></use>
+ </svg>
+ </span>
</div>
</div>
</form>
);
}
+ setupEmojiPicker() {
+ emojiPicker.on('emoji', twemojiHtmlStr => {
+ if (this.state.commentForm.content == null) {
+ this.state.commentForm.content = '';
+ }
+ var el = document.createElement('div');
+ el.innerHTML = twemojiHtmlStr;
+ let nativeUnicode = (el.childNodes[0] as HTMLElement).getAttribute('alt');
+ let shortName = `:${emojiShortName[nativeUnicode]}:`;
+ this.state.commentForm.content += shortName;
+ this.setState(this.state);
+ });
+ }
+
handleFinished() {
this.state.previewMode = false;
this.state.loading = false;
i.setState(i.state);
}
+ handleEmojiPickerClick(_i: CommentForm, event: any) {
+ emojiPicker.togglePicker(event.target);
+ }
+
handleCommentContentChange(i: CommentForm, event: any) {
i.state.commentForm.content = event.target.value;
i.setState(i.state);