feat: Add table sorting controls (#6678)

* wip

* refactor

* fix: Missing shadow styling

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);
+`;