feat: Add table sorting controls (#6678)

* wip

* refactor

* fix: Missing shadow styling

app/editor/components/ToolbarMenu.tsx

@@ -1,4 +1,3 @@
-import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
 import { useMenuState } from "reakit";
 import { MenuButton } from "reakit/Menu";
@@ -27,13 +26,15 @@ function ToolbarDropdown(props: { item: MenuItem }) {
   const { state } = view;
 
   const items: TMenuItem[] = React.useMemo(() => {
-    const handleClick = (item: MenuItem) => () => {
-      if (!item.name) {
+    const handleClick = (menuItem: MenuItem) => () => {
+      if (!menuItem.name) {
         return;
       }
 
-      commands[item.name](
-        typeof item.attrs === "function" ? item.attrs(state) : item.attrs
+      commands[menuItem.name](
+        typeof menuItem.attrs === "function"
+          ? menuItem.attrs(state)
+          : menuItem.attrs
       );
     };
 
@@ -42,7 +43,10 @@ function ToolbarDropdown(props: { item: MenuItem }) {
           type: "button",
           title: child.label,
           icon: child.icon,
-          selected: child.active ? child.active(state) : false,
+          dangerous: child.dangerous,
+          visible: child.visible,
+          selected:
+            child.active !== undefined ? child.active(state) : undefined,
           onClick: handleClick(child),
         }))
       : [];
@@ -51,10 +55,10 @@ function ToolbarDropdown(props: { item: MenuItem }) {
   return (
     <>
       <MenuButton {...menu}>
-        {(props) => (
-          <ToolbarButton {...props} hovering={menu.visible}>
+        {(buttonProps) => (
+          <ToolbarButton {...buttonProps} hovering={menu.visible}>
             {item.label && <Label>{item.label}</Label>}
-            <Arrow />
+            {item.icon}
           </ToolbarButton>
         )}
       </MenuButton>
@@ -121,11 +125,6 @@ const FlexibleWrapper = styled.div`
   gap: 6px;
 `;
 
-const Arrow = styled(ExpandedIcon)`
-  margin-right: -4px;
-  color: ${s("textSecondary")};
-`;
-
 const Label = styled.span`
   font-size: 15px;
   font-weight: 500;

app/editor/menus/tableCol.tsx

@@ -5,9 +5,12 @@ import {
   AlignCenterIcon,
   InsertLeftIcon,
   InsertRightIcon,
+  ArrowIcon,
+  MoreIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
+import styled from "styled-components";
 import isNodeActive from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
@@ -58,22 +61,48 @@ export default function tableColMenuItems(
       name: "separator",
     },
     {
-      name: rtl ? "addColumnAfter" : "addColumnBefore",
-      tooltip: rtl ? dictionary.addColumnAfter : dictionary.addColumnBefore,
-      icon: <InsertLeftIcon />,
+      name: "sortTable",
+      tooltip: dictionary.sortAsc,
+      attrs: { index, direction: "asc" },
+      icon: <SortAscIcon />,
     },
     {
-      name: rtl ? "addColumnBefore" : "addColumnAfter",
-      tooltip: rtl ? dictionary.addColumnBefore : dictionary.addColumnAfter,
-      icon: <InsertRightIcon />,
+      name: "sortTable",
+      tooltip: dictionary.sortDesc,
+      attrs: { index, direction: "desc" },
+      icon: <SortDescIcon />,
     },
     {
       name: "separator",
     },
     {
-      name: "deleteColumn",
-      tooltip: dictionary.deleteColumn,
-      icon: <TrashIcon />,
+      icon: <MoreIcon />,
+      children: [
+        {
+          name: rtl ? "addColumnAfter" : "addColumnBefore",
+          label: rtl ? dictionary.addColumnAfter : dictionary.addColumnBefore,
+          icon: <InsertLeftIcon />,
+        },
+        {
+          name: rtl ? "addColumnBefore" : "addColumnAfter",
+          label: rtl ? dictionary.addColumnBefore : dictionary.addColumnAfter,
+          icon: <InsertRightIcon />,
+        },
+        {
+          name: "deleteColumn",
+          dangerous: true,
+          label: dictionary.deleteColumn,
+          icon: <TrashIcon />,
+        },
+      ],
     },
   ];
 }
+
+const SortAscIcon = styled(ArrowIcon)`
+  transform: rotate(-90deg);
+`;
+
+const SortDescIcon = styled(ArrowIcon)`
+  transform: rotate(90deg);
+`;

app/editor/menus/tableRow.tsx

@@ -1,4 +1,9 @@
-import { TrashIcon, InsertAboveIcon, InsertBelowIcon } from "outline-icons";
+import {
+  TrashIcon,
+  InsertAboveIcon,
+  InsertBelowIcon,
+  MoreIcon,
+} from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
 import { MenuItem } from "@shared/editor/types";
@@ -11,25 +16,28 @@ export default function tableRowMenuItems(
 ): MenuItem[] {
   return [
     {
-      name: "addRowAfter",
-      tooltip: dictionary.addRowBefore,
-      icon: <InsertAboveIcon />,
-      attrs: { index: index - 1 },
-      visible: index !== 0,
-    },
-    {
-      name: "addRowAfter",
-      tooltip: dictionary.addRowAfter,
-      icon: <InsertBelowIcon />,
-      attrs: { index },
-    },
-    {
-      name: "separator",
-    },
-    {
-      name: "deleteRow",
-      tooltip: dictionary.deleteRow,
-      icon: <TrashIcon />,
+      icon: <MoreIcon />,
+      children: [
+        {
+          name: "addRowAfter",
+          label: dictionary.addRowBefore,
+          icon: <InsertAboveIcon />,
+          attrs: { index: index - 1 },
+          visible: index !== 0,
+        },
+        {
+          name: "addRowAfter",
+          label: dictionary.addRowAfter,
+          icon: <InsertBelowIcon />,
+          attrs: { index },
+        },
+        {
+          name: "deleteRow",
+          label: dictionary.deleteRow,
+          dangerous: true,
+          icon: <TrashIcon />,
+        },
+      ],
     },
   ];
 }