Handle paste events for images and text properly (#7679)

* enable eval source maps for debugging

* split image and text paste handling
better event handling

* change back source maps

* image takes precedence over text

* break up notebook entry functions for re-use

* create hotkeys utils
add clipboard functions

* add notebook paste test

* add test for pasting to selected but not editing entry

* link tests to issue

* jsdoc addition

* jsdocs

* no need to import then export

Co-authored-by: Jesse Mazzella <[email protected]>

* fix changed path

---------

Co-authored-by: Jesse Mazzella <[email protected]>

Author: davetsay

e2e/helper/hotkeys/clipboard.js

@@ -0,0 +1,47 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const isMac = process.platform === 'darwin';
+const modifier = isMac ? 'Meta' : 'Control';
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function selectAll(page) {
+  await page.keyboard.press(`${modifier}+KeyA`);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function copy(page) {
+  await page.keyboard.press(`${modifier}+KeyC`);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function paste(page) {
+  await page.keyboard.press(`${modifier}+KeyV`);
+}
+
+export { copy, paste, selectAll };

e2e/helper/hotkeys/hotkeys.js

@@ -0,0 +1,23 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export * from './clipboard.js';

e2e/helper/notebookUtils.js

@@ -28,14 +28,26 @@ import { fileURLToPath } from 'url';
 
 /**
  * @param {import('@playwright/test').Page} page
+ * @param {string} text
  */
 async function enterTextEntry(page, text) {
-  // Click the 'Add Notebook Entry' area
+  await addNotebookEntry(page);
+  await enterTextInLastEntry(page, text);
+  await commitEntry(page);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function addNotebookEntry(page) {
   await page.locator(NOTEBOOK_DROP_AREA).click();
+}
 
-  // enter text
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enterTextInLastEntry(page, text) {
   await page.getByLabel('Notebook Entry Input').last().fill(text);
-  await commitEntry(page);
 }
 
 /**
@@ -140,10 +152,13 @@ async function createNotebookEntryAndTags(page, iterations = 1) {
 }
 
 export {
+  addNotebookEntry,
+  commitEntry,
   createNotebookAndEntry,
   createNotebookEntryAndTags,
   dragAndDropEmbed,
   enterTextEntry,
+  enterTextInLastEntry,
   lockPage,
   startAndAddRestrictedNotebookObject
 };

e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js

@@ -27,6 +27,7 @@ This test suite is dedicated to tests which verify the basic operations surround
 import { fileURLToPath } from 'url';
 
 import { createDomainObjectWithDefaults } from '../../../../appActions.js';
+import { copy, paste, selectAll } from '../../../../helper/hotkeys/hotkeys.js';
 import * as nbUtils from '../../../../helper/notebookUtils.js';
 import { expect, streamToString, test } from '../../../../pluginFixtures.js';
 
@@ -546,4 +547,53 @@ test.describe('Notebook entry tests', () => {
     );
     await expect(secondLineOfBlockquoteText).toBeVisible();
   });
+
+  /**
+   *  Paste into notebook entry tests
+   */
+  test('Can paste text into a notebook entry', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7686'
+    });
+    const TEST_TEXT = 'This is a test';
+    const iterations = 20;
+    const EXPECTED_TEXT = TEST_TEXT.repeat(iterations);
+
+    await page.goto(notebookObject.url);
+
+    await nbUtils.addNotebookEntry(page);
+    await nbUtils.enterTextInLastEntry(page, TEST_TEXT);
+    await selectAll(page);
+    await copy(page);
+    for (let i = 0; i < iterations; i++) {
+      await paste(page);
+    }
+    await nbUtils.commitEntry(page);
+
+    await expect(page.locator(`text="${EXPECTED_TEXT}"`)).toBeVisible();
+  });
+
+  test('Prevents pasting text into selected notebook entry if not editing', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7686'
+    });
+    const TEST_TEXT = 'This is a test';
+
+    await page.goto(notebookObject.url);
+
+    await nbUtils.addNotebookEntry(page);
+    await nbUtils.enterTextInLastEntry(page, TEST_TEXT);
+    await selectAll(page);
+    await copy(page);
+    await paste(page);
+    await nbUtils.commitEntry(page);
+
+    // This should not paste text into the entry
+    await paste(page);
+
+    await expect(await page.locator(`text="${TEST_TEXT.repeat(1)}"`).count()).toEqual(1);
+    await expect(await page.locator(`text="${TEST_TEXT.repeat(2)}"`).count()).toEqual(0);
+  });
 });

