Fix cases around newlines and whitespace (#1619)

* Fix cases around newlines and whitespace * Add changeset
udecode · Jun 23, 2022 · 303a818 · 303a818 · vercel · Jun 23, 2022
1 parent 465d5d9
commit 303a818
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 36 deletions.
diff --git a/.changeset/stupid-tomatoes-return.md b/.changeset/stupid-tomatoes-return.md
@@ -0,0 +1,6 @@
+---
+'@udecode/plate-mention': patch
+'@udecode/plate-test-utils': patch
+---
+
+Merge lines, strip whitespaces
diff --git a/packages/nodes/code-block/src/insertDataCodeBlock.spec.tsx b/packages/nodes/code-block/src/insertDataCodeBlock.spec.tsx
@@ -3,18 +3,11 @@
 import { createPlateUIEditor } from '@udecode/plate';
 import { PlateEditor } from '@udecode/plate-core';
 import { createParagraphPlugin } from '@udecode/plate-paragraph';
-import { jsx } from '@udecode/plate-test-utils';
+import { createDataTransfer, jsx } from '@udecode/plate-test-utils';
 import { createCodeBlockPlugin } from './createCodeBlockPlugin';
 
 jsx;
 
-const createDataTransfer = (dataMap: Map<string, any> = new Map()) => {
-  return ({
-    getData: (key: string) => dataMap.get(key) ?? '',
-    setData: (key: string, value: string) => dataMap.set(key, value),
-  } as unknown) as DataTransfer;
-};
-
 const editorTest = (input: any, data: DataTransfer, expected: any) => {
   const plugins = [createParagraphPlugin(), createCodeBlockPlugin()];
 

diff --git a/packages/nodes/mention/src/withMention.spec.tsx b/packages/nodes/mention/src/withMention.spec.tsx
@@ -6,7 +6,11 @@ import {
   ComboboxState,
 } from '@udecode/plate-combobox';
 import { moveSelection, PlateEditor, select, Value } from '@udecode/plate-core';
-import { createDataTransfer, jsx } from '@udecode/plate-test-utils';
+import {
+  createDataTransfer,
+  DataTransferDataMap,
+  jsx,
+} from '@udecode/plate-test-utils';
 import { Range } from 'slate';
 import { createEditorWithMentions } from './__tests__/createEditorWithMentions';
 import { getMentionOnSelectItem } from './getMentionOnSelectItem';
@@ -482,36 +486,110 @@ describe('withMention', () => {
   });
 
   describe('paste', () => {
-    it('should paste the clipboard contents into mention as text', () => {
-      const editor = createEditorWithMentionInput(
-        <hp>
-          <cursor />
-        </hp>
-      );
+    const testPaste: (
+      data: DataTransferDataMap,
+      input: JSX.Element,
+      expected: JSX.Element
+    ) => void = (data, input, expected) => {
+      const editor = createEditorWithMentionInput(input);
 
-      const fragment = createDataTransfer(
-        new Map([
-          [
-            'text/html',
-            '<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body>hello</body></html>',
-          ],
-          ['text/plain', 'hello'],
-        ])
-      );
+      editor.insertData(createDataTransfer(data));
 
-      editor.insertData(fragment);
+      expect(editor.children).toEqual([expected]);
+    };
 
-      expect(editor.children).toEqual([
+    const testPasteBasic: (
+      data: DataTransferDataMap,
+      expected: string
+    ) => void = (data, expected) => {
+      testPaste(
+        data,
+        <hp>
+          <cursor />
+        </hp>,
         <hp>
           <htext />
-          <hmentioninput trigger={trigger}>hello</hmentioninput>
+          <hmentioninput trigger={trigger}>{expected}</hmentioninput>
           <htext />
-        </hp>,
-      ]);
+        </hp>
+      );
+    };
+
+    type PasteTestCase = {
+      data: DataTransferDataMap;
+      expected: string;
+    };
+
+    const basePasteTestSuite = ({
+      simple,
+      whitespace,
+      newLine,
+      newLineAndWhitespace,
+    }: {
+      simple: PasteTestCase;
+      whitespace: PasteTestCase;
+      newLine: PasteTestCase;
+      newLineAndWhitespace: PasteTestCase;
+    }): void => {
+      it('should paste the clipboard contents into mention as text', () =>
+        testPasteBasic(simple.data, simple.expected));
+
+      it('should merge lines', () =>
+        testPasteBasic(newLine.data, newLine.expected));
+
+      it('should trim the text', () =>
+        testPasteBasic(whitespace.data, whitespace.expected));
+
+      it('should trim every line before merging', () =>
+        testPasteBasic(
+          newLineAndWhitespace.data,
+          newLineAndWhitespace.expected
+        ));
+    };
+
+    describe('html', () => {
+      basePasteTestSuite({
+        simple: {
+          data: new Map([['text/html', '<html><body>hello</body></html>']]),
+          expected: 'hello',
+        },
+        whitespace: {
+          data: new Map([['text/html', '<html><body> hello </body></html>']]),
+          expected: 'hello',
+        },
+        newLine: {
+          data: new Map([
+            ['text/html', '<html><body>hello<br>world</body></html>'],
+          ]),
+          expected: 'helloworld',
+        },
+        newLineAndWhitespace: {
+          data: new Map([
+            ['text/html', '<html><body> hello <br> world </body></html>'],
+          ]),
+          expected: 'helloworld',
+        },
+      });
+    });
 
-      expect(editor.selection).toEqual<Range>({
-        anchor: { path: [0, 1, 0], offset: 5 },
-        focus: { path: [0, 1, 0], offset: 5 },
+    describe('plain text', () => {
+      basePasteTestSuite({
+        simple: {
+          data: new Map([['text/plain', 'hello']]),
+          expected: 'hello',
+        },
+        whitespace: {
+          data: new Map([['text/plain', ' hello ']]),
+          expected: 'hello',
+        },
+        newLine: {
+          data: new Map([['text/plain', 'hello\r\nworld\n!\r!']]),
+          expected: 'helloworld!!',
+        },
+        newLineAndWhitespace: {
+          data: new Map([['text/plain', ' hello \r\n world \n ! \r ! ']]),
+          expected: 'helloworld!!',
+        },
       });
     });
   });

diff --git a/packages/nodes/mention/src/withMention.ts b/packages/nodes/mention/src/withMention.ts
@@ -42,8 +42,16 @@ export const withMention = <
     insertText: _insertText,
     deleteBackward,
     insertFragment: _insertFragment,
+    insertTextData,
   } = editor;
 
+  const stripNewLineAndTrim: (text: string) => string = (text) => {
+    return text
+      .split(/\r\n|\r|\n/)
+      .map((line) => line.trim())
+      .join('');
+  };
+
   editor.insertFragment = (fragment) => {
     const inMentionInput = findMentionInput(editor) !== undefined;
     if (!inMentionInput) {
@@ -52,10 +60,26 @@ export const withMention = <
 
     return insertText(
       editor,
-      fragment.map((node) => getNodeString(node)).join('')
+      fragment.map((node) => stripNewLineAndTrim(getNodeString(node))).join('')
     );
   };
 
+  editor.insertTextData = (data) => {
+    const inMentionInput = findMentionInput(editor) !== undefined;
+    if (!inMentionInput) {
+      return insertTextData(data);
+    }
+
+    const text = data.getData('text/plain');
+    if (!text) {
+      return false;
+    }
+
+    editor.insertText(stripNewLineAndTrim(text));
+
+    return true;
+  };
+
   editor.deleteBackward = (unit) => {
     const currentMentionInput = findMentionInput(editor);
     if (currentMentionInput && getNodeString(currentMentionInput[0]) === '') {

diff --git a/packages/test-utils/src/createDataTransfer.ts b/packages/test-utils/src/createDataTransfer.ts
@@ -1,5 +1,9 @@
-export const createDataTransfer = (dataMap: Map<string, any> = new Map()) =>
+export type DataTransferDataType = 'text/plain' | 'text/html' | string;
+
+export type DataTransferDataMap = Map<DataTransferDataType, unknown>;
+
+export const createDataTransfer = (dataMap: DataTransferDataMap = new Map()) =>
   (({
-    getData: (key: string) => dataMap.get(key) ?? '',
-    setData: (key: string, value: string) => dataMap.set(key, value),
+    getData: (type: string) => dataMap.get(type) ?? '',
+    setData: (type: string, value: string) => dataMap.set(type, value),
   } as unknown) as DataTransfer);