Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: emoji picker for the RTE widget (#19767)

Browse Source 
## Description
Added support for emoji picker in RTE(#19450), Emoji can be added
through the toolbar and editor as well.
This commit is contained in:
Vemparala Surya Vamsi 2023-01-16 15:36:13 +05:30 committed by GitHub
parent 12ea1b86ea
commit 107ead87e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/RTE/RichTextEditor_spec.js
View File

@ -286,6 +286,35 @@ describe("RichTextEditor Widget Functionality", function() {
cy.get('[aria-label="Text color"]').should("have.length", 1);
});
it("17. Check if able to add an emoji through toolbar", () => {
cy.get('[aria-label="More..."]').click({ force: true });
cy.wait(500);
cy.get('[aria-label="Emoticons"]').click({ force: true });
cy.wait(500);
cy.get('[aria-label="grinning"]').click({ force: true });
const getEditorContent = (win) => {
const tinyMceId = "rte-6h8j08u7ea";
const editor = win.tinymce.editors[tinyMceId];
return editor.getContent();
};
//contains emoji
cy.window().then((win) => {
expect(getEditorContent(win)).contains("😀");
});
//trigger a backspace
cy.get(formWidgetsPage.richTextEditorWidget + " iframe").then(($iframe) => {
const $body = $iframe.contents().find("body");
cy.get($body).type("{backspace}");
});
// after backspace the emoji should not be present
cy.window().then((win) => {
expect(getEditorContent(win)).not.contains("😀");
});
});
afterEach(() => {
cy.goToEditFromPublish();
});

3
app/client/src/widgets/RichTextEditorWidget/component/index.tsx
View File

@ -273,7 +273,7 @@ function RichtextEditorComponent(props: RichtextEditorComponentProps) {
const initialRender = useRef(true);
const toolbarConfig =
"insertfile undo redo | formatselect | bold italic underline backcolor forecolor | lineheight | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | removeformat | table | print preview media | emoticons' |help";
"insertfile undo redo | formatselect | bold italic underline backcolor forecolor | lineheight | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | removeformat | table | print preview media | emoticons |help";
const handleEditorChange = useCallback(
(newValue: string, editor: any) => {
@ -362,6 +362,7 @@ function RichtextEditorComponent(props: RichtextEditorComponentProps) {
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste code help",
"emoticons",
],
contextmenu: "link useBrowserSpellcheck image table",
setup: function(editor) {