fix: Highlighted text selection cleared on shift-click (#6412)

* apply bypass for clearing text selection for shift-clicking a component being edited

* did not have prettier extension working properly

---------

Co-authored-by: Chris Benjamin <cbenjamin@stormseed.com>

packages/core/src/editor/model/Editor.ts

@@ -532,10 +532,14 @@ export default class EditorModel extends Model {
         }
       }
 
-      // Hanlde multiple selection
+      // Handle multiple selection
       if (ctrlKey && mltSel) {
         return this.toggleSelected(model);
       } else if (shiftKey && mltSel) {
+        if (this.isEditing()) {
+          // Fixes #6345 where a shift click while editing text should not assume a selection of a component
+          return;
+        }
         this.clearSelection(this.Canvas.getWindow());
         const coll = model.collection;
         const index = model.index();

packages/core/test/specs/editor/index.ts

@@ -107,4 +107,86 @@ describe('Editor', () => {
     expect(umStack.length).toBe(3);
     expect(keys(all).length).toBe(DEFAULT_CMPS);
   });
+
+  test('One component can be selected at a time without shift', () => {
+    const all = editor.Components.allById();
+    const em = editor.em;
+    em.getConfig().multipleSelection = true;
+    const wrapper = editor.getWrapper()!;
+    const added = wrapper.append(`
+      <div>Component 1</div>
+      <div>Component 2</div>
+    `);
+    em.setSelected(added[0]);
+    em.setSelected(added[1]);
+    expect(editor.getSelectedAll().length).toBe(1);
+  });
+
+  test('Shift key should allow selecting multiple components', () => {
+    const all = editor.Components.allById();
+    const em = editor.em;
+    em.getConfig().multipleSelection = true;
+    const wrapper = editor.getWrapper()!;
+    const added = wrapper.append(`
+      <div>Component 1</div>
+      <div>Component 2</div>
+    `);
+
+    const callSelectedOptions = {
+      event: {
+        shiftKey: true,
+      },
+    };
+
+    em.setSelected(added[0], callSelectedOptions);
+    em.setSelected(added[1], callSelectedOptions);
+    expect(editor.getSelectedAll().length).toBe(2);
+  });
+
+  test('Shift key selecting a component that is being edited should should be ignored', () => {
+    const all = editor.Components.allById();
+    const em = editor.em;
+    em.getConfig().multipleSelection = true;
+    const wrapper = editor.getWrapper()!;
+    const added = wrapper.append(`
+      <div>Component 1</div>
+      <div>Component 2</div>
+    `);
+
+    const callSelectedOptions = {
+      event: {
+        shiftKey: true,
+      },
+    };
+
+    const firstComponent = all[keys(all)[0]];
+    firstComponent.em.setEditing(true);
+    em.setSelected(added[0], callSelectedOptions);
+    expect(editor.getSelectedAll().length).toBe(0);
+  });
+
+  test.skip('Shift key selecting a component that is being edited should not clear any text selections', () => {
+    const all = editor.Components.allById();
+    const em = editor.em;
+    em.getConfig().multipleSelection = true;
+    const wrapper = editor.getWrapper()!;
+    const added = wrapper.append(`
+      <div>Component 1</div>
+      <div>Component 2</div>
+    `);
+
+    const callSelectedOptions = {
+      event: {
+        shiftKey: true,
+      },
+    };
+
+    const firstComponent = all[keys(all)[0]];
+    firstComponent.em.setEditing(true);
+    // TODO: highlight the text of the first component
+
+    em.setSelected(added[0], callSelectedOptions);
+    // TODO: check if the text of the first component is still highlighted
+    expect(editor.getSelectedAll().length).toBe(0);
+  });
 });