Merge pull request #2492 from zetkin/issue-2394/paste-into-email-editor

Add pasting logic for spans in email editor

Author: richardolsson

src/features/emails/components/EmailEditor/EmailEditorFrontend.tsx

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 //@ts-ignore
 import Header from '@editorjs/header';
-//@ts-ignore
-import Paragraph from '@editorjs/paragraph';
 import { Box, useTheme } from '@mui/material';
 import EditorJS, {
   EditorConfig,
@@ -19,6 +17,7 @@ import messageIds from 'features/emails/l10n/messageIds';
 import { useMessages } from 'core/i18n';
 import { useNumericRouteParams } from 'core/hooks';
 import variableToolFactory from './tools/inlineVariable';
+import ParagraphWithSpanPaste from './tools/paragraphWithSpanPaste';
 
 export type EmailEditorFrontendProps = {
   apiRef: MutableRefObject<EditorJS | null>;
@@ -110,7 +109,7 @@ const EmailEditorFrontend: FC<EmailEditorFrontendProps> = ({
           },
         },
         paragraph: {
-          class: Paragraph,
+          class: ParagraphWithSpanPaste as unknown as ToolConstructable,
         },
         variable: {
           class: variableToolFactory(messages.editor.tools.variable.title()),

src/features/emails/components/EmailEditor/tools/paragraphWithSpanPaste.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+//@ts-ignore
+import Paragraph from '@editorjs/paragraph';
+import { BlockTool, HTMLPasteEvent } from '@editorjs/editorjs';
+
+//@ts-ignore
+export default class ParagraphWithSpanPaste
+  extends Paragraph
+  implements BlockTool
+{
+  onPaste(event: HTMLPasteEvent) {
+    const text = event.detail.data.textContent;
+    event.detail.data = document.createElement('div');
+    event.detail.data.textContent = text;
+    return super.onPaste(event);
+  }
+
+  static get pasteConfig() {
+    return {
+      tags: ['P', 'SPAN'],
+    };
+  }
+}