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/EmojiMenuItem.tsx

@@ -1,21 +1,24 @@
 import * as React from "react";
 import styled from "styled-components";
-import CommandMenuItem, {
-  Props as CommandMenuItemProps,
-} from "./CommandMenuItem";
+import SuggestionsMenuItem, {
+  Props as SuggestionsMenuItemProps,
+} from "./SuggestionsMenuItem";
 
 const Emoji = styled.span`
   font-size: 16px;
   line-height: 1.6em;
 `;
 
-type EmojiMenuItemProps = Omit<CommandMenuItemProps, "shortcut" | "theme"> & {
+type EmojiMenuItemProps = Omit<
+  SuggestionsMenuItemProps,
+  "shortcut" | "theme"
+> & {
   emoji: string;
 };
 
 export default function EmojiMenuItem({ emoji, ...rest }: EmojiMenuItemProps) {
   return (
-    <CommandMenuItem
+    <SuggestionsMenuItem
       {...rest}
       icon={<Emoji className="emoji">{emoji}</Emoji>}
     />