Implement document drag and drop3

cypress/e2e/editor/basic/panel_selection.cy.ts

@@ -0,0 +1,158 @@
+import { AuthTestUtils } from '../../../support/auth-utils';
+import { EditorSelectors, SlashCommandSelectors, waitForReactUpdate } from '../../../support/selectors';
+import { generateRandomEmail } from '../../../support/test-config';
+
+describe('Panel Selection - Shift+Arrow Keys', () => {
+  const authUtils = new AuthTestUtils();
+  const testEmail = generateRandomEmail();
+
+  before(() => {
+    cy.viewport(1280, 720);
+  });
+
+  beforeEach(() => {
+    cy.on('uncaught:exception', () => false);
+
+    cy.session(testEmail, () => {
+      authUtils.signInWithTestUrl(testEmail);
+    }, {
+      validate: () => {
+        cy.window().then((win) => {
+          const token = win.localStorage.getItem('af_auth_token');
+          expect(token).to.be.ok;
+        });
+      }
+    });
+
+    cy.visit('/app');
+    cy.url({ timeout: 30000 }).should('include', '/app');
+    cy.contains('Getting started', { timeout: 10000 }).should('be.visible').click();
+    cy.wait(2000);
+
+    EditorSelectors.firstEditor().click({ force: true });
+    cy.focused().type('{selectall}{backspace}');
+    waitForReactUpdate(500);
+  });
+
+  describe('Slash Panel Selection', () => {
+    it('should allow Shift+Arrow selection when slash panel is open', () => {
+      // Type some text first
+      cy.focused().type('Hello World');
+      waitForReactUpdate(200);
+
+      // Open slash panel
+      cy.focused().type('/');
+      waitForReactUpdate(500);
+
+      // Verify slash panel is open
+      SlashCommandSelectors.slashPanel().should('be.visible');
+
+      // Type search text
+      cy.focused().type('head');
+      waitForReactUpdate(200);
+
+      // Now try Shift+Left to select text - this should work after the fix
+      cy.focused().type('{shift}{leftArrow}{leftArrow}{leftArrow}{leftArrow}');
+      waitForReactUpdate(200);
+
+      // The selection should have happened - verify by typing replacement text
+      // Close panel first
+      cy.focused().type('{esc}');
+      waitForReactUpdate(200);
+
+      // The text "head" should still be visible (since we selected but didn't delete)
+      EditorSelectors.slateEditor().should('contain.text', 'head');
+    });
+
+    it('should allow Shift+Right selection when slash panel is open', () => {
+      // Type some text first
+      cy.focused().type('Test Content');
+      waitForReactUpdate(200);
+
+      // Move cursor to after "Test "
+      cy.focused().type('{home}');
+      cy.focused().type('{rightArrow}{rightArrow}{rightArrow}{rightArrow}{rightArrow}');
+      waitForReactUpdate(200);
+
+      // Open slash panel
+      cy.focused().type('/');
+      waitForReactUpdate(500);
+
+      // Verify slash panel is open
+      SlashCommandSelectors.slashPanel().should('be.visible');
+
+      // Type search text
+      cy.focused().type('para');
+      waitForReactUpdate(200);
+
+      // Try Shift+Right to extend selection
+      cy.focused().type('{shift}{rightArrow}{rightArrow}');
+      waitForReactUpdate(200);
+
+      // Close panel
+      cy.focused().type('{esc}');
+      waitForReactUpdate(200);
+
+      // Verify editor still has content
+      EditorSelectors.slateEditor().should('contain.text', 'Test');
+    });
+
+    it('should still block plain Arrow keys when panel is open', () => {
+      // Type some text
+      cy.focused().type('Sample Text');
+      waitForReactUpdate(200);
+
+      // Open slash panel
+      cy.focused().type('/');
+      waitForReactUpdate(500);
+
+      // Verify slash panel is open
+      SlashCommandSelectors.slashPanel().should('be.visible');
+
+      // Type search text
+      cy.focused().type('heading');
+      waitForReactUpdate(200);
+
+      // Press plain ArrowLeft (without Shift) - should be blocked
+      cy.focused().type('{leftArrow}');
+      waitForReactUpdate(200);
+
+      // Panel should still be open (cursor didn't move away from trigger position)
+      SlashCommandSelectors.slashPanel().should('be.visible');
+
+      // Close panel
+      cy.focused().type('{esc}');
+      waitForReactUpdate(200);
+
+      // Verify content
+      EditorSelectors.slateEditor().should('contain.text', 'Sample Text');
+    });
+  });
+
+  describe('Mention Panel Selection', () => {
+    it('should allow Shift+Arrow selection when mention panel is open', () => {
+      // Type some text first
+      cy.focused().type('Hello ');
+      waitForReactUpdate(200);
+
+      // Open mention panel with @
+      cy.focused().type('@');
+      waitForReactUpdate(500);
+
+      // Type to search
+      cy.focused().type('test');
+      waitForReactUpdate(200);
+
+      // Try Shift+Left to select - should work after fix
+      cy.focused().type('{shift}{leftArrow}{leftArrow}');
+      waitForReactUpdate(200);
+
+      // Close panel
+      cy.focused().type('{esc}');
+      waitForReactUpdate(200);
+
+      // Editor should still have content
+      EditorSelectors.slateEditor().should('contain.text', 'Hello');
+    });
+  });
+});

