diff --git a/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js b/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js
index 9132320116..b5441bb740 100644
--- a/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js
+++ b/services/web/frontend/js/features/file-tree/contexts/file-tree-actionable.js
@@ -4,6 +4,7 @@ import React, {
   useMemo,
   useReducer,
   useContext,
+  useEffect,
 } from 'react'
 import PropTypes from 'prop-types'
 
@@ -323,6 +324,22 @@ export function FileTreeActionableProvider({ hasWritePermissions, children }) {
     dispatch({ type: ACTION_TYPES.CANCEL })
   }, [])
 
+  // listen for `file-tree.start-creating` events
+  useEffect(() => {
+    function handleEvent(event) {
+      dispatch({
+        type: ACTION_TYPES.START_CREATE_FILE,
+        newFileCreateMode: event.detail.mode,
+      })
+    }
+
+    window.addEventListener('file-tree.start-creating', handleEvent)
+
+    return () => {
+      window.removeEventListener('file-tree.start-creating', handleEvent)
+    }
+  }, [])
+
   const value = {
     canDelete: selectedEntityIds.size > 0,
     canRename: selectedEntityIds.size === 1,
diff --git a/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js b/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js
index 4dc29288a0..361d7431d2 100644
--- a/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js
+++ b/services/web/frontend/js/ide/file-tree/controllers/FileTreeController.js
@@ -19,29 +19,11 @@ import App from '../../../base'
 App.controller(
   'FileTreeController',
   function ($scope, $modal, ide, $rootScope) {
-    $scope.openNewDocModal = reactBridgeParentFolderId =>
-      $modal.open({
-        templateUrl: 'newFileModalTemplate',
-        controller: 'NewFileModalController',
-        size: 'lg',
-        resolve: {
-          parent_folder() {
-            if (reactBridgeParentFolderId) {
-              return { id: reactBridgeParentFolderId }
-            }
-            return ide.fileTreeManager.getCurrentFolder()
-          },
-          projectFeatures() {
-            return ide.$scope.project.features
-          },
-          type() {
-            return 'doc'
-          },
-          userFeatures() {
-            return ide.$scope.user.features
-          },
-        },
-      })
+    $scope.openNewDocModal = () => {
+      window.dispatchEvent(
+        new CustomEvent('file-tree.start-creating', { detail: { mode: 'doc' } })
+      )
+    }
 
     $scope.openNewFolderModal = () =>
       $modal.open({