src/plugins/notebook/components/NotebookEntry.vue

@@ -31,7 +31,7 @@
     @drop.capture="cancelEditMode"
     @drop.prevent="dropOnEntry"
     @click="selectAndEmitEntry($event, entry)"
-    @paste="addImageFromPaste"
+    @paste="handlePaste"
   >
     <div class="c-ne__time-and-content">
       <div class="c-ne__time-and-creator-and-delete">
@@ -368,6 +368,28 @@ export default {
     }
   },
   methods: {
+    handlePaste(event) {
+      const clipboardItems = Array.from(
+        (event.clipboardData || event.originalEvent.clipboardData).items
+      );
+      const hasClipboardText = clipboardItems.some(
+        (clipboardItem) => clipboardItem.kind === 'string'
+      );
+      const clipboardImages = clipboardItems.filter(
+        (clipboardItem) => clipboardItem.kind === 'file' && clipboardItem.type.includes('image')
+      );
+      const hasClipboardImages = clipboardImages?.length > 0;
+
+      if (hasClipboardImages) {
+        if (hasClipboardText) {
+          console.warn('Image and text kinds found in paste. Only processing images.');
+        }
+
+        this.addImageFromPaste(clipboardImages, event);
+      } else if (hasClipboardText) {
+        this.addTextFromPaste(event);
+      }
+    },
     async addNewEmbed(objectPath) {
       const bounds = this.openmct.time.bounds();
       const snapshotMeta = {
@@ -384,32 +406,34 @@ export default {
 
       this.manageEmbedLayout();
     },
-    async addImageFromPaste(event) {
-      const clipboardItems = Array.from(
-        (event.clipboardData || event.originalEvent.clipboardData).items
-      );
-      const hasImage = clipboardItems.some(
-        (clipboardItem) => clipboardItem.type.includes('image') && clipboardItem.kind === 'file'
-      );
-      // If the clipboard contained an image, prevent the paste event from reaching the textarea.
-      if (hasImage) {
+    addTextFromPaste(event) {
+      if (!this.editMode) {
         event.preventDefault();
       }
+    },
+    async addImageFromPaste(clipboardImages, event) {
+      event?.preventDefault();
+      let updated = false;
+
       await Promise.all(
-        Array.from(clipboardItems).map(async (clipboardItem) => {
-          const isImage = clipboardItem.type.includes('image') && clipboardItem.kind === 'file';
-          if (isImage) {
-            const imageFile = clipboardItem.getAsFile();
-            const imageEmbed = await createNewImageEmbed(imageFile, this.openmct, imageFile?.name);
-            if (!this.entry.embeds) {
-              this.entry.embeds = [];
-            }
-            this.entry.embeds.push(imageEmbed);
+        Array.from(clipboardImages).map(async (clipboardImage) => {
+          const imageFile = clipboardImage.getAsFile();
+          const imageEmbed = await createNewImageEmbed(imageFile, this.openmct, imageFile?.name);
+
+          if (!this.entry.embeds) {
+            this.entry.embeds = [];
           }
+
+          this.entry.embeds.push(imageEmbed);
+
+          updated = true;
         })
       );
-      this.manageEmbedLayout();
-      this.timestampAndUpdate();
+
+      if (updated) {
+        this.manageEmbedLayout();
+        this.timestampAndUpdate();
+      }
     },
     convertMarkDownToHtml(text = '') {
       let markDownHtml = this.marked.parse(text, {