Table improvements (#6958)

* Header toggling, resizable columns

* Allow all blocks in table cells, disable column resizing in read-only

* Fixed dynamic scroll shadows

* Refactor, scroll styling

* fix scrolling, tweaks

* fix: Table layout lost on sort

* fix: Caching of grip decorators

* refactor

* stash

* fix first render shadows

* stash

* First add column grip, styles

* Just add column/row click handlers left

* fix: isTableSelected for single cell table

* Refactor mousedown handlers

* fix: 'Add row before' command missing on first row

* fix overflow on rhs

* fix: Error clicking column grip when menu is open

* Hide table controls when printing

* Restore table header background

* fix: Header behavior when adding columns and rows at the edges

* Tweak header styling

* fix: Serialize and parsing of column attributes when copy/pasting
fix: Column width is lost when changing column alignment

app/editor/components/SelectionToolbar.tsx

@@ -230,7 +230,7 @@ export default function SelectionToolbar(props: Props) {
   if (isCodeSelection && selection.empty) {
     items = getCodeMenuItems(state, readOnly, dictionary);
   } else if (isTableSelection) {
-    items = getTableMenuItems(dictionary);
+    items = getTableMenuItems(state, dictionary);
   } else if (colIndex !== undefined) {
     items = getTableColMenuItems(state, colIndex, rtl, dictionary);
   } else if (rowIndex !== undefined) {

app/editor/menus/table.tsx

@@ -1,10 +1,32 @@
-import { TrashIcon } from "outline-icons";
+import { AlignFullWidthIcon, TrashIcon } from "outline-icons";
+import { EditorState } from "prosemirror-state";
 import * as React from "react";
-import { MenuItem } from "@shared/editor/types";
+import isNodeActive from "@shared/editor/queries/isNodeActive";
+import { MenuItem, TableLayout } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 
-export default function tableMenuItems(dictionary: Dictionary): MenuItem[] {
+export default function tableMenuItems(
+  state: EditorState,
+  dictionary: Dictionary
+): MenuItem[] {
+  const { schema } = state;
+  const isFullWidth = isNodeActive(schema.nodes.table, {
+    layout: TableLayout.fullWidth,
+  })(state);
+
   return [
+    {
+      name: "setTableAttr",
+      tooltip: isFullWidth
+        ? dictionary.alignDefaultWidth
+        : dictionary.alignFullWidth,
+      icon: <AlignFullWidthIcon />,
+      attrs: isFullWidth ? { layout: null } : { layout: TableLayout.fullWidth },
+      active: () => isFullWidth,
+    },
+    {
+      name: "separator",
+    },
     {
       name: "deleteTable",
       tooltip: dictionary.deleteTable,

app/editor/menus/tableCol.tsx

@@ -7,6 +7,7 @@ import {
   InsertRightIcon,
   ArrowIcon,
   MoreIcon,
+  TableHeaderColumnIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
@@ -78,15 +79,23 @@ export default function tableColMenuItems(
     {
       icon: <MoreIcon />,
       children: [
+        {
+          name: "toggleHeaderColumn",
+          label: dictionary.toggleHeader,
+          icon: <TableHeaderColumnIcon />,
+          visible: index === 0,
+        },
         {
           name: rtl ? "addColumnAfter" : "addColumnBefore",
           label: rtl ? dictionary.addColumnAfter : dictionary.addColumnBefore,
           icon: <InsertLeftIcon />,
+          attrs: { index },
         },
         {
           name: rtl ? "addColumnBefore" : "addColumnAfter",
           label: rtl ? dictionary.addColumnBefore : dictionary.addColumnAfter,
           icon: <InsertRightIcon />,
+          attrs: { index },
         },
         {
           name: "deleteColumn",

app/editor/menus/tableRow.tsx

@@ -3,6 +3,7 @@ import {
   InsertAboveIcon,
   InsertBelowIcon,
   MoreIcon,
+  TableHeaderRowIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
@@ -19,11 +20,16 @@ export default function tableRowMenuItems(
       icon: <MoreIcon />,
       children: [
         {
-          name: "addRowAfter",
+          name: "toggleHeaderRow",
+          label: dictionary.toggleHeader,
+          icon: <TableHeaderRowIcon />,
+          visible: index === 0,
+        },
+        {
+          name: "addRowBefore",
           label: dictionary.addRowBefore,
           icon: <InsertAboveIcon />,
-          attrs: { index: index - 1 },
-          visible: index !== 0,
+          attrs: { index },
         },
         {
           name: "addRowAfter",

app/hooks/useDictionary.ts

@@ -6,13 +6,14 @@ export default function useDictionary() {
 
   return React.useMemo(
     () => ({
-      addColumnAfter: t("Insert after"),
-      addColumnBefore: t("Insert before"),
-      addRowAfter: t("Insert after"),
-      addRowBefore: t("Insert before"),
+      addColumnAfter: t("Add column after"),
+      addColumnBefore: t("Add column before"),
+      addRowAfter: t("Add row after"),
+      addRowBefore: t("Add row before"),
       alignCenter: t("Align center"),
       alignLeft: t("Align left"),
       alignRight: t("Align right"),
+      alignDefaultWidth: t("Default width"),
       alignFullWidth: t("Full width"),
       bulletList: t("Bulleted list"),
       checkboxList: t("Todo list"),
@@ -75,6 +76,7 @@ export default function useDictionary() {
       sortAsc: t("Sort ascending"),
       sortDesc: t("Sort descending"),
       table: t("Table"),
+      toggleHeader: t("Toggle header"),
       mathInline: t("Math inline (LaTeX)"),
       mathBlock: t("Math block (LaTeX)"),
       tip: t("Tip"),

app/typings/styled-components.d.ts

@@ -9,7 +9,6 @@ declare module "styled-components" {
     text: string;
     cursor: string;
     divider: string;
-    tableDivider: string;
     tableSelected: string;
     tableSelectedBackground: string;
     quote: string;