Add list indent/outdent controls on mobile (#5205)

app/editor/components/SelectionToolbar.tsx

@@ -12,6 +12,7 @@ import isNodeActive from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { creatingUrlPrefix } from "@shared/utils/urls";
 import useDictionary from "~/hooks/useDictionary";
+import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
 import useToasts from "~/hooks/useToasts";
 import getDividerMenuItems from "../menus/divider";
@@ -80,6 +81,7 @@ export default function SelectionToolbar(props: Props) {
   const menuRef = React.useRef<HTMLDivElement | null>(null);
   const isActive = useIsActive(view.state);
   const previousIsActuve = usePrevious(isActive);
+  const isMobile = useMobile();
 
   React.useEffect(() => {
     // Trigger callbacks when the toolbar is opened or closed
@@ -205,7 +207,7 @@ export default function SelectionToolbar(props: Props) {
   } else if (isDividerSelection) {
     items = getDividerMenuItems(state, dictionary);
   } else {
-    items = getFormattingMenuItems(state, isTemplate, dictionary);
+    items = getFormattingMenuItems(state, isTemplate, isMobile, dictionary);
   }
 
   // Some extensions may be disabled, remove corresponding items

app/editor/menus/formatting.tsx

@@ -13,6 +13,8 @@ import {
   HighlightIcon,
   CommentIcon,
   ItalicIcon,
+  OutdentIcon,
+  IndentIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import { isInTable } from "prosemirror-tables";
@@ -27,6 +29,7 @@ import { Dictionary } from "~/hooks/useDictionary";
 export default function formattingMenuItems(
   state: EditorState,
   isTemplate: boolean,
+  isMobile: boolean,
   dictionary: Dictionary
 ): MenuItem[] {
   const { schema } = state;
@@ -135,6 +138,18 @@ export default function formattingMenuItems(
       active: isNodeActive(schema.nodes.ordered_list),
       visible: (allowBlocks || isList) && !isCode,
     },
+    {
+      name: "outdentList",
+      tooltip: dictionary.outdent,
+      icon: <OutdentIcon />,
+      visible: isList && isMobile,
+    },
+    {
+      name: "indentList",
+      tooltip: dictionary.indent,
+      icon: <IndentIcon />,
+      visible: isList && isMobile,
+    },
     {
       name: "separator",
       visible: !isCode,