cypress/e2e/editor/basic/text_editing.cy.ts

@@ -1,5 +1,5 @@
 import { AuthTestUtils } from '../../../support/auth-utils';
-import { EditorSelectors, waitForReactUpdate } from '../../../support/selectors';
+import { EditorSelectors, waitForReactUpdate, byTestId } from '../../../support/selectors';
 import { generateRandomEmail, getCmdKey, getWordJumpKey } from '../../../support/test-config';
 
 describe('Basic Text Editing', () => {
@@ -54,7 +54,7 @@ describe('Basic Text Editing', () => {
       // If trigger doesn't work (often Slate relies on beforeInput), try one more fallback:
       // type('{del}') again but assume it might need a retry or check.
       // Actually, let's trust type('{del}') but double check focus.
-      cy.get('[data-slate-editor="true"]').focus().type('{del}');
+      EditorSelectors.slateEditor().focus().type('{del}');
       waitForReactUpdate(500);
 
       // "Test |ext"
@@ -153,8 +153,8 @@ describe('Basic Text Editing', () => {
 
       // Use robust selection via data-testid if available, or fallback to text with wait
       cy.get('body').then($body => {
-        if ($body.find('[data-testid="slash-menu-heading1"]').length > 0) {
-          cy.get('[data-testid="slash-menu-heading1"]').click();
+        if ($body.find(byTestId('slash-menu-heading1')).length > 0) {
+          cy.get(byTestId('slash-menu-heading1')).click();
         } else if ($body.text().includes('Heading 1')) {
           cy.contains('Heading 1').first().click();
         } else {
@@ -192,8 +192,8 @@ describe('Basic Text Editing', () => {
       waitForReactUpdate(1000);
 
       cy.get('body').then($body => {
-        if ($body.find('[data-testid="slash-menu-bulletedList"]').length > 0) {
-          cy.get('[data-testid="slash-menu-bulletedList"]').click();
+        if ($body.find(byTestId('slash-menu-bulletedList')).length > 0) {
+          cy.get(byTestId('slash-menu-bulletedList')).click();
         } else if ($body.text().includes('Bulleted list')) {
           cy.contains('Bulleted list').first().click();
         } else {

cypress/e2e/editor/collaboration/tab_sync.cy.ts

@@ -73,7 +73,7 @@ describe('Editor Tab Synchronization', () => {
     // 1. Type in Main Window
     cy.log('Typing in Main Window');
     // Click topLeft to avoid iframe overlay at bottom right
-    cy.get('[data-slate-editor="true"]').first().click('topLeft', { force: true }).type('Hello from Main');
+    EditorSelectors.slateEditor().first().click('topLeft', { force: true }).type('Hello from Main');
     waitForReactUpdate(2000); // Wait longer for sync
 
     // 2. Verify in Iframe with longer timeout
@@ -86,6 +86,6 @@ describe('Editor Tab Synchronization', () => {
     waitForReactUpdate(2000);
 
     // 4. Verify in Main Window with longer timeout
-    cy.get('[data-slate-editor="true"]', { timeout: 15000 }).should('contain.text', 'Hello from Main and Iframe');
+    EditorSelectors.slateEditor({ timeout: 15000 }).should('contain.text', 'Hello from Main and Iframe');
   });
 });

cypress/e2e/editor/commands/editor_commands.cy.ts

@@ -1,5 +1,5 @@
 import { AuthTestUtils } from '../../../support/auth-utils';
-import { EditorSelectors, waitForReactUpdate } from '../../../support/selectors';
+import { BlockSelectors, EditorSelectors, waitForReactUpdate } from '../../../support/selectors';
 import { generateRandomEmail } from '../../../support/test-config';
 
 describe('Editor Commands', () => {
@@ -79,7 +79,7 @@ describe('Editor Commands', () => {
     cy.focused().type('{shift}{enter}');
     waitForReactUpdate(200);
     cy.focused().type('Line 2');
-    cy.get('[data-block-type="paragraph"]').should('have.length', 1);
+    BlockSelectors.blockByType('paragraph').should('have.length', 1);
     cy.contains('Line 1').should('be.visible');
     cy.contains('Line 2').should('be.visible');
   });

cypress/e2e/editor/cursor/editor_interaction.cy.ts

@@ -1,5 +1,5 @@
 import { AuthTestUtils } from '../../../support/auth-utils';
-import { EditorSelectors, waitForReactUpdate } from '../../../support/selectors';
+import { BlockSelectors, EditorSelectors, waitForReactUpdate } from '../../../support/selectors';
 import { generateRandomEmail, getCmdKey } from '../../../support/test-config';
 
 describe('Editor Navigation & Interaction', () => {
@@ -43,11 +43,11 @@ describe('Editor Navigation & Interaction', () => {
       waitForReactUpdate(200);
       cy.focused().type('X');
       waitForReactUpdate(200);
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'XStart Middle End');
+      EditorSelectors.slateEditor().should('contain.text', 'XStart Middle End');
       cy.focused().type('{selectall}{rightArrow}');
       waitForReactUpdate(200);
       cy.focused().type('Y');
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'XStart Middle EndY');
+      EditorSelectors.slateEditor().should('contain.text', 'XStart Middle EndY');
     });
 
     it('should navigate character by character', () => {
@@ -64,7 +64,7 @@ describe('Editor Navigation & Interaction', () => {
       cy.focused().type('-');
 
       // Expect "W-ord"
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'W-ord');
+      EditorSelectors.slateEditor().should('contain.text', 'W-ord');
     });
 
     it('should select word on double click', () => {
@@ -80,8 +80,8 @@ describe('Editor Navigation & Interaction', () => {
       cy.focused().type('Replaced');
 
       // 'SelectMe' should be gone, 'Replaced' should be present
-      cy.get('[data-slate-editor="true"]').should('contain.text', 'Replaced');
-      cy.get('[data-slate-editor="true"]').should('not.contain.text', 'SelectMe');
+      EditorSelectors.slateEditor().should('contain.text', 'Replaced');
+      EditorSelectors.slateEditor().should('not.contain.text', 'SelectMe');
     });
 
     it('should navigate up/down between blocks', () => {
@@ -131,8 +131,8 @@ describe('Editor Navigation & Interaction', () => {
       // Type to verify focus
       cy.focused().type(' UpTest');
       // Verify 'UpTest' appears in Paragraph block and NOT in List Block
-      cy.get('[data-block-type="paragraph"]').should('contain.text', 'UpTest');
-      cy.get('[data-block-type="bulleted_list"]').should('not.contain.text', 'UpTest');
+      BlockSelectors.blockByType('paragraph').should('contain.text', 'UpTest');
+      BlockSelectors.blockByType('bulleted_list').should('not.contain.text', 'UpTest');
 
       // Test Navigation: Heading -> Paragraph
       // Click Heading first to change focus
@@ -144,8 +144,8 @@ describe('Editor Navigation & Interaction', () => {
 
       cy.focused().type(' DownTest');
       // Verify 'DownTest' appears in Paragraph block and NOT in Heading Block
-      cy.get('[data-block-type="paragraph"]').should('contain.text', 'DownTest');
-      cy.get('[data-block-type="heading"]').should('not.contain.text', 'DownTest');
+      BlockSelectors.blockByType('paragraph').should('contain.text', 'DownTest');
+      BlockSelectors.blockByType('heading').should('not.contain.text', 'DownTest');
     });
   });
 
@@ -187,7 +187,7 @@ describe('Editor Navigation & Interaction', () => {
   describe('Style Interaction', () => {
     it.skip('should persist bold style when typing inside bold text', () => {
       cy.focused().type('Normal ');
-      cy.get('[data-slate-editor="true"]').click();
+      EditorSelectors.slateEditor().click();
       cy.focused().type(`${cmdKey}b`);
       waitForReactUpdate(200);
       cy.focused().type('Bold');
@@ -198,7 +198,7 @@ describe('Editor Navigation & Interaction', () => {
     });
 
     it('should reset style when creating a new paragraph', () => {
-      cy.get('[data-slate-editor="true"]').click();
+      EditorSelectors.slateEditor().click();
       cy.focused().type(`${cmdKey}b`);
       waitForReactUpdate(200);
       cy.focused().type('Heading Bold');