diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js
index 14f921866d..8bb0d66698 100644
--- a/services/web/frontend/js/ide/editor/EditorManager.js
+++ b/services/web/frontend/js/ide/editor/EditorManager.js
@@ -56,6 +56,10 @@ export default EditorManager = (function () {
         },
       }
 
+      window.addEventListener('editor:insert-symbol', event => {
+        this.$scope.editor.insertSymbol(event.detail)
+      })
+
       this.$scope.$on('entity:selected', (event, entity) => {
         if (this.$scope.ui.view !== 'history' && entity.type === 'doc') {
           return this.openDoc(entity)
diff --git a/services/web/frontend/js/shared/context/editor-context.js b/services/web/frontend/js/shared/context/editor-context.js
index 119a188041..ed582f2bfd 100644
--- a/services/web/frontend/js/shared/context/editor-context.js
+++ b/services/web/frontend/js/shared/context/editor-context.js
@@ -77,7 +77,6 @@ export function EditorProvider({ children, settings }) {
   const [permissionsLevel] = useScopeValue('permissionsLevel')
   const [showSymbolPalette] = useScopeValue('editor.showSymbolPalette')
   const [toggleSymbolPalette] = useScopeValue('editor.toggleSymbolPalette')
-  const [insertSymbol] = useScopeValue('editor.insertSymbol')
 
   useEffect(() => {
     if (ide?.socket) {
@@ -119,6 +118,14 @@ export function EditorProvider({ children, settings }) {
     )
   }, [projectName, setTitle])
 
+  const insertSymbol = useCallback(symbol => {
+    window.dispatchEvent(
+      new CustomEvent('editor:insert-symbol', {
+        detail: symbol,
+      })
+    )
+  }, [])
+
   const value = useMemo(
     () => ({
       cobranding,