feat: Add new "Change Editor" option to note context menu (#823)

* feat: add editor icon

* refactor: remove 'any' type and format

* refactor: move NotesOptions and add ChangeEditorOption

* refactor: fix type for using regular RefObject<T>

* feat: add hide-if-last-child util class

* feat: add Change Editor option

* feat: make radio btn gray if not checked

* fix: accordion menu header and item sizing/spacing

* feat: add Escape key to KeyboardKey enum

* refactor: Remove Editor Menu

* feat: add editor select functionality

* refactor: move plain editor name to constant

* feat: add premium editors with modal if no subscription

refactor: simplify menu group creation

* feat: show alert when switching to non-interchangeable editor

* fix: change editor menu going out of bounds

* feat: increase group header & editor item size

* fix: change editor menu close on blur

* refactor: Use KeyboardKey enum & remove else statement

* feat: add keyboard navigation to change editor menu

* fix: editor menu separators

* feat: improve change editor menu sizing & spacing

* feat: show alert only if editor is not interchangeable

* feat: don't show alert when switching to/from plain editor

* chore: bump snjs version

* feat: temporarily remove change editor alert

* feat: dynamically get footer height

* refactor: move magic number to const

* refactor: move constants to constants file

* feat: use const instead of magic number

app/assets/javascripts/components/NotesContextMenu.tsx

@@ -1,7 +1,7 @@
 import { AppState } from '@/ui_models/app_state';
 import { toDirective, useCloseOnBlur, useCloseOnClickOutside } from './utils';
 import { observer } from 'mobx-react-lite';
-import { NotesOptions } from './NotesOptions';
+import { NotesOptions } from './NotesOptions/NotesOptions';
 import { useCallback, useEffect, useRef } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
 
@@ -11,21 +11,16 @@ type Props = {
 };
 
 const NotesContextMenu = observer(({ application, appState }: Props) => {
-  const {
-    contextMenuOpen,
-    contextMenuPosition,
-    contextMenuMaxHeight,
-  } = appState.notes;
+  const { contextMenuOpen, contextMenuPosition, contextMenuMaxHeight } =
+    appState.notes;
 
   const contextMenuRef = useRef<HTMLDivElement>(null);
-  const [closeOnBlur] = useCloseOnBlur(
-    contextMenuRef as any,
-    (open: boolean) => appState.notes.setContextMenuOpen(open)
+  const [closeOnBlur] = useCloseOnBlur(contextMenuRef, (open: boolean) =>
+    appState.notes.setContextMenuOpen(open)
   );
 
-  useCloseOnClickOutside(
-    contextMenuRef as any,
-    (open: boolean) => appState.notes.setContextMenuOpen(open)
+  useCloseOnClickOutside(contextMenuRef, (open: boolean) =>
+    appState.notes.setContextMenuOpen(open)
   );
 
   const reloadContextMenuLayout = useCallback(() => {