From 9dcea3fe25324a199b688526286214488a4b0957 Mon Sep 17 00:00:00 2001
From: Artur Quirino <artur.pquirino@gmail.com>
Date: Sat, 11 Apr 2026 10:46:04 -0300
Subject: [PATCH 1/3] fix(super-editor): remove toolbar window listeners on
 unmount

---
 .../v1/components/toolbar/Toolbar.test.js     | 51 +++++++++++++++++++
 .../editors/v1/components/toolbar/Toolbar.vue | 25 +++++----
 2 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js

diff --git a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js
new file mode 100644
index 0000000000..532f9b1b73
--- /dev/null
+++ b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js
@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Toolbar from './Toolbar.vue';
+
+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();
+  });
+});
diff --git a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
index d2a03efca6..ca08361fea 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, getCurrentInstance, onMounted, onDeactivated, nextTick, computed } from 'vue';
+import { ref, getCurrentInstance, onMounted, onDeactivated, onBeforeUnmount, nextTick, computed } from 'vue';
 import { throttle } from './helpers.js';
 import ButtonGroup from './ButtonGroup.vue';
 
@@ -40,16 +40,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 +60,19 @@ const onWindowResized = async () => {
 };
 const onResizeThrottled = throttle(onWindowResized, 300);
 
+function teardownWindowListeners() {
+  window.removeEventListener('resize', onResizeThrottled);
+  window.removeEventListener('keydown', onKeyDown);
+}
+
+onMounted(() => {
+  window.addEventListener('resize', onResizeThrottled);
+  window.addEventListener('keydown', onKeyDown);
+});
+
+onDeactivated(teardownWindowListeners);
+onBeforeUnmount(teardownWindowListeners);
+
 const handleCommand = ({ item, argument, option }) => {
   proxy.$toolbar.emitCommand({ item, argument, option });
 };

From 1b0bb80a1e2e41b4d84391ebafbbaa15f49d668c Mon Sep 17 00:00:00 2001
From: Artur Quirino <artur.pquirino@gmail.com>
Date: Tue, 14 Apr 2026 08:16:50 -0300
Subject: [PATCH 2/3] fix: setup window listeners on onMounted and onActivated

---
 .../editors/v1/components/toolbar/Toolbar.vue  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
index ca08361fea..e03496da5c 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
+++ b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.vue
@@ -1,5 +1,14 @@
 <script setup>
-import { ref, getCurrentInstance, onMounted, onDeactivated, onBeforeUnmount, 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';
 
@@ -65,11 +74,14 @@ function teardownWindowListeners() {
   window.removeEventListener('keydown', onKeyDown);
 }
 
-onMounted(() => {
+function setupWindowListeners() {
+  teardownWindowListeners();
   window.addEventListener('resize', onResizeThrottled);
   window.addEventListener('keydown', onKeyDown);
-});
+}
 
+onMounted(setupWindowListeners);
+onActivated(setupWindowListeners);
 onDeactivated(teardownWindowListeners);
 onBeforeUnmount(teardownWindowListeners);
 

From 3e53c754677644c2bcd0b7055784b82c36659f85 Mon Sep 17 00:00:00 2001
From: Artur Quirino <artur.pquirino@gmail.com>
Date: Tue, 14 Apr 2026 08:17:03 -0300
Subject: [PATCH 3/3] test: assert Toolbar window listener cleanup

---
 .../v1/components/toolbar/Toolbar.test.js     | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js
index 532f9b1b73..791b030c45 100644
--- a/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js
+++ b/packages/super-editor/src/editors/v1/components/toolbar/Toolbar.test.js
@@ -1,7 +1,17 @@
 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: {
@@ -48,4 +58,53 @@ describe('Toolbar', () => {
     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();
+  });
 });