chore: Refactoring some editor controls (#5023)

* Refactor EmojiMenu

* Refactor CommandMenu to functional component

* Remove more direct props, refactor to useEditor

* Remove hardcoded IDs

* Refactor SelectionToolbar to functional component

* fix: Positioning of suggestion menu on long paragraphs

app/editor/components/FloatingToolbar.tsx

@@ -25,11 +25,9 @@ const defaultPosition = {
 
 function usePosition({
   menuRef,
-  isSelectingText,
   active,
 }: {
   menuRef: React.RefObject<HTMLDivElement>;
-  isSelectingText: boolean;
   active?: boolean;
 }) {
   const { view } = useEditor();
@@ -38,13 +36,7 @@ function usePosition({
   const viewportHeight = useViewportHeight();
   const isTouchDevice = useMediaQuery("(hover: none) and (pointer: coarse)");
 
-  if (
-    !active ||
-    !menuWidth ||
-    !menuHeight ||
-    !menuRef.current ||
-    isSelectingText
-  ) {
+  if (!active || !menuWidth || !menuHeight || !menuRef.current) {
     return defaultPosition;
   }
 
@@ -173,12 +165,15 @@ const FloatingToolbar = React.forwardRef(
     const menuRef = ref || React.createRef<HTMLDivElement>();
     const [isSelectingText, setSelectingText] = React.useState(false);
 
-    const position = usePosition({
+    let position = usePosition({
       menuRef,
-      isSelectingText,
       active: props.active,
     });
 
+    if (isSelectingText) {
+      position = defaultPosition;
+    }
+
     useEventListener("mouseup", () => {
       setSelectingText(false);
     });