refactor: migrate remaining angular components to react (#833)

* refactor: menuRow directive to MenuRow component

* refactor: migrate footer to react

* refactor: migrate actions menu to react

* refactor: migrate history menu to react

* fix: click outside handler use capture to trigger event before re-render occurs which would otherwise cause node.contains to return incorrect result (specifically for the account menu)

* refactor: migrate revision preview modal to react

* refactor: migrate permissions modal to react

* refactor: migrate password wizard to react

* refactor: remove unused input modal directive

* refactor: remove unused delay hide component

* refactor: remove unused filechange directive

* refactor: remove unused elemReady directive

* refactor: remove unused sn-enter directive

* refactor: remove unused lowercase directive

* refactor: remove unused autofocus directive

* refactor(wip): note view to react

* refactor: use mutation observer to deinit textarea listeners

* refactor: migrate challenge modal to react

* refactor: migrate note group view to react

* refactor(wip): migrate remaining classes

* fix: navigation parent ref

* refactor: fully remove angular assets

* fix: account switcher

* fix: application view state

* refactor: remove unused password wizard type

* fix: revision preview and permissions modal

* fix: remove angular comment

* refactor: react panel resizers for editor

* feat: simple panel resizer

* fix: use simple panel resizer everywhere

* fix: simplify panel resizer state

* chore: rename simple panel resizer to panel resizer

* refactor: simplify column layout

* fix: editor mount safety check

* fix: use inline onLoad callback for iframe, as setting onload after it loads will never call it

* chore: fix note view test

* chore(deps): upgrade snjs

app/assets/javascripts/components/utils.ts

@@ -33,55 +33,27 @@ export function useCloseOnBlur(
 
 export function useCloseOnClickOutside(
   container: { current: HTMLDivElement | null },
-  setOpen: (open: boolean) => void
+  callback: () => void
 ): void {
   const closeOnClickOutside = useCallback(
     (event: { target: EventTarget | null }) => {
-      if (!container.current?.contains(event.target as Node)) {
-        setOpen(false);
+      if (!container.current) {
+        return;
+      }
+      const isDescendant = container.current.contains(event.target as Node);
+      if (!isDescendant) {
+        callback();
       }
     },
-    [container, setOpen]
+    [container, callback]
   );
 
   useEffect(() => {
-    document.addEventListener('click', closeOnClickOutside);
+    document.addEventListener('click', closeOnClickOutside, { capture: true });
     return () => {
-      document.removeEventListener('click', closeOnClickOutside);
+      document.removeEventListener('click', closeOnClickOutside, {
+        capture: true,
+      });
     };
   }, [closeOnClickOutside]);
 }
-
-export function toDirective<Props>(
-  component: FunctionComponent<Props>,
-  scope: Record<string, '=' | '&' | '@'> = {}
-) {
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  return function () {
-    return {
-      controller: [
-        '$element',
-        '$scope',
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ($element: JQLite, $scope: any) => {
-          if ($scope.class) {
-            $element.addClass($scope.class);
-          }
-          return {
-            $onChanges() {
-              render(h(component, $scope), $element[0]);
-            },
-            $onDestroy() {
-              unmountComponentAtNode($element[0]);
-            },
-          };
-        },
-      ],
-      scope: {
-        application: '=',
-        appState: '=',
-        ...scope,
-      },
-    };
-  };
-}