fix: prohibit paste text/html content into email editor, allow paste …

apps/web/cypress/global.d.ts

@@ -4,6 +4,10 @@ type IMountType = import('cypress/react').mount;
 type ICreateNotificationTemplateDto = import('@novu/shared').ICreateNotificationTemplateDto;
 type FeatureFlagsKeysEnum = import('@novu/shared').FeatureFlagsKeysEnum;
 type CreateTemplatePayload = import('@novu/testing').CreateTemplatePayload;
+type ClipboardData = {
+  'text/plain'?: string;
+  'text/html'?: string;
+};
 
 declare namespace Cypress {
   interface Chainable {
@@ -63,6 +67,11 @@ declare namespace Cypress {
      */
     getClipboardValue(): Chainable<string>;
 
+    /**
+     * Generates paste event on found by given testIdSelector element
+     */
+    paste(testIdSelector: string, clipboardData: ClipboardData): void;
+
     loginWithGitHub(): Chainable<any>;
 
     makeBlueprints(): Chainable<any>;

apps/web/cypress/support/commands.ts

@@ -219,4 +219,19 @@ Cypress.Commands.add('getClipboardValue', () => {
     .then((clipboard) => clipboard?.readText());
 });
 
+Cypress.Commands.add('paste', (selector: string, data) => {
+  const pasteEvent = Object.assign(new Event('paste', { bubbles: true, cancelable: true }), {
+    clipboardData: {
+      getData(type) {
+        return data[type];
+      },
+    },
+  });
+  cy.getByTestId(selector)
+    .click()
+    .then(($el) => {
+      $el[0].dispatchEvent(pasteEvent);
+    });
+});
+
 export {};

apps/web/cypress/tests/notification-editor/create-notification.spec.ts

@@ -468,6 +468,44 @@ describe('Creation functionality', function () {
     cy.getByTestId('emailSubject').should('have.value', 'this is email subject');
     cy.getByTestId('emailPreheader').should('have.value', 'this is email preheader');
   });
+
+  it('should paste only text/plain content into email editor', async function () {
+    cy.waitLoadTemplatePage(() => {
+      cy.visit('/workflows/create');
+    });
+    cy.waitForNetworkIdle(500);
+    cy.getByTestId('settings-page').click();
+    cy.waitForNetworkIdle(500);
+    cy.getByTestId('title').clear().first().type('Test Notification Title');
+    cy.getByTestId('description').type('This is a test description for a test title');
+    cy.get('body').click();
+    cy.getByTestId('trigger-code-snippet').should('not.exist');
+    cy.getByTestId('groupSelector').should('have.value', 'General');
+
+    addAndEditChannel('email');
+    cy.waitForNetworkIdle(500);
+
+    cy.getByTestId('emailSubject').type('this is email subject');
+    cy.getByTestId('emailSenderName').type('this is email sender name');
+
+    const text = '{{firstName}} someone assigned you to {{taskName}}';
+
+    cy.paste('editable-text-content', {
+      'text/plain': text,
+      'text/html': `<p style="background-color: black">${text}</p>`,
+    });
+
+    cy.getByTestId('var-label').last().contains('Step Variables').click();
+    cy.getByTestId('var-item-firstName-string').contains('firstName');
+    cy.getByTestId('var-item-firstName-string').contains('string');
+    cy.getByTestId('var-item-taskName-string').contains('taskName');
+    cy.getByTestId('var-item-taskName-string').contains('string');
+
+    cy.getByTestId('editor-mode-switch').find('label').last().click();
+
+    cy.getByTestId('test-send-email-btn').click();
+    cy.get('.mantine-Notification-root').contains('Test sent successfully!');
+  });
 });
 
 function awaitGetContains(getSelector: string, contains: string) {

apps/web/src/pages/templates/components/email-editor/TextRowContent.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { ClipboardEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { getHotkeyHandler } from '@mantine/hooks';
 import { TextAlignEnum } from '@novu/shared';
@@ -10,6 +10,7 @@ import { useStepFormPath } from '../../hooks/useStepFormPath';
 import type { IForm } from '../formTypes';
 import { AutoSuggestionsDropdown } from './AutoSuggestionsDropdown';
 import { useWorkflowVariables } from '../../../../api/hooks';
+import { paste } from '../../../../utils/paste';
 
 export function TextRowContent({ blockIndex }: { blockIndex: number }) {
   const methods = useFormContext<IForm>();
@@ -157,6 +158,13 @@ export function TextRowContent({ blockIndex }: { blockIndex: number }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [content, text]);
 
+  const handlePaste = (event: ClipboardEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const pastedData = event?.clipboardData?.getData('text/plain');
+    paste(pastedData);
+    methods.setValue(`${stepFormPath}.template.content.${blockIndex}.content`, ref.current?.innerHTML ?? '');
+  };
+
   return (
     <div style={{ position: 'relative' }}>
       {showAutoSuggestions && (
@@ -270,6 +278,7 @@ export function TextRowContent({ blockIndex }: { blockIndex: number }) {
                 backgroundColor: 'transparent',
                 textAlign: textAlign || TextAlignEnum.LEFT,
               }}
+              onPaste={(event) => handlePaste(event)}
               onClick={() => {
                 if (showAutoSuggestions) {
                   resetAutoSuggestions();

apps/web/src/utils/paste.ts

@@ -0,0 +1,18 @@
+export function paste(text: string) {
+  const canPasteByExecCommand = typeof document.execCommand === 'function';
+  let isPasteDone = false;
+  if (canPasteByExecCommand) {
+    try {
+      document.execCommand('insertText', false, text);
+      isPasteDone = true;
+    } catch (e) {}
+  }
+
+  if (!isPasteDone) {
+    const selection = window.getSelection();
+    if (!selection?.rangeCount) return;
+    selection.deleteFromDocument();
+    selection.getRangeAt(0).insertNode(document.createTextNode(text));
+    selection.collapseToEnd();
+  }
+}