fix: remove toolbar window listeners on unmount

packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js

@@ -0,0 +1,110 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent, ref, KeepAlive } from 'vue';
+import Toolbar from './Toolbar.vue';
+
+const ToolbarKeepAliveHost = defineComponent({
+  components: { KeepAlive, Toolbar },
+  setup() {
+    const visible = ref(true);
+    return { visible };
+  },
+  template: '<KeepAlive><Toolbar v-if="visible" /></KeepAlive>',
+});
+
+function createMockToolbar() {
+  return {
+    config: {
+      toolbarGroups: ['left', 'center', 'right'],
+      toolbarButtonsExclude: [],
+    },
+    getToolbarItemByGroup: () => [],
+    getToolbarItemByName: () => null,
+    onToolbarResize: vi.fn(),
+    emitCommand: vi.fn(),
+    overflowItems: [],
+    activeEditor: null,
+  };
+}
+
+describe('Toolbar', () => {
+  it('removes resize and keydown listeners on unmount (not only on KeepAlive deactivate)', () => {
+    const mockToolbar = createMockToolbar();
+    const addSpy = vi.spyOn(window, 'addEventListener');
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+
+    const wrapper = mount(Toolbar, {
+      global: {
+        stubs: { ButtonGroup: true },
+        plugins: [
+          (app) => {
+            app.config.globalProperties.$toolbar = mockToolbar;
+          },
+        ],
+      },
+    });
+
+    const resizeHandler = addSpy.mock.calls.find((c) => c[0] === 'resize')?.[1];
+    const keydownHandler = addSpy.mock.calls.find((c) => c[0] === 'keydown')?.[1];
+    expect(resizeHandler).toBeTypeOf('function');
+    expect(keydownHandler).toBeTypeOf('function');
+
+    removeSpy.mockClear();
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', resizeHandler);
+    expect(removeSpy).toHaveBeenCalledWith('keydown', keydownHandler);
+
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
+
+  it('removes window listeners on KeepAlive deactivate and restores them on activate', async () => {
+    const mockToolbar = createMockToolbar();
+    const addSpy = vi.spyOn(window, 'addEventListener');
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+
+    const wrapper = mount(ToolbarKeepAliveHost, {
+      global: {
+        stubs: { ButtonGroup: true },
+        plugins: [
+          (app) => {
+            app.config.globalProperties.$toolbar = mockToolbar;
+          },
+        ],
+      },
+    });
+
+    const resizeHandler = addSpy.mock.calls.find((c) => c[0] === 'resize')?.[1];
+    const keydownHandler = addSpy.mock.calls.find((c) => c[0] === 'keydown')?.[1];
+    expect(resizeHandler).toBeTypeOf('function');
+    expect(keydownHandler).toBeTypeOf('function');
+
+    addSpy.mockClear();
+    removeSpy.mockClear();
+
+    wrapper.vm.visible = false;
+    await wrapper.vm.$nextTick();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', resizeHandler);
+    expect(removeSpy).toHaveBeenCalledWith('keydown', keydownHandler);
+
+    addSpy.mockClear();
+    removeSpy.mockClear();
+
+    wrapper.vm.visible = true;
+    await wrapper.vm.$nextTick();
+
+    expect(addSpy).toHaveBeenCalledWith('resize', resizeHandler);
+    expect(addSpy).toHaveBeenCalledWith('keydown', keydownHandler);
+
+    removeSpy.mockClear();
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', resizeHandler);
+    expect(removeSpy).toHaveBeenCalledWith('keydown', keydownHandler);
+
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
+});

packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue

@@ -1,5 +1,14 @@
 <script setup>
-import { ref, getCurrentInstance, onMounted, onDeactivated, nextTick, computed } from 'vue';
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  onActivated,
+  onDeactivated,
+  onBeforeUnmount,
+  nextTick,
+  computed,
+} from 'vue';
 import { throttle } from './helpers.js';
 import ButtonGroup from './ButtonGroup.vue';
 
@@ -40,16 +49,6 @@ const getFilteredItems = (position) => {
   return proxy.$toolbar.getToolbarItemByGroup(position).filter((item) => !excludeButtonsList.includes(item.name.value));
 };
 
-onMounted(() => {
-  window.addEventListener('resize', onResizeThrottled);
-  window.addEventListener('keydown', onKeyDown);
-});
-
-onDeactivated(() => {
-  window.removeEventListener('resize', onResizeThrottled);
-  window.removeEventListener('keydown', onKeyDown);
-});
-
 const onKeyDown = async (e) => {
   if (e.metaKey && e.key === 'f') {
     const searchItem = proxy.$toolbar.getToolbarItemByName('search');
@@ -70,6 +69,22 @@ const onWindowResized = async () => {
 };
 const onResizeThrottled = throttle(onWindowResized, 300);
 
+function teardownWindowListeners() {
+  window.removeEventListener('resize', onResizeThrottled);
+  window.removeEventListener('keydown', onKeyDown);
+}
+
+function setupWindowListeners() {
+  teardownWindowListeners();
+  window.addEventListener('resize', onResizeThrottled);
+  window.addEventListener('keydown', onKeyDown);
+}
+
+onMounted(setupWindowListeners);
+onActivated(setupWindowListeners);
+onDeactivated(teardownWindowListeners);
+onBeforeUnmount(teardownWindowListeners);
+
 const handleCommand = ({ item, argument, option }) => {
   proxy.$toolbar.emitCommand({ item, argument, option });
 };