Feat: Support for Emoji Option in Feed Editor (#18772)

This commit is contained in:
Shrushti Polekar 2024-11-27 01:26:57 +05:30 committed by GitHub
parent e32f9cf862
commit 9f1be47b37
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 4213 additions and 3 deletions

View File

@ -12,6 +12,7 @@
*/
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { TextAreaEmoji } from '@windmillcode/quill-emoji';
import classNames from 'classnames';
import { debounce, isNil } from 'lodash';
import { Parchment } from 'quill';
@ -52,9 +53,11 @@ import searchClassBase from '../../../utils/SearchClassBase';
import { editorRef } from '../../common/RichTextEditor/RichTextEditor.interface';
import './feed-editor.less';
import { FeedEditorProp, MentionSuggestionsItem } from './FeedEditor.interface';
import './quill-emoji.css';
Quill.register('modules/markdownOptions', QuillMarkdown);
Quill.register(LinkBlot as unknown as Parchment.RegistryDefinition);
Quill.register('modules/emoji-textarea', TextAreaEmoji, true);
const Delta = Quill.import('delta');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const strikethrough = (_node: any, delta: typeof Delta) => {
@ -172,7 +175,6 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
},
[userProfilePics]
);
/**
* Prepare modules for editor
*/
@ -185,7 +187,7 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
insertRef: insertRef,
},
},
'emoji-toolbar': false,
'emoji-textarea': true,
mention: {
allowedChars: MENTION_ALLOWED_CHARS,
mentionDenotationChars: MENTION_DENOTATION_CHARS,

View File

@ -1001,6 +1001,9 @@
border-color: rgb(221, 227, 234);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
display: flex;
padding: 16px 8px;
align-items: center;
}
.ql-container.ql-snow {
border-color: rgb(221, 227, 234);
@ -1111,3 +1114,17 @@ button.ql-emoji {
text-align: right;
}
}
#om-quill-editor {
#tab-panel {
padding-top: 8px;
gap: 6px;
}
.emoji-tab.filter-flags {
display: none;
}
#tab-toolbar ul {
display: flex;
gap: 4px;
}
}

View File

@ -46,7 +46,7 @@ export const TOOLBAR_ITEMS = [
['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link'],
['insertMention', 'insertRef', 'emoji'],
['insertMention', 'insertRef'],
];
export enum TaskOperation {

View File

@ -116,6 +116,7 @@ module.exports = {
},
alias: {
process: 'process/browser',
Quill: path.resolve(__dirname, 'node_modules/quill'), // Alias for the 'quill' library in node_modules
},
},

View File

@ -115,6 +115,7 @@ module.exports = {
},
alias: {
process: 'process/browser',
Quill: path.resolve(__dirname, 'node_modules/quill'), // Alias for the 'quill' library in node_modules
},
},