diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts index 077474478..37e70767a 100644 --- a/packages/core/src/editor/model/Editor.ts +++ b/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(); diff --git a/packages/core/test/specs/editor/index.ts b/packages/core/test/specs/editor/index.ts index 6b85abe4b..0d0ae367d 100644 --- a/packages/core/test/specs/editor/index.ts +++ b/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(` +
Component 1
+
Component 2
+ `); + 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(` +
Component 1
+
Component 2
+ `); + + 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(` +
Component 1
+
Component 2
+ `); + + 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(` +
Component 1
+
Component 2
+ `); + + 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); + }